John Davidson

Message:

I am using Fullcalendar for my app and i'm having trouble displaying the necessary events for display on calendar.

I display calendar as below;

        $calendar = new Calendar();

        $calendar

        ->setOptions([

            'plugins' => ['window.interaction', 'window.dayGridPlugin', 'window.timeGridPlugin', 'window.listPlugin'],

            'locales' => 'window.allLocales',

            'locale' => config('app.locale'),

            'events' => [

                'url' => route('project_eventsJSON', ['project' => $project]),

            ],

            'firstDay' => 1,

            'timeZone' => 'local',

            'displayEventTime' => true,

            'selectable' => true,

            //'initialView' => 'timeGridWeek',

            'headerToolbar' => [

                'left' => 'prev,next today',

                'center' => 'title',

                'right' => 'dayGridMonth,timeGridWeek,timeGridDay'

            ],

        ]);

        $calendar->setId('1');

        $calendar->setEs6();

        return $calendar;

and my events route as below;

public function CaleventsJSON(Project $project) {

        $events = [];

foreach ($req->planneddates as $date) { 

  $event = [

                    'id' => 1,

                    'title' => $name,

                    'start' => $fullparsed,

                    'end' => $fullparsed,

                    'allDay' => true,

                ];

                $events[] = $event;



}

return response()->json($events);

}

Number of events is now more than 2K, i end up with crazy loading times... it takes almost 20 seconds until the events show up on calendar.

I see from my devtools that my events route(shown above) is being called as below;

EventsJSON?start=2022-01-31T00%3A00%3A00%2B03%3A00&end=2022-03-14T00%3A00%3A00%2B03%3A00

start and end dates have no effect, route still loads events from 2 years ago... i dont think i am using this correctly... how could i optimize it so that i am not loading all events and just load the events needed for display?

Thanks

---

My Answer:
> First, make sure you are using the latest version of Fullcalendar and Laravel to ensure optimal performance.

> One common issue that can slow down the loading speed of Fullcalendar with a large number of events is fetching all events at once. Instead of loading all 2K events at once, consider implementing lazy loading or pagination to only load events for the current viewable range.

> You can use Fullcalendar's `events` option to dynamically fetch events from the server based on the current view. Here's an example of how you can implement lazy loading with Laravel:

php
// In your controller
public function events(Request $request)
{
$start = $request->start;
$end = $request->end;

$events = Event::whereBetween('start_date', [$start, $end])->get();

return response()->json($events);
}

// In your blade view
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
events: '/events',
// Other calendar options
});

calendar.render();
});


> In this example, the `events` option is set to the `/events` route, which will fetch events from the server based on the current viewable range. Make sure to adjust the `Event::whereBetween` query to match your event model and date fields.

> By implementing lazy loading or pagination, you can improve the loading speed of Fullcalendar with a large number of events.