fullcalendar：按下next或prev按钮时调用Web服务功能 [英] fullcalendar: call web service function when next or prev button is pressed

问题描述

我想每次只加载一个月的事件。首先，在一页中显示一个月的事件，按下一个或上一个按钮时，通过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 （$ {$ b $ header：{
 left：''，$ b' $ b 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.Start日期）; 
 event.title = item.EventName; 
 event.className = item.className.toString（）
返回事件; 
}）
}）; 
 
}，
错误：函数（XMLHttpRequest，textStatus，errorThrown）{
调试器; 
} 
}）; 
 
}）; 
  

也是

  $（'.fc-button-prev span'）。click（function（）{
 alert（'prev is clicked，do something'）; 
}）; 
  

无法正常工作。

解决方案

您可能想要使用viewdisplay例如
viewDisplay：function（view）{var next = view.title;警报（未来）; }

这里我使用该事件去获取web服务中的下一批数据并将其呈现。

  $（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'）; 
} 
}）; 
}）; 
 
 
函数getCalData（）{
 
 var source = [{}]; 
 $ .ajax（{
 async：false，
 url：'/ mysite / GetWeekData'，
 data：{myParam：$（'＃calendar'）。fullCalendar（' getView'）。visStart}，
 success：function（data）{
 $（data）.each（function（）{
 source.push（{
 title：$（这个）.attr（'title'），
 start：$（this）.attr（'start'），
}）; 
}）; 
}，
 error：function（）{
 alert（'无法获取数据'）; 
}，
}）; 
返回来源; 
} 
  

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.

解决方案

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

这篇关于fullcalendar：按下next或prev按钮时调用Web服务功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！