Level 63
I just noticed that the problem exists also when I load the page directly pointing another tab.
When I click on the tab to show it, the calendar isn't displayed correctly : very small width.
Oct 10, 2022
3
Level 63
FullCalendar doesn't resize correctly after events refresh
Hello,
I have a very similar problem to the one I have posted yesterday.
As it is related, but not really the same problem, I write this new post and I put a link to the other post.
https://laracasts.com/discuss/channels/javascript/fullcalendar-displays-only-after-resize-event
Now it works fine when I load the page, FullCalendar displays with 100% width of the container.
But the new problem is that when I update the events, FullCalendar refreshes and once again it displays with a very small width. To be said that I'm using Element-Plus tabs and the problem occurs only when I add, update or remove an event from the databale on another tab than this one where the calendar is (no problem when I add, update or remove an event from the calendar). And as soon as I come back to the calendar tab, it displays with very small width inside the calendar container.
I have it partially solved by setting widths to some CSS classes.
.fc-col-header, .fc-timegrid-body { width: 100% !important; }
.fc-timegrid-body { table { width: 100% !important; } }
.fc-daygrid-body,
.fc-timegrid-body,
.fc-timegrid-cols table,
.fc-timegrid table,
.fc-timegrid-event-harness,
.fc-timegrid-col-events {
visibility: visible !important;
width: 100% !important;
height: auto !important;
}
But there is probably a better way to solve this problem. According to me, normally I don't have to set visibility, width, height, ... to have the calendar that displays.
Do you have any idea what I could check or what I could try to solve this ?
Thanks a lot.
Vincent
Level 63
I have tried to put the calendar outside the tab content and I have no width problem.
So I have to understand what happens when the calendar is wrapped inside an Element-Plus tab content.
The problem occurs only when the calendar refreshes as it is not visible.
Level 63
I have definitely found the solution.
When I click on the tab to come back to the calendar view, I force the calendar to adjust his size.
function updateSize(delay) {
setTimeout(() => calendar.value.getApi().updateSize(), delay)
}
Same logic for the first loading of the page.
Please or to participate in this conversation.