Hi, i got a problem with the new calendar component, when i place it inside a second tab it doesnt display correctly, but when i place it in the first tab it shows correctly. Do u guys know what can i do or if im doing something wrong? i test it from a blank page, here u got the screen shoots. Thnks in advance.
Here in the second tab:
Here in the first tab:
Are you having all different calendars in each tab?
That might not be a wise idea as the calendar is pretty heavy components and will be rendered so many times as you have tabs.
It might be better to have just one calendar and on tab click just change the source or it’s settings/apply different filters.
@Max_Saravia
The calendar fails to calculate the size properly as the tab is hidden initially.
We have an Update Size event available for the calendar which will fix this, but the Bootstrap 4 tabs don’t have dynamic events which you can directly use in the UI.
You can use the built in Bootstrap 4 events for the tabs as follows:
<script>
$('a#navTabs1_2_tab').on('shown.bs.tab', function (e) {
dmx.parse('calendar1.updateSize()');
})
</script>
Just replace #navTabs1_2_tab with the ID of your second tab button and calendar1 with your calendar ID, and put this script block at the bottom of your page.
It works perfectly!! thnks @Teodor
