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();
},

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

I can't seem to figure out why I keep encountering a runtime error whenever I attempt to create a basic route in the latest version of nextjs, version 13.5

Encountering an error while attempting to create a basic route in app/dashboard/page.tsx. The error message suggests that the contents are not a valid react component, even though they conform to valid react component syntax. Unhandled Runtime Error Erro ...

javascriptreactjsnext.jsruntime-errorapp-router

Is it possible to enable sorting for every column in the b-table component?

After reviewing the information on sorting per column in the bootstrap-vue documentation, I am curious if it is possible to enable sorting for the entire table. ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

What is the best way to utilize AJAX to upload several images in PHP?

I have a UI that looks like this: I am trying to upload multiple videos using ajax in PHP. I attempted to use FormData() in jQuery for this purpose. However, it seems to only upload one image and not more than that. Here is my Form file : <form enct ...

javascriptjqueryajaxhtml

"Vue.js integrates seamlessly with Tracking.js for advanced tracking

Has anyone successfully integrated the tracking.js library into a vueJS application? I followed these steps to install the package: npm install --save tracking After that, I defined the library in my main.js file like this: import tracking from 't ...

javascriptvue.jsnpmtracking.js

AngularJS Banner: Displaying Current Calendar Week and Increasing by 10 Days

I'm brand new to Angular and currently encountering some issues. Here's what I'm trying to create: I need to display the current Date: yyyy-MM-ss (Functional) I want to show the current Calendar Week: yyyy-Www (Not Working) When a butto ...

javascriptangularjsdate

The AJAX call fails to refresh the secondary table in CodeIgniter

I have a situation where I need to display data from two tables - car producer and car model, pulled from a database. My goal is to filter the second table to only show cars from a specific producer when that producer is clicked in the first table. I attem ...

javascriptphpajaxcodeigniter

Why is the lifecycle callback not being triggered?

I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...

javascripttypescriptvue.js

Responses were buried beneath the inquiries on the frequently asked questions page

My FAQs page is in pure HTML format. The questions are styled with the css class .pageSubtitle, and the answers have two classes: .p1 and .p2. Here's an example: <p class="pageSubtitle">Which Award should I apply for?</p> <p class="p1" ...

javascriptjqueryhtmlcss

Attempting to include a select element via transclusion

Looking to develop a custom directive named select that will replace a select element with a customized dropdown interface. For a clear example, check out this jsfiddle where the concept is demonstrated. Let's consider the below select element: < ...

javascriptangularjsangularjs-directive

I am experiencing issues with my Vue.js application when trying to send an HTTP POST request

I am encountering an issue in my Vuejs application while trying to send an HTTP POST request to my server. The error message that keeps popping up in the console is: TypeError: _api__WEBPACK_IMPORTED_MODULE_0__.default.post is not a function at Object ...

javascriptvue.jspostaxios

Avoiding the occurrence of moiré patterns when using pixi.js

My goal is to create a zoomable canvas with rectangles arranged in a grid using pixi.js. Despite everything working smoothly, I'm facing heavy moire effects due to the grid. My understanding of pixi.js and webgl is limited, but I suspect that the anti ...

javascripthtml5-canvaspixi.js

Creating objects based on interfaces

After looking at this straightforward code: interface int1 { aa: string, bb: number, } const obj1:int1 = {} //#1 function fun(param_obj:int1) { //#2 } I am curious as to why the compiler throws an error: Type '{}' is missing the fol ...

javascripttypescript

React splits the page and interrupts the scroll event listener

For some reason, my webpage has been split by the React.js library. When attempting to scroll down while hovering over the top navigation menu, scrolling becomes impossible. However, scrolling works fine when done on any other part of the screen. I' ...

javascripthtmlreactjs

In order to manage this file type properly, you might require a suitable loader, such as an arrow function within a React

Currently, I am in the process of creating an npm package and have encountered a difficulty with the following code: You may need an appropriate loader to handle this file type. | } | | holenNummerInSchnur = Schnur => { | if (this.beurte ...

javascriptreactjsnpmpackage

How to modify the content type in an Angular.js $http.delete request

When making a $http.delete request in my Angular app, I include a config object using the following approach: return $http.delete('projects/' + projectID + '/activityTypes', {data: [{id: 2}]}) This method attaches the values from my d ...

javascriptajaxangularjs

Discovering the droppable container that a draggable element is positioned within

Currently, I am utilizing jQuery UI for drag and drop functionality. My main goal is to determine which droppable area a draggable element has been placed in. Can anyone offer assistance? Below is the code I am working with: $(".draggable").draggable({ ...

javascriptjqueryjquery-ui

Clicking to close tabs

I am currently working on implementing a tab functionality on my website and I want these tabs to be responsive. Here is the code snippet I have been using: function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.ge ...

javascriptjqueryhtmlcss

Utilizing web components in React by solely relying on a CDN for integration

I have a client who has provided us with a vast library of UI elements that they want incorporated into our project. These elements are stored in javascript and css files on a CDN, and unfortunately I do not have access to the source code. All I have at my ...

javascripthtmlreactjstypescriptweb-component

Troubleshooting Async Issues in Node.js

I am encountering an issue with my node.js app structure, which is as follows: async.forever( function(callback) { async.series([ function(callback) { SomeFunction1(function(err, results) { if (err) callback(err); ...

javascriptnode.jsasync.js

The observable did not trigger the next() callback

I'm currently working on incorporating a global loading indicator that can be utilized throughout the entire application. I have created an injectable service with show and hide functions: import { Injectable } from '@angular/core'; import ...

javascriptangulartypescriptrxjsngrx