I have a fullcalendar interface for a Timelog tool made with flask. My problem is that the 2nd tab containing the fullcalendar isn't rendered. when its render with thing i tried he shrink itself at the 1st click on an event and "unshrinks" when the window is resized. Its pretty wierd
Ive read many question about this issue but noone of them provided a working solution. I use materialize tabs. Appart from setting the fullcalendar as active tab i am out of ideas
<div class="row" id="tab_content">
<div class="col s12">
<ul class="tabs">
<li class="tab col s6"><a href="#tasks" name="tab1">Tasks View</a></li>
<li class="tab col s6"><a href="#calendar" name="tab2" class="active">Calendar View</a></li>
</ul>
<h4 id='name_human'>{{ name }}</h4>
<button id="delete_event" type="" class="btn btn-secondary">delete Timelog</button>
<button id="add_event" type="" class="btn btn-secondary">Add Timelog</button>
<input type="hidden" name="select_date" id="select_date" value="">
</div>
</div>
<div id="tasks" class="col s12">
<div class="table-responsive">
</div>
</div>
<div id="calendar" class="col s12">
<div id='calendar'>
</div>
</div>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid','moment', "interaction"],
weekends: false,
selectable: true,
droppable: true,
displayEventTime: false,
editable: true,
themeSystem : 'standart',
defaultView: 'dayGridMonth',
handleWindowResize : true,
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
select: function(date, jsEvent, view) {
$("#add_event").css("visibility","visible");
$("#select_date").val(date.startStr);
today = date.start;
tomorrow = new Date(today);
tomorrow.setDate(today.getDate()+1)
if(date.end.getTime() != tomorrow.getTime()){
calendar.unselect() ;
}
},
unselect: function(jsEvent, view) {
$("#add_event").css("visibility","hidden");
},
eventDrop: function(info) {
if (!confirm("Are you sure about this change?")) {
info.revert();
}else{
var date_millis = Date.parse(info.event.start);
var new_date = new Date(date_millis)
var year = new_date.getFullYear()
var month = parseInt(new_date.getMonth())+1
var day = new_date.getDate()
string_date = year + "-" + parseInt(month) +"-"+day;
Update_timelog(info.event.id ,string_date)
}
},
eventClick: function(info) {
$("#delete_event").css("visibility","visible");
$('body>.tooltip').remove();
var listEvent = calendar.getEvents()
for (var i = 0; listEvent.length>i; i++){
listEvent[i].setProp('borderColor','');
}
info.event.setProp('borderColor','red');
},
events: {{hour}}
});
calendar.render();
I've tried the following (partially working, rendering the event but all the functionnalities (select drag and drop) are gone the the calendar is shrinked
if ($('.fc-day-grid-container').height() == 0) {
$('.fc-widget-content').height("100%")
$('.fc-day-grid-container').height("100%")
$('.fc-week').height("120px")
}
$('.tabs li').click(function(e){
e.preventDefault();
var baseURL = window.location.origin;
var url = $(this).children().first().attr('href');
window.location.href = baseURL+"/main" + url;
if (url == "#calendar") {
//calendar.render();
}
})
photo link of what it looks https://ibb.co/vL2H0ds https://ibb.co/Rgd9SDz
As suggested by ADyson, i have my update url tab listener fireing updateSize() which was a solution to my issue. I wish i could fire it after the tab is shown rather than an on click but for now i'll go for a double click on the tab, it works decently.
here is the code i used for this, if you have any improvement i'll gladly take it.
$('.tabs li').click(function(e){
var baseURL = window.location.origin;
var url = $(this).children().first().attr('href');
window.location.href = baseURL+"/main" + url;
if(url == "#calendar"){
setTimeout(function(){calendar.updateSize()},150)
}
})