fullcalendar: call web service function when next or prev button is pressed

问题

I want to load events of only one month at a time. At first, show the event of one month in one page and when next or prev button is pressed, show the event of that month from database via web service (C#). How can I achieve that?

I also want to get data from one month only and I want to send the selected year, month value to the web service so it can send the data of only specific month.

My current jquery code is:

   jQuery(document).ready(function () {
       $.ajax({
           type: "POST",
           contentType: "application/json",
           url: "FullcalenderwithWebservice.asmx/GetEvents",
           dataType: "json",
           success: function (data) {
               $("div[id=loading]").hide();
               $("div[id=fullcal]").show();
               $('div[id*=fullcal]').fullCalendar({
                   header: {
                       left: '',
                       center: 'title',
                       right: 'today prev,next'
                   },
                   editable: false,
                   events: $.map(data.d, function (item, i) {
                       var event = new Object();
                       event.id = item.EventID;
                       event.start = new Date(item.StartDate);
                       event.title = item.EventName;
                       event.className = item.className.toString()
                       return event;
                   })
               });

           },
           error: function (XMLHttpRequest, textStatus, errorThrown) {
               debugger;
           }
       });

   });

also

$('.fc-button-prev span').click(function(){
   alert('prev is clicked, do something');
});

is not working.

回答1:

You might want to use viewdisplay e.g. viewDisplay: function(view) { var next = view.title; alert(next); }

Here I am using that event to go and get the next batch of data from a webservice and render it.

$(document).ready(function () {

var calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
    },


    eventSources: [ getCalData() ],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: ''
    },
    viewDisplay: function (view) {
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar('addEventSource', getCalData());
        $('#calendar').fullCalendar('rerenderEvents');
    }
  });
});


function getCalData() {

var source = [{}];
$.ajax({
    async: false,
    url: '/mysite/GetWeekData',
    data: { myParam: $('#calendar').fullCalendar('getView').visStart },
    success: function (data) {
        $(data).each(function () {
            source.push({
                title: $(this).attr('title'),
                start: $(this).attr('start'),
            });
        });
    },
    error: function () {
        alert('could not get the data');
    },
});
return source;
}

来源：https://stackoverflow.com/questions/16312459/fullcalendar-call-web-service-function-when-next-or-prev-button-is-pressed

标签

web-services

fullcalendar