FullCalendar 一些事件（不是全部）在错误的日期

Question

我在 FullCalendar 上列出日期，正如您在图片中看到的那样，有些日期显示正确，有些则不正确。我找不到任何理由说明情况如此。错误事件的唯一共同点是它们的开始时间为晚上 8 点或更晚。

我选的是8月17日，有两个活动。只有一个正确显示在日历上。

显示的两个事件的事件数据：

[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}

这是我的活动代码：

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

重要的是要意识到 UTC 中的 2020-08-17 00:15 是 EST/EDT 中的 2020-08-16 20:15 - 因为 EST 比 UTC 晚 4 小时 - 所以它实际上是 8:15pm 前一天。请参阅 https://savvytime.com/converter/utc-to-est/12-15am 以轻松在时区之间进行转换。

这就是 Rise of the Runelords 在 fullCalendar 中显示在 16 日的原因。所以日历是正确的，right-hand-side 上的卡片是错误的。（你的观察是关于晚上 8 点之后的事件是完全正确的 - 但现在你知道为什么了！）

问题中没有显示相关代码，但您提到，经过调查，您发现卡片中显示的日期是作为字符串加载的，没有进行时区转换（而时间转换正确，就像传递给 fullCalendar 的整个 datetime 对象一样），一旦你把它整理出来，卡片中显示的日期就会正确。还需要对代码（也是不可见的）应用类似的修复，该代码决定在日历中单击日期时显示哪些卡片。

FullCalendar 一些事件（不是全部）在错误的日期

FullCalendar Some Events (not all) on Wrong Dates

javascript

django

fullcalendar

fullcalendar-4