完整日历-按月加载事件

Question

当用户单击下个月或上个月时，尝试在脚本中进行更改以加载事件。

使用SPService库从SharePoint日历中获取事件，并且需要传递日期以在用户单击时从相应月份中获取事件。

尝试使用完整的日历viewRender，但不起作用。解决方案available令人厌倦，但无法跟踪点击的月份。

(function(){    
$(document).ready(function(){

    $context.find('#head-prev').on('click', function(){   
        $context.find('#calendar').fullCalendar('prev');
    });

    $context.find('#head-next').on('click', function(){            
        $context.find('#calendar').fullCalendar('next');
        });

    // initialize the calendar
    displayCalendar();
});    

function displayCalendar() {
    initializeCalendar(false);
    calendarEvents = $().SPServices.SPGetListItemsJson({
                listName : 'NewCalendar',
                webURL : '/testcalendar',
                CAMLQuery :"<Query>" +
                            "<Where>" + 
                                "<DateRangesOverlap>" +
                                    "<FieldRef Name='EventDate' />" +
                                    "<FieldRef Name='EndDate' />" +
                                    "<FieldRef Name='RecurrenceID' />" +
                                        "<Value Type='DateTime'>" +
                                            "<Month />" +
                                        "</Value>" +
                                "</DateRangesOverlap>" +
                            "</Where>" +                
                    "</Query>",
                CAMLQueryOptions : "<QueryOptions>" +
                        "<CalendarDate>" + formatDateToLocal(new Date().toISOString()) + "</CalendarDate>" +
                        "<ExpandRecurrence>TRUE</ExpandRecurrence>" +
                        "<RecurrenceOrderBy>TRUE</RecurrenceOrderBy>" +
                        "<ViewAttributes Scope='RecursiveAll'/>" +
                    "</QueryOptions>",
                mappingOverrides : {
                    "ows_fAllDayEvent" : {
                    "mappedName" : "fAllDayEvent",
                    "objectType" : "Boolean"
                    },        
                    "ows_fRecurrence" : {
                    "mappedName" : "fRecurrence",
                    "objectType" : "Boolean"
                    }
                }       
                });

        $.when(calendarEvents).done(function() {                           
                    addEventSource(this.data);

        });

}   
function addEventSource(eventData){

    var events = []; // holds our events
    var results = eventData;

    // loop through the returned event data
    for(var i = 0; i < results.length; i++){
        var event = {};                 // new event object        

        event.title = results[i].Title; // get the title
        event.start = convertFromUTC(results[i][StartDate]);                     // get the start time converted to local time
        if(results[i].EndDate) event.end = convertFromUTC(results[i][EndDate]);  // if there's an end time, convert it to local
        event.color = categoriesMap.get(results[i][EventCategory]);
        events.push(event); // add the event to the array
    }

    // add the events to the calendar
    $context.find("#calendar").fullCalendar( 'addEventSource', events);        
}      
// renders a new calendar
function initializeCalendar(initialized){
    $context.find('#calendar').fullCalendar('destroy'); // destroy any existing calendar

    // initialize the calendar with options
    $context.find('#calendar').fullCalendar({
        //which buttons are in the header
        header: false,
        //set the button text for the today button
        buttonText: {
            today: "Today"
        },
        themeSystem: 'bootstrap3',
        nowIndicator: true,                                     // agenda views include a bar indicating current time     
        droppable: false,                                       // prevent external events from being dropped in
        eventLimit: true,                                       // any events that don't fit will have a "+n" icon            
        viewRender: function(view) {

            var title = view.title;
            title = title.split(",");

            if(title.length == 1){
                title = title[0].split(" ");               
            }                


            $context.find('#head-month').text(title[0]);
            $context.find('#head-year').text(title[1]);                                                
        }
    }); // ==== End Calendar Initialization ====

    // go to the correct date from a previous view
    if(initialized){
        $context.find('#calendar').fullCalendar('gotoDate', view.intervalStart);
    }
}

}）;}（））; //结束IIFE