Is there a way to prevent FullCalendar from re-fetching my events when I click the next or previous buttons?

Currently facing an issue with FullCalendar and Laravel where each time I navigate to the next/previous month, it triggers my ajax call for events. How can I prevent this behavior? My goal is to fetch events only once, and then merge them together when I select checkboxes for other calendars.

Check out the code snippet below:

$(".calendar_list").each(function () {
    if (this.checked) {
        selectedCalendars.push($(this).val());
    }
});

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    lazyFetching: true,
    headerToolbar: {
        left: 'prev,next today addEventButton',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: {
        url: SITEURL + '/calendarsAjax',
        method: 'GET',
        extraParams: {
            calendar_ids: selectedCalendars
        },
        success: function() {
        },
        failure: function (e) {
            console.log(e);
        }
    },
});
calendar.render();

document.addEventListener('DOMContentLoaded', function() {
    getCalendar();
});

I have attempted lazyloading but unfortunately the issue persists.

Answer №1

I completely agree with the sentiment shared by Tim Lewis in his insightful comment. Why would anyone want to hinder this natural functionality? This is precisely how it was designed to function.

Perhaps what you haven't quite grasped is that according to the documentation provided on JSON events feed, fullCalendar will transmit "start" and "end" parameters to your server with every request. These parameters indicate the earliest and latest dates currently displayed on the calendar. Your server is expected to utilize this information to filter its data, returning only event data that falls within or overlaps these specified dates.

This approach is generally far more efficient than retrieving all events from your database when the calendar is initially loaded. As time passes, the list of events stored in your database will inevitably expand, with most likely not being viewed by the user at all. Thus, it is beneficial to download only relevant events selectively as needed, rather than downloading everything upfront.

In addition, it's worth noting that the option of lazyFetching, as outlined in the documentation, mainly aims to reduce the number of AJAX calls made by the calendar. It does not entirely eliminate the fetching process; instead, it simply avoids reloading events for the same date range if they have already been fetched previously.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Angular: Looping through an Array of Objects

How can I extract and display values from a JSON object in a loop without using the keyValue pipe? Specifically, I am trying to access the "student2" data and display the name associated with it. Any suggestions on how to achieve this? Thank you for any h ...

Javascript encountered an error upon attempting to return from the main function

I have a function that calls the database to perform an action: function callQuery(query) { db.query(query, (err, res) => { if (err) { // Error connecting to DB console.log(err.stack) } else { // Return the results ret ...

Tips for including a subquery in query results using axis

I have a query for the objects table using an id. Then, I want to query the same table with the id from my result and add it as a new property. Does that explanation make sense? app.get(`/details`, (req, res) => { const { id } = req.query; connectio ...

Switch the class of the parent div when clicked (or when ng-clicked)

I am attempting to create collapsible panels with a resize button by incorporating the following JavaScript code: function toggleSize() { $(".elementGraphic").click(function () { $(this).toggleClass("col-md-12"); $(this).toggleClass("c ...

Swap out the <a> tag for an <input type="button"> element that includes a "download" property

I have been working on a simple canvas-to-image exporter. You can find it here. Currently, it only works with the following code: <a id="download" download="CanvasDemo.png">Download as image</a> However, I would like to use something like th ...

Having trouble converting the JQuery result from the REST request into the correct format

Currently, I am working on making a REST request for an array of objects using JQuery. During the execution of the code within the "success" section, everything works perfectly fine - the objects in the array are converted to the correct type. However, I ...

What is the best way to use a timeout function to swap div layers in AngularJS?

Greetings, esteemed members of the Angular Technorati. I bring forth a perplexing yet seemingly simple issue that requires your expertise. My goal is to dynamically switch out a div layer after approximately 11 seconds and display another div layer. How ca ...

Unit tests manipulating JavaScript functions to return undefined values

Currently, I am in the process of testing some JavaScript functions within a larger React application. These functions heavily utilize the module pattern, which leads me to believe that my misunderstanding lies within this pattern. The script I am testing ...

Addressing the issue of audio files not being cached by IOS web browsers

I am currently developing a language learning website where users can listen to audio by clicking on objects. Many of the site's users are in remote areas with slow Internet connections, so I need to cache the audio files before each activity loads to ...

I am unable to access the properties of an undefined element, specifically the 'size' property in Next.js 13

I encountered a problem today while working with Next.js version 13.4 and backend integration. When using searchParams on the server side, I received an error message: "Cannot read properties of undefined (reading 'size')" while destructuring siz ...

Modify the position of the CSS background for the Y-axis using jQuery

Let's consider a scenario with the following table: <table> <tr> <td class="t"></td> <td class="e"></td> <td class="s"></td> <td class="t"></td> </ ...

"Encountering an issue with passing parameters in Spring controller while using AJAX

I'm experiencing a peculiar issue when trying to pass an Int param in a POST request to the Spring MVC controller. What's strange is that the parameter is being sent through POST, but it isn't being parsed by the controller. Here's th ...

Implement pre-save middleware in Mongoose to perform lowercase validation on a document's

In order to have a user object maintain case sensitivity for display purposes, while being lowercased for uniqueness purposes, I initially considered adding a usernameDisplay property to the schema with a pre-save hook: var userSchema = new Schema({ u ...

How can I animate SVG paths to fade in and out sequentially?

My current code is causing the path to fade in/out all at once instead of one after the other var periodClass = jQuery(this).parent().attr("class"); jQuery("svg path").each(function(i) { var elem = jQuery(this); if (elem.hasClass(periodClass)) ...

Is there a way to transform a callback into promises using async/await, and convert a prototype function into a standard

I need help converting a code callback function to promises. When attempting to convert the prototype to a normal function, I encounter an error that I can't fix on my own. I am eager to utilize the ES7 async-await feature to avoid callbacks. functio ...

What is the process for retrieving the AJAX response text?

When it comes to my AJAX development, I rely on prototype and utilize the following code: somefunction: function(){ var result = ""; myAjax = new Ajax.Request(postUrl, { method: 'post', postBody: postData, content ...

The functionality of Angular services is not available for use in Jasmine tests

As someone who is relatively new to Jasmine Testing and the Angular framework, I find myself in a unique situation. I am currently struggling with referencing my service functions in my Jasmine tests. Here is a snippet of my Angular Service Initialization ...

Redux integration for react-country-region-selector Form submission

Currently, I am working on implementing a country-region selection feature using ReactJS. To achieve this functionality, I decided to utilize the react-country-region-selector library and created a component named CountryRegion. This component consists of ...

Is there a way to fetch API data selectively rather than all at once?

Hello everyone, I successfully managed to retrieve data from the Star Wars API in JSON format and display it on my application. Initially, I set the state as 'people.name' to obtain the name object. However, this also rendered unwanted data when ...

jquery has a strange behavior where the dialog window will cover up the scrollbar when the main

Currently, I am utilizing jQuery dialog to display a dialog window. I have managed to position it at the bottom left corner as desired. However, when the main window contains a scrollbar, the dialog ends up overlapping with the scrollbar instead of alignin ...