FullCalendar Some Events (not all) on Wrong Dates

Question

I am listing dates on FullCalendar and as you can see in the image, some dates show up correctly and some don't. I cannot find any reason that this is the case. The only thing the incorrect events have in common is that they have a start time of 8pm or later.

I selected the August 17th, which has two events. Only one shows correctly on the calendar.

Event data for the two events shown:

[2020-08-21 13:12:32,250] [INFO] [views : log_report] 20776 : 140579017103168 : {'_state': <django.db.models.base.ModelState object at 0x7fdb0e8f5518>, 'id': 140, 'created_date': datetime.datetime(2020, 8, 12, 19, 59, 42, 969082, tzinfo=<UTC>), 'modified_date': datetime.datetime(2020, 8, 17, 2, 33, 1, 101542, tzinfo=<UTC>), 'author_id': 324, 'session': '', 'event_type': 'lfp_event_paid', 'recipient_id': None, 'parent_hub_id': '3f42ec9e-8f42-4d0a-94ca-c4a6e98b01d6', 'event_title': 'Rise of the Runelords, a Pathfinder Adventure Path', 'unique_id': UUID('27268185-f906-49b0-b760-704bc2f9e3ef'), 'start_time': datetime.datetime(2020, 8, 17, 0, 15, tzinfo=<UTC>), 'end_time': datetime.datetime(2020, 8, 17, 3, 15, tzinfo=<UTC>), 'budget_amount': 10, 'budget_details': 'No Budget Details', 'min_players': 2, 'max_players': 5, 'lfg_state': 'LFP', 'game_played_id': 27, 'other_game': '', 'session_type': 'One-Shot', 'location': 'Roll20 and Discord', 'location_link': 'https://app.roll20.net/campaigns/details/7386210/rise-of-the-runelords-anniversary-edition', 'req_status': 'inactive', 'paid_success': False, 'is_recurring': False, 'is_closed': False, 'is_full': False, 'is_private': False, 'is_paid': False, 'is_deleted': False}
[2020-08-21 13:12:32,249] [INFO] [views : log_report] 20776 : 140579017103168 : {'_state': <django.db.models.base.ModelState object at 0x7fdb0e8f5358>, 'id': 145, 'created_date': datetime.datetime(2020, 8, 14, 0, 51, 42, 543054, tzinfo=<UTC>), 'modified_date': datetime.datetime(2020, 8, 17, 23, 2, 51, 389649, tzinfo=<UTC>), 'author_id': 324, 'session': '', 'event_type': 'lfp_event_free', 'recipient_id': None, 'parent_hub_id': 'a038e240-6a86-47b3-aa6c-5409edbb4362', 'event_title': 'Monday Night Age of Worms', 'unique_id': UUID('c4edb4c8-6fcd-4bb7-9c17-2be96c15f0bf'), 'start_time': datetime.datetime(2020, 8, 17, 23, 0, tzinfo=<UTC>), 'end_time': datetime.datetime(2020, 8, 18, 2, 0, tzinfo=<UTC>), 'budget_amount': 0, 'budget_details': 'No Budget Details', 'min_players': 3, 'max_players': 4, 'lfg_state': 'LFP', 'game_played_id': 1, 'other_game': '', 'session_type': 'One-Shot', 'location': 'Foundry', 'location_link': 'http://71.179.132.53:30000', 'req_status': 'inactive', 'paid_success': False, 'is_recurring': False, 'is_closed': False, 'is_full': False, 'is_private': False, 'is_paid': False, 'is_deleted': False}

Here is my event code:

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" %}',

    eventRender: function(info) {
  $(info.el).tooltip({ 
    title: info.event.title,
    placement: "bottom",
    trigger: "hover",
    container: "body"
  });
},
    header: {
      left: 'title',
      center: '',
      right: 'prev, next'
    },

    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 %}",
        details: "test",
        {%if event.budget_amount > 0 and event.lfg_state == 'LFGM' %}color : "#ff8f07"{%elif event.budget_amount <= 0 and event.lfg_state == 'LFGM' %}color : "#d943c5"{%elif event.budget_amount > 0 and event.lfg_state == 'LFP'%}color : "#1ad914"{%else%}color:"#38b3ff"{%endif%},
      },
      {% endfor %}
    ],
  });

  calendar.render();
});

Answer 1

It's important to realise that 2020-08-17 00:15 in UTC is 2020-08-16 20:15 in EST/EDT - because EST is 4 hours behind UTC - so it's actually 8:15pm the previous day. See https://savvytime.com/converter/utc-to-est/12-15am to convert between the timezones easily.

That's why Rise of the Runelords shows on the 16th in fullCalendar. So the calendar is correct and the cards on the right-hand-side are wrong. (And your observation is about events after 8pm is entirely correct - but now you know why!)

The relevant code isn't shown in the question, but you mentioned that upon investigation you discovered that the date shown in the cards was being loaded as a string without doing a timezone conversion (whereas the times were converted correctly, as was the whole datetime object passed to fullCalendar), and that once you sorted this out the date showed in the card correctly. A similar fix will also need to be applied to the code (also not visible) which decides which cards to display when a date is clicked in the calendar.