仅加载资源。 活动在FullCalendar中不起作用

Question

I have been working on scheduler and found that full calendar could be a good solution to me. I have loaded resources and event with values that came up with the code. But, When I grab resources from my database, event stopped working.

Here is my code:

<style type='text/css'>

    #calendar {
        width: 100%;
        }

</style>

<script type='text/javascript'>

    $(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var calendar = $('#calendar_resources').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'resourceDay,resourceWeek,resourceNextWeeks,resourceMonth'
            },
            defaultView: 'resourceMonth',
            firstDay: 1,    
            editable: true,
            selectable: true,
                    minTime: 8,
        maxTime:16,
            selectHelper: true,
            events: [
                {
                    title: "Lunch 12.15-14.45",
                    start: new Date(y, m, d, 12, 15),
                    end: new Date(y, m, d, 14, 45),
                    allDay: false,
                    resource: 1
                },              
                {
                    title: 'Meeting from this day to this +4',
                    start: new Date(y, m, d, 10, 30),
                    end: new Date(y, m, d+4, 11, 00),
                    allDay: false,
                    resource: 1
                },
                {
                    title: 'Meeting 11.00',
                    start: new Date(y, m-2, d, 11, 00),
                    allDay: true,
                    resource: 2
                },
                {
                    title: 'Lunch 12-14',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false,
                    resource: 3
                }       
            ],
            resources: base_url+'admin/allocations/load_resources/<?php echo $product_id; ?>',
            select: function(start, end, allDay, jsEvent, view, resource) {
                var title = prompt('event title:');

                if (title) {
                    calendar.fullCalendar('renderEvent',
                        {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay,
                            resource: resource.id
                        },
                        true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },
            resourceRender: function(resource, element, view) {
                // this is triggered when the resource is rendered, just like eventRender
            },
            eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { 
                alert('event moved to '+event.start+' to '+event.resource);
            },
            eventResize: function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { 
                alert('event was resized, new endtime: '+event.end);
            },
            eventClick: function ( event, jsEvent, view )  {
                alert('event '+event.title+' was left clicked');
            },
            eventRender: function( event, element, view ) { 

            },
            windowResize: function( view ) {
                calendar.fullCalendar('option', 'height', $(window).height() - 40);
            }
        });
    });

</script>



<div id='calendar_resources'></div>
<div id='contextMenuContainer' style='background-color:#f0f0f0;width:100px;height:100px;display:none;z-index:999;border-radius:5px;border:1px solid black;position:absolute;'></div>

I am stuck at this place. I am not able to get events in my calendar. Helping hands are appreciated.

Answer 1

I've made an issue on that, to be able to change the resources source on the fly ( https://github.com/jarnokurlin/fullcalendar/issues/11#issuecomment-38090185 ), for now, I've just hard changed the core:

function fetchResources(useCache, currentView) {
    // if useCache is not defined, default to true
    useCache = typeof useCache !== 'undefined' ? useCache : true;

    if (cache != undefined && useCache) {
        // get from cache
        return cache;
    } else {
        // do a fetch resource from source, rebuild cache
        cache = [];
        /** TWEAK BY HAKS **/

        var resources = _fetchResourceSource({url: "/projetcollaborateur/findProjCollabs?proj=" + $("#selectCalProj option:selected").val()}, currentView);
        cache = cache.concat(resources);
        /*
        var len = sources.length;
        for (var i = 0; i < len; i++) {
            var resources = _fetchResourceSource(sources[i], currentView);
            cache = cache.concat(resources);
        }*/
        /** END TWEAK **/
        return cache;
    }
}

Also, be aware that events seems to be loaded before the resources (and this is what I'm trying to change for my app... )