Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello,
I'm trying for hours to understand why my FullCalendar is displaying only when I resize the browser. When first loading the page, only the header of FullCalendar is displaying, but all the content is not displayed.
I work with Laravel, Vue3, InertiaJS.
Here is my code.
<full-calendar :options="calendarOptions"></full-calendar>
...
import '@fullcalendar/core/vdom'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'
import interactionPlugin from '@fullcalendar/interaction'
...
const calendarOptions = reactive({
locale: 'fr',
plugins: [ dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin ],
initialView: 'timeGridWeek',
headerToolbar: {
start: 'today prev,next',
center: 'title',
end: 'dayGridMonth,timeGridWeek,listWeek',
},
buttonText: {
today: 'Aujourdhui',
month: 'Mois',
week: 'Semaine',
day: 'Jour',
list: 'Liste',
},
weekNumbers: true,
weekText: 'S',
weekNumberCalculation: 'ISO',
slotMinTime: '08:00:00',
slotMaxTime: '20:00:01',
editable: true,
events: props.events,
eventResize: function(info) {
},
eventDrop: function(info) {
},
eventClick: function(info) {
}
})
If you have any idea why I need to resize the browser in order to let the calendar display, it would be great.
Thanks a lot.
Vincent
I have new information.
I have added explicit height property set to auto.
And the issue is now only when I set the initial view to dayGridMonth or timeGridWeek, but not with listWeek.
The issue is that all data is displayed to the left in a very small width. And as soon as I resize the browser, the rerender of the calendar resizes the calendar width and it displays correctly.
There is no width property to force the initial width.
How can I solve this ?
Try to initialize it after the component is mounted
<full-calendar v-if="isMounted" :options="calendarOptions"></full-calendar>
...
const isMounted = ref(false)
onMounted(() => {
isMounted.value = true;
})
@MohamedTammam No it doesn't work. I just tested something else and it's ok, it displays as expected.
onBeforeMount(() => {
setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 500)
})
@vincent15000 Why you're dispatching a resize event?
The problem mostly because the component is being initialized before the parent gets the right width.
Instead of dispatching a an event on window, delay the initialization
onMounted(() => {
setTimeout(() => isMounted.value = true;,500)
})
Will that work?
@MohamedTammam No idea ;) ... yes your last suggestion works ... including with onBeforeMount.
@MohamedTammam I have now another similar problem (quite different, but similar to this one).
I have created a new post because (I had already closed this one), the same problem occurs now when I refresh the events, but probably binded to the behavior of the Element-Plus tabs.
Please or to participate in this conversation.