I use fullcalendar to display events but I have problem. How to display time in left in dayGridWeek?

code js :

var displayDisponibiltyBabySitter = function(){
            var calendarEl = document.getElementById('disponiblity');
            if(calendarEl){
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    defaultView: 'dayGridWeek' ,
                    validRange: function(nowDate){
                        return {start: nowDate}
                    },
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridWeek,timeGridDay'
                    },
                    locale: _mpop.current_lang,
                    timeZone: 'Europe/Paris',
                    eventBackgroundColor : "#444",
                    eventTextColor: '#EEE',
                    slotDuration: '00:60:00',
                    slotLabelFormat: [
                        {
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: false
                        }
                    ],
                    views: {
                        dayGridWeek: {
                            eventTimeFormat: {
                                hour: 'numeric',
                                minute: '2-digit',
                                omitZeroMinute: true,
                                meridiem: 'narrow'
                            }
                        }
                    },
                    events: Routing.generate('front.babysitter.disponibilities',{'id': $("#dispo-babysitter").data("id")}),
                    plugins: [ 'dayGrid', 'timeGrid', 'list' ]
                });
                calendar.render();
            }

        };

thanks in advance

I have this result:

but how to get this result:

I use fullcalendar to display events but I have problem. How to display time in left in dayGridWeek?

code js :

var displayDisponibiltyBabySitter = function(){
            var calendarEl = document.getElementById('disponiblity');
            if(calendarEl){
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    defaultView: 'dayGridWeek' ,
                    validRange: function(nowDate){
                        return {start: nowDate}
                    },
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridWeek,timeGridDay'
                    },
                    locale: _mpop.current_lang,
                    timeZone: 'Europe/Paris',
                    eventBackgroundColor : "#444",
                    eventTextColor: '#EEE',
                    slotDuration: '00:60:00',
                    slotLabelFormat: [
                        {
                            hour: '2-digit',
                            minute: '2-digit',
                            hour12: false
                        }
                    ],
                    views: {
                        dayGridWeek: {
                            eventTimeFormat: {
                                hour: 'numeric',
                                minute: '2-digit',
                                omitZeroMinute: true,
                                meridiem: 'narrow'
                            }
                        }
                    },
                    events: Routing.generate('front.babysitter.disponibilities',{'id': $("#dispo-babysitter").data("id")}),
                    plugins: [ 'dayGrid', 'timeGrid', 'list' ]
                });
                calendar.render();
            }

        };

thanks in advance

I have this result:

but how to get this result:

• javascript
• fullcalendar
• fullcalendar-4

Share Improve this question Follow edited May 29, 2019 at 13:47 ADyson 62.2k1616 gold badges7878 silver badges9292 bronze badges asked May 29, 2019 at 12:54 dev109dev109 2111 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You've got your defaultView set as 'dayGridWeek'

set it to:

defaultView: 'timeGridWeek'

and you should be fine...