.net core Fullcalendar get data by giving month

随声附和 提交于 2021-02-08 09:55:48

问题


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.

in c#

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

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

}

Generate calendar

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

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

NEW

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

Controller

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

回答1:


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

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 events configuration:

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

Controller:

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


来源:https://stackoverflow.com/questions/65106933/net-core-fullcalendar-get-data-by-giving-month

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!