We are using Fullcalendar V5 in Asp.net Core.
We are also using Kendo UI. Our fullcalendar is inside of a "kendo-tabstrip" -> "tabstrip-item" control, if that matters.
Our fullcalendar events are fetched from a controller using Axios(), then the callback renders the events etc...
The problem we have is that when the page loads the first time, the calendar renders in a 1x1mm area in the top left of the calendar div. Instead of full screen as it should.
If I click the previous month button or have a button that does a "calendar.render()", then the calendar renders correctly in a full screen and it renders correctly when going to next or previous months.
Basically, the calendar renders fine after I do a manual "calendar.render()".
What causes this? How can I fix or work around?
I have included my fullcalendar code and an image of how my fullcalendar renders when the page loads.
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
height: 'auto',
expandRows: true,
headerToolbar: {
right: "today",
center: "title",
left: "prevYear,prev,next,nextYear customButton1,customButton2"
},
customButtons: {
customButton1: {
text: 'customButton1'
},
customButton2: {
text: 'customButton2',
click: function() {
calendar.render();
}
}
},
initialView: 'dayGridMonth',
events: function (info, successCallback, failureCallback) {
var urlString = myapp.url.build("GetFCEvents", "MyController", id)
axios.get(urlString + "?Id=" + Id)
.then(function (response) {
successCallback(response.data);
})
},
eventContent: function (info) {
let idname = `chart-${info.event.id}`
const chartTag = `<div id="${idname}"></div>`;
return {html: chartTag};
},
eventDidMount: function(info) {
let idname = `chart-${info.event.id}`
const chartTag = `<div id="${idname}"></div>`;
generateMyChart(idname);
}
});
calendar.render();
});
......other functions......
</script>
