Geek asks and answers

Fullcalendar: Call a web service function when the next button or previous button is pressed.

I want to load events only one month at a time. First, show the event of one month on one page, and when you click the next or previous button, display the event of that month from the database through the web service (C #). How can i achieve this?

I also want to receive data from only one month, and I want to send the selected year, the value of the month to the web service, so that it can send data only to a 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');
});

does not work.

0
source share
1 answer

You might want to use viewdisplay, for example. viewDisplay: function (view) {var next = view.title; alerts (hereinafter); }

- .

$(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;
}
0

More articles:


All Articles