Incorrectly Scheduled Events in FullCalendar

While using FullCalendar to display dates, I noticed a discrepancy where some dates appear correctly while others do not. The issue seems to be related to events with a start time of 8pm or later.

For example, on August 17th, there are two events scheduled, but only one is displayed correctly on the calendar.

Here is the event data for the two events:

[Event 1]
- Title: Rise of the Runelords, a Pathfinder Adventure Path
- Start Time: August 17th, 00:15
- End Time: August 17th, 03:15
- Location: Roll20 and Discord
- Budget Amount: $10
- More details...
[Event 2]
- Title: Monday Night Age of Worms
- Start Time: August 17th, 23:00
- End Time: August 18th, 02:00
- Location: Foundry
- Budget Amount: $0
- More details...

Below is the event code I am using to render these events on the calendar:

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
    height: 560,
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    defaultView: 'dayGridMonth',
    defaultDate: '{% now "Y-m-d" %}',
    // Event Render Function...
    // Header Configuration...
    events: [
      {% for event in connected_events %}
      {
        title: "{{event.event_title}}",
        start: "{{event.start_time|date:'c'}}",
        end: "{{event.end_time|date:'c'}}",
        url: "{% url 'events:event-detail' event.unique_id %}",
        // Color coding based on conditions...
      },
      {% endfor %}
    ],
  });

  calendar.render();
});

https://i.sstatic.net/xooJI.png

Answer №1

It's crucial to understand that the timestamp 2020-08-17 00:15 in Coordinated Universal Time (UTC) actually translates to 2020-08-16 20:15 in Eastern Standard Time (EST) or Eastern Daylight Time (EDT) because EST is 4 hours behind UTC. This means it's actually 8:15pm on the previous day in the Eastern time zone. For easy timezone conversions, you can use a tool like .

This is why the event "Rise of the Runelords" appears on the 16th in fullCalendar. The calendar itself is correct, but the information displayed on the right-hand side cards is incorrect. (Your observation about events after 8pm being correct now makes sense - now that you understand the time difference!)

Although the question does not provide the relevant code, you mentioned that after investigating, you realized that the date displayed on the cards was being loaded as a string without undergoing a timezone conversion. However, the times were converted correctly, along with the entire datetime object passed to fullCalendar. Once you address this issue, the date on the card should display accurately. A similar solution will need to be implemented for the code (which is not visible) responsible for determining which cards to show when a date is clicked on the calendar.

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

Is there an issue with the jQuery ajax function when it comes to sending the RegistrationId to our server?

Beginning to work with the pushNotification service for my Android app, I successfully received a registration ID from the GCM server and attempted to send this ID to our server using a jQuery AJAX function. My intention was to send this ID after the user ...

Output information to the specified divID using Response.Write

Currently, I have knowledge of javascript and I am currently expanding my skills in ASP.NET C#. My goal is to achieve the following task using javascript: document.getElementById('divID-1').innerHTML= '<p>Wrong Password< ...

Prevent the <a> tag href attribute from functioning with jQuery

I came across this code snippet: <script type="text/javascript"> $(document).ready(function() { $("#thang").load("http://www.yahoo.com"); $(".SmoothLink").click( function() { $("#thang").fadeOut(); $("#thang").load( ...

SinonJS - Retrieving Property Value Prior to Stub Invocation

Currently leveraging sinon.js for stubbing functionalities where it is feasible to stub and spy on methods but not properties based on my observations. I'm interested in knowing if there's a way to verify whether state.searchText gets assigned t ...

Displaying a JQuery loading image on a webpage for a designated amount of time

I am trying to display an image in a div once a price calculation function is called. The image should cover the whole page. Can someone assist me with this? <div class="Progress_Layout" style="display:none"> <div class="Progress_Content"> ...

Access the value of a JavaScript global variable using Selenium in Python

I need to access a value from a global variable in JavaScript: clearInterval(countdownTimerTHx); var saniye_thx = 298 // <--- Variable here function secondPassedTHx() { https://i.sstatic.net/odIbh.png My goal is to retrieve the value " ...

Executing a function from another module (File) within a React JS application

I am currently utilizing the Material UI v1.0.0-beta.33 in my project, which includes an App Bar component. import React from "react"; import PropTypes from "prop-types"; import { withStyles } from "material-ui/styles"; import AppBar from "material-ui/App ...

converting JSON values into an array of strings in JavaScript

Greetings to all! I am excited to be a part of this community as I embark on my programming journey. I haven't been able to find any information on this particular topic, so I've taken the initiative to start a new discussion. If anything seems o ...

Running on Node.js, the Promise is activated, yet there remains an issue with the function

I've encountered a strange issue that I can't seem to diagnose. It's showing a TypeError: My code is returning 'function is undefined', which causes the API call to fail. But oddly enough, when I check the logs and breakpoints, it ...

What is the best way to determine if a variable exists within an array in Angular and JavaScript?

Currently, I am working on a project using Angular 6 with Laravel. In one part of my code, I am fetching an array in the frontend and need to check if a certain variable is present within that array. In PHP, you can easily achieve this using the in_array f ...

What is the best way to conduct synchronous testing of animations in AngularJS version 1.3.15?

Encountering a migration issue with angular-animate.js while transitioning from version 1.2 to 1.3. Here is the animation code snippet: 'use strict'; angular.module('cookbook', ['ngAnimate']) .animation('.slide-down& ...

What is the method for adjusting the size of text while rendering on a canvas?

When it comes to scaling text with CSS transform scale, for instance: transform: scale(2, 4); fontSize: 20px // Is including fontSize necessary? I also have the task of displaying the same text on a canvas element. function draw() { const ctx = document ...

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

store user settings in local storage

After writing some code with a link that toggles text visibility upon click, I now want to incorporate saving this state in web storage so that it persists upon page reload. As a beginner in JavaScript and HTML, this task has proven challenging for me. Th ...

Sharing environment variables in gulpfile with other JavaScript files outside NODE_ENV

Is it possible to pass a variable other than NODE_ENV from the gulpfile.js to another javascript file? gulpfile.js // Not related to NODE_ENV! let isDevelopment = true; somejsfile.js /* I need to access "isDevelopment" from the gulpfile.js... For the ...

The issue persists with the ajax.reload() function in DataTables

It's been driving me crazy that my datatables table won't refresh, despite using ajax.reload. I've spent weeks on this code but still can't get it to work. DataTablesDraw = (selector, order, pages, file, sort, column, template, data_se ...

What is the correct way to reuse sub-dependencies using NPM?

This inquiry primarily centers around the usage of react-admin, as indicated by the tags, but could also be applicable in other scenarios. In our case, we are utilizing react-admin which relies on @material-ui/core. This grants us the ability to incorpora ...

What is the method for configuring Express to serve static files from a parent directory?

If I have a nodejs express application with the following folder structure: -app - frontend - assets - images - scripts - styles - ... - pages - backend - server.js How can I serve the static files in the assets fold ...

Tips for saving an array from the server into a script variable

I'm currently working with the express js framework along with Handlebarsjs as the templating engine. My aim is to pass an array from the router to the view, and then store this array within a script tag. //users is an array res.render('chatRoom ...

Is there a way for me to come back after all child http requests have finished within a parent http request?

I am currently utilizing an API that provides detailed information on kills in a game. The initial endpoint returns an ID for the kill event, followed by a second endpoint to retrieve the names of both the killer and the killed player. Due to the structur ...