Fullcalendar inaccurately displays events

I recently integrated fullcalendar into my website, but I've come across a strange bug. The event is set up correctly with all the necessary information, yet when the calendar loads, it appears in the wrong position and for the wrong duration. However, if I drag the event or refresh the calendar, everything corrects itself. Even the timestamp in the event title is accurate, it's just the display that's off. Oddly enough, this issue only arises when there is a single event in the calendar; multiple events display correctly.

_render: function(){
    this._super('_render',arguments);
    this.getCalendar().fullCalendar({
        defaultView: 'agendaWeek',
        editable:true,
        height: 600,

    });
    this.getCalendar().fullCalendar( 'renderEvent', {
        title: "purple",
        start: "2018-02-07T11:30:00+01:00",
        end: "2018-02-07T14:15:00+01:00",
        color: "purple",
    }, true);
    // this.renderMeetings();
},

https://i.sstatic.net/qYdgY.png https://i.sstatic.net/vvi7B.png

Has anyone experienced this issue before and know how to resolve it? And have you noticed the misplacement of the grey areas indicating "non-working" hours?

EDIT: Further investigation revealed that the problem persists even when attempting to render a static event.

EDIT2: Despite simplifying the calendar settings, the issue remains unchanged...

EDIT3: Interestingly, testing the code on a blank page yielded the expected results, suggesting some interference from other code on my site... Any suggestions on how to troubleshoot this?

javascriptfullcalendar

Answer №1

There might be a more reliable approach to adding new events to the calendar rather than using the renderEvent method. The documentation warns that this method could lead to events disappearing when paging through.

You may want to consider utilizing the addEventSource method to add your events, as demonstrated below:

displayAppointments: function(){
    this.getCalendar().fullCalendar( 'removeEvents');
    var dates = this.retrieveCalendarDateRange();
    var userId = this.controls.get('userId') || app.user.id;
    var appointments = app.data.createRelatedCollection(app.data.createBean('Users',{id:userId}), 'appointments');
    var start = moment(dates.start.toISOString()).format("Y-MM-DD HH:mm:ss");
    var end = moment(dates.end.toISOString()).format("Y-MM-DD HH:mm:ss");
    appointments.fetch({
        filter: {
            "date_start" : {"$between" : [start,end]},
        },
        success: _.bind(function(){
            this.getCalendar().fullCalendar( 'addEventSource', 
                appointments.map(function(appointment){
                    return {
                        title: appointment.get('name'),
                        start: appointment.get('date_start'),
                        end: appointment.get('date_end'),
                        color: appointment.get('name'),
                        id: appointment.id,
                        location: appointment.location
                    }
                },this));
        },this),
        limit: -1
    });
}

Answer №2

Although I managed to come up with a temporary solution, it's not a permanent fix, so I'm refraining from labeling it as the definitive answer...

After rendering the event, if I invoke 

this.getCalendar().fullCalendar( 'rerenderEvents' )
, the event is displayed in the correct position.

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

Problem encountered when attempting to add elements to an array within a nested

When running this code, everything works correctly except for the array pushing. After checking the console.log(notificationdata), I noticed that notification data gets its values updated correctly. However, when I check console.log(notifications), I see ...

javascriptarraysfor-loopnested-loops

Issue encountered in Next.JS when attempting to validate for the presence of 'window == undefined': Hydration process failed due to inconsistencies between the initial UI and the server-rendered

I encountered an issue that says: Hydration failed because the initial UI does not match what was rendered on the server. My code involves getServerSideProps and includes a check within the page to determine if it is running in the browser (window==&apo ...

javascriptreactjsnext.jsnext-auth

Learn how to pass data as props to child components in Vue3

I'm facing an issue where props are initialized, but they disappear after using .mount. Can anyone advise on the correct way to set up props with dynamically loaded components? import {createApp} from 'vue' blockView = createApp(Block); blo ...

javascriptvue.jsvuejs3

Is there a way to send URL variables to express.js similar to how it's done in PHP?

Currently in the process of converting my PHP website to Express.js. There are numerous scripts on my frontend that generate links in the format page.php?id=10&something=anything. Is there a way in Express.js to capture variables from URLs structured ...

phpjavascriptnode.jsurlexpress

utilizing javascript function in Icefaces applications

I'm facing an issue. Here's the situation: I'm working on a quiz game where I need to implement a timer using JavaScript (jquery.timer.js). I have created a JavaScript file (question.js) with a method called startTimer, which utilizes the jq ...

javascripticefaces

Tips on arranging JSON elements based on the sequence of another JSON

Currently, I am facing a challenge with sorting a list of parks (park_list) based on both distance and area. The code snippet below successfully sorts the list by distance: sortList(index){ return function(a, b){ return (a[index] === b[index] ? 0 : ...

javascriptarraysjsonangularionic3

What is the recommended Vue js lifecycle method for initializing the materialize dropdown menu?

https://i.stack.imgur.com/cjGvh.png Upon examining the materialize documentation, it is evident that implementing this on a basic HTML file is straightforward: simply paste the HTML code into the body and add the JavaScript initializer within a script tag ...

javascripthtmlcssvue.jsmaterialize

Ways to transfer a value to another component in React

Currently, I am working on a project where users can add, edit, or delete movies from a list. While the addition and deletion functionalities are working fine, I am facing challenges with the editing feature. In my Movie component, I have included a text i ...

javascriptnode.jsreactjswebecmascript-6

"Encountering a problem with object transformation in Three.js using

I'm attempting to adjust both the height (Y) and vertical position of a cube simultaneously in order to keep its base on the same X-Z plane after scaling. The visual display seems to be working correctly, but the actual behavior is not meeting my expe ...

javascriptthree.jsdom-events

What is the implication when Typescript indicates that there is no overlap between the types 'a' and 'b'?

let choice = Math.random() < 0.5 ? "a" : "b"; if (choice !== "a") { // ... } else if (choice === "b") { This situation will always be false because the values 'a' and 'b' are completely disti ...

javascripttypescript

Tips for accessing the value and text of an Angular Material mat-select through the use of *ngFor

When using a dropdown menu, I want to retrieve both the value and text of the selected option. View dropdown image Underneath the dropdown menu, I aim to display values in the format of "options: 'value' - 'selected option'". compone ...

javascriptangulartypescriptangular12

403 Error Code - Access Denied when trying to access Cowin Setu APIs

While attempting to create a covid vaccine alert using the Cowin Setu API (India) in nodejs, I encountered a strange issue. Every time I send a get request, I receive a 403 response code from cloudfront stating 'Request Blocked', although it work ...

javascriptnode.jsexpressamazon-cloudfrontrest

Running system commands using javascript/jquery

I have been running NodeJS files in the terminal using node filename.js, but now I am wondering if it is possible to execute this command directly from a JavaScript/jQuery script within an HTML page. If so, how can I achieve this? ...

javascriptjqueryhtml

Navigating through complex immutable entities

I am having trouble working with multidimensional immutable arrays. I would like to make my array immutable, but I'm not sure how to do so. Consider the following data structure: // data { // item { name: someName, todos: [ ...

javascriptreactjsreduximmutabilityimmutable.js

Incorporating additional options onto the menu

I recently designed a menu on https://codepen.io/ettrics/pen/ZYqKGb with 5 unique menu titles. However, I now have the need to add a sixth title to the menu. After attempting to do so by adding "strip6" in my CSS, the menu ended up malfunctioning and looki ...

javascripthtmlcss

Unable to view HTML without an internet connection

I have encountered an issue where my files work fine when uploaded to an online server, but do not work when accessed locally offline. An error message about a cross-origin issue appears. How can I solve this problem? Error message: Security Error: Conte ...

javascripthtml

What could be causing req.params to come back as undefined?

I have reviewed two similar questions here, but none of the suggestions in the comments seem to be resolving my issue. app.get('/:id', function(req,res) { console.log(req.params.id); }); app.get('/:id', function(req, res) { db.que ...

javascriptnode.jsexpress

"Track the upload progress of your file with a visual progress

I have written this code for uploading files using Ajax and PHP, and I am looking to incorporate a progress bar to indicate the percentage of the upload. Here is the code snippet: <script> $("form#data").submit(function(){ var formData = new ...

javascriptajax

Guide on incorporating CSS into a JavaScript function

Currently, I am utilizing a jQuery monthly calendar where each day is represented by a cell. When I click on a cell, I can trigger an alert message. However, I also want to modify the background color of the specific cell that was clicked. Unfortunately, ...

javascriptjquerycss

Encountering crashes when trying to map JSON data onto React components

I have created a menu items application that displays products from a JSON file. When an item is clicked, it shows some modifiers for that item. Everything works well until certain categories or items are clicked, causing the application to crash. To test ...

javascriptarraysjsonreactjsnested-loops