全日历时间网格周无法正确显示事件时间

Question

我使用 fullcalendar 制作一个具有三个视图（dayGridMonth、timeGridWeek、listMonth）的日历，它们工作正常，除了 timeGridWeek 不显示正确时间文件中的事件，您可以在这张图片中看到：

这是日历的代码：

document.addEventListener('DOMContentLoaded', function() {          
            var calendarDiv = document.getElementById('calendar');
            $.getJSON("/exams/events", function (data) {
                var calendar = new FullCalendar.Calendar(calendarDiv, {
                    buttonText: {
                        today:'Hoy',
                        dayGridMonth:'Mes',
                        dayGridWeek: 'Semana',
                        listMonth: 'Lista'                                    
                    },
                    firstDay: 1,
                    bootstrapFontAwesome:{
                        prev: 'fa-angle-left',
                        next: 'fa-angle-right'
                    },
                    themeSystem : 'bootstrap',              
                    locales: 'es',
                    plugins: [ 'dayGrid', 'timeGrid', 'list', 'bootstrap'],
                    minTime: '08:00:00',
                    maxTime: '21:00:00',
                    slotDuration: '00:30:01',

                    nowIndicator: true,
                    displayEventTime: true,
                    timeFormat: 'H(:mm)',
                    slotLabelFormat: {
                        hour: 'numeric',
                        minute: '2-digit',
                        omitZeroMinute: false,
                        hour12: true,
                        meridiem: false,//no funciona
                        omitCommas: true
                        },
                    defaultView: 'dayGridMonth',
                    header: {
                        left: 'dayGridMonth,timeGridWeek,listMonth',
                        center: 'title',
                        right: 'today prev next'
                    },
                    allDayText: '',
                    height: 'auto',
                    editable: true,
                    events: data
                });
                calendar.addEventSource('/releases');
                calendar.render();
                changeCalendarView();               
            });         
        });

我设置的日期和时间格式是他的格式：

SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSXXX")

我做错了什么吗？ 我需要更改日期格式吗？

谢谢大家！！

Answer 1

我遇到了类似的问题，我按照完整日历文档更改了日期格式来解决它：https://fullcalendar.io/docs/events-json-feed，在dates部分。

我使用 Django 作为框架。我从 Json fromat 中的 API 获取响应“reservations_api”：

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var calendarUI = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarUI, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'dayGridMonth,timeGridWeek,listMonth',
                center: 'title',
                right: 'today prev next'
            },
            events: [
                {% for reservation in reservations_api %}
                    {
                title: 'helloooooo ',
                start: '{{ reservation.start_date }}',
                end: '{{ reservation.end_date  }}',
            },

            {% endfor %}
            ]

        });

    calendar.render();
    calendar.setOption('locale', 'fr')
    });


</script>

这是 Json 响应数据的示例：

[
{
    "id": 0,
    "start_date": "2021-05-05T09:00:00",
    "end_date": "2021-05-07T18:00:00",
    "enterprise": {
        "name": "Enterprise1",
        "id": 1
    },
    "user": {
        "id": 0,
        "name": "user0"
    }
},
{
    "id": 1,
    "start_date": "2021-05-06T09:00:00",
    "end_date": "2021-05-07T18:00:00",
    "enterprise": {
        "name": "Enterprise1",
        "id": 1
    },
    "user": {
        "id": 0,
        "name": "user0"
    }
}

]

Answer 2

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var calendarUI = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarUI, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'dayGridMonth,timeGridWeek,listMonth',
                center: 'title',
                right: 'today prev next'
            },
            events: [
                {% for reservation in reservations_api %}
                    {
                title: 'helloooooo ',
                start: '{{ reservation.start_date }}',
                end: '{{ reservation.end_date  }}',
            },

            {% endfor %}
            ]

        });

    calendar.render();
    calendar.setOption('locale', 'fr')
    });


</script>