.net核心Fullcalendar通过给出月份来获取数据 [英] .net core Fullcalendar get data by giving month

问题描述

我们正在将Fullcalendar与.net核心-ef核心一起使用.我们通过将事件数据传递给全日历来获取所有事件数据，这意味着很多事件，然后它会使用本月的默认数据创建事件日历.我想要的是让它变得懒惰.在获取数据时，它将仅返回给出月份的事件.

We are using fullcalendar with .net core- ef core. We are getting all the event data by passing it to fullcalendar.That means a lot of event.Then It creates event calendar with theese data default by this month. What I want is make it lazy. When getting data, it would returns only events giving month.

在c#

public JsonResult GetEvents(E_Model model){
     var list = _Service.GetEvents().ToList();
   }

在js ajax调用文件中

in js ajax calling file

function GetEvents() {
  
        var events = [];
        $.ajax({
            type: "POST",
            url: "/calHome/GetEvents",
            data: { model: data },
            success: function (data) {
                calender.style.display = 'block';          
                $.each(data, function (i, v) {                       
                    events.push({
                        id: v.id,
                        title: v.name,
                        description: v.description,      
              //i got start and end moment
             start: moment(v.start),
                    end: v.end != null ? moment(v.end) : null,});
        })
        GenerateCalender(events);

}

生成日历

function GenerateCalender(events) {
    $('#calender').fullCalendar('destroy');
    $('#calender').fullCalendar({
        contentHeight: 800,
        firstDay: 1,
        defaultDate: new Date(),
        timeFormat: 'HH:mm',
 eventLimit: true,
        events: events,
}

ajax GetEvents在控制器中调用GetEvents，它返回json，然后在ajax中的GetEvents调用genaretecalendar.在aja中调用GetEvents方法时.当我按上一个或下一个按钮时，我想制作它，它将把月份提供给控制器，并按月份获取数据.我试着听类似

ajax GetEvents calls GetEvents in controller it returns json then GetEvents in ajax calls genaretecalendar. When Calling the GetEvents metod in aja. I want to make it when I press the prev or next button, it will give the month to controller and get data by month. I tryed to listen prev event like

$('.fc-prev-button').one('click',function (e) {
                console.log('prev, do something');
            });
       

新

 events: {
            type: "POST",
            url: "/home/GetEvents",
            data: function () { // a function that returns an object
                return {
                     
                };
            }

控制器

[HttpPost]
 public JsonResult GetEvents(FiltModel model)
                               //model includes string start, end

推荐答案

实现此目标的最佳方法是使用将事件作为JSON feed 模式，在fullCalendar文档中进行了描述.

The best way to achieve this is to use the events as JSON feed pattern described in the fullCalendar documentation.

基本上它是这样的:如果您告诉fullCalendar控制器操作的URL，则只要日历中的日期范围发生更改(并且该日期还没有下载事件)，它将自动向服务器发出新请求.范围).它还将自动附加开始"消息.和结束"为请求添加日期参数-因此，服务器要做的就是读取这些参数，并在数据库查询中使用它们来过滤返回日历的结果.您还可以选择将其他相关数据也添加到请求中，例如其他过滤器选项.

Essentially it works like this: if you tell fullCalendar the URL of your controller action, it will automatically make a new request to the server whenever the date range changes in the calendar (and it does not already have downloaded events for that date range). It will also automatically append "start" and "end" date parameters to the request - so then all your server has to do is read those parameters and use them in your database query to filter the results being returned to the calendar. You can also, optionally, append other relevant data to the request as well - such as your other filter options.

因此，在您的情况下，您将得到如下代码:

So in your case you would end up with code something like this:

JavaScript-fullCalendar事件配置:

JavaScript - fullCalendar events configuration:

events: {
  type: "POST",
  url: "/home/GetEvents",
  data: function () { // a function that returns an object
  return {
    //your filter object goes here
  };
}

控制器:

[HttpPost]
public JsonResult GetEvents(FiltModel model) {
   //...where the FiltModel class includes start and end parameters - ideally these should be DateTime objects, not strings.

   //... then, query the database using the filter options in the model, and return JSON in the format required by fullCalendar
}

这篇关于.net核心Fullcalendar通过给出月份来获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！