.net core Fullcalendar get data by giving month

Question

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

Master don't be get frustrated , sarcasm some times not a bad thing and i enjoyed to talk with you, thank you for that and your labors. I'm gona make it — masteracoon
YEs finally made it with your help, thank you much . Have a good day master — masteracoon

ADyson ADyson · Accepted Answer · 2020-12-03T16:01:17

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
}

.net core Fullcalendar get data by giving month

1 Answers