fullcalendar timegridweek don't show events time properly

Question

I use fullcalendar to make a calendar with three view(dayGridMonth,timeGridWeek,listMonth) and they work fine except timeGridWeek that don't show events in proper time file, you can see in this image:

timeGridWeek error

this is the code of calendar:

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

the day and time format that I set is with his format : SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSXXX")

Am I doing something wrong? Do I have to change the date format?

Thanks for all!!

The most likely reason for a visual issue like this is maybe you forgot to include one of fullCalendar's CSS files, or your theme files. Or perhaps you have modified the theme files to do something which doesn't work properly. Or maybe you have other CSS rules in your page which are interfering with fullCalendar's. (Putting the wrong date format in your event data would mean the event doesn't show at all. It wouldn't cause it to appear outside the grid like that, so we can rule that out as a cause.) — ADyson, Feb 12 '20 at 11:16
P.S. as an observation of the rest of your code, it would be more efficient to write `events: "/exams/events"` instead of wrapping the whole calendar code in a $.getJSON call. That way, fullCalendar handles loading the events asynchronously while the rest of the calendar is loading, and also it will go back to the server for more events when the date or view changes (that's assuming that your server only returns events for the start and end dates of the current view, which fullCalendar will attach to the AJAX call automatically.) See https://fullcalendar.io/docs/events-json-feed for details — ADyson, Feb 12 '20 at 11:18
And another observation: Why do you use `calendar.addEventSource('/releases');` immediately after declaring the calendar? There's no need for this. You can specify more than one event source inside the configuration options easily. See https://fullcalendar.io/docs/eventSources for details. — ADyson, Feb 12 '20 at 11:19
And if you are including the locale files correctly, there should be no need to set `buttonText` in order to translate them manually. The locale file will handle the translation automatically. — ADyson, Feb 12 '20 at 11:22
Lastly I don't know what your `changeCalendarView();` function does, but if you are using it to immediately set a new view and/or date in the calendar after it has loaded then, again, there is no need - you can use the `defaultDate` and `defaultView` options in the configuration to control this. See https://fullcalendar.io/docs/defaultView and https://fullcalendar.io/docs/defaultDate — ADyson, Feb 12 '20 at 11:23
Thank you very much, all your comments are usefull and helps me a lot. — javier Cores, Feb 13 '20 at 15:41

score 0 · Answer 1 · answered May 04 '21 at 15:59

I had a similar issue and I solve it changing the dates format following the fullcalendar documentation: https://fullcalendar.io/docs/events-json-feed , in the dates part.

I'm using Django as Framework. I'm getting the response "reservations_api" from an API in Json fromat:

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

this is an example of the Json response data:

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

]

fullcalendar timegridweek don't show events time properly

1 Answers1