When i resize my window it showing properly, but on refresh of my page issue is come again and I click again on button to see proper calendar.
document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('leave_calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', height: 650, headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }, navLinks: true, nowIndicator: true, selectable: true, dayMaxEvents: true, events: [ {title: 'Frank', start: '2021-09-17', end: '2021-09-21', }, ] }); calendar.render() });
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.9.0/main.min.css"> <div id='leave_calendar' class="leave-calendar"></div>
Advertisement
Answer
I moved the calendar to another empty page and simply include it in the PHP file its working properly, so there is only a render issue. Fullcalendar required dedicated page to render properly.