全日历:按下一键或上一键时调用web服务功能

本文关键字：一键 调用 web 服务功能 日历 | 更新日期: 2023-09-27 18:11:32

我想一次只加载一个月的事件。首先，在一个页面中显示一个月的事件，当按下next或prev按钮时，通过web服务(c#)从数据库显示该月的事件。我怎样才能做到呢?

我还想从一个月只获得数据，我想发送所选的年，月值到web服务，所以它可以发送只有特定月份的数据。

我当前的jquery代码是:

   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;
           }
       });
   });
也

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

全日历:按下一键或上一键时调用web服务功能

你可能想使用viewdisplay，例如:viewDisplay: function(view) {var next = view.title;警报(下);}

在这里，我使用该事件从webservice获取下一批数据并渲染它。

$(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;
}
相关文章：