销毁引导程序选项卡上的全日历,然后再初始化新日历 [英] Destroy fullcalendar on bootstrap tabs click before new calendar is initialized
问题描述
我在引导程序中有两个选项卡. Fullcalendar位于第二个选项卡中,默认情况下处于隐藏状态.因此,我使用onclick事件来触发calendar_view_session
函数.但是,每次我访问该标签时,新日历都会附加在相同的标签中.它实际上是在复制日历.
I have two tabs from bootstrap. Fullcalendar is inside the second tab which is by default hidden. So I use the onclick event to trigger the calendar_view_session
function. But every time I visit that tab the new calendar appends in the same tabs. Its actually duplicating the calendar.
calendar_view_session: function(){
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' , 'momentTimezone' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultDate: '2019-04-12',
navLinks: true, // can click day/week names to navigate views
editable: false,
eventLimit: true, // allow "more" link when too many events
events: function(info, successCallback,failureCallback) {
console.log(info);
var date1 = new Date(info.start.valueOf());
var date2 = new Date(info.end.valueOf());
var callData = {
from_date:moment.tz(date1, timeZone).format('YYYY-MM-DD'),
to_date: moment.tz(date2, timeZone).format('YYYY-MM-DD')
}
sessionCalendar = [];
console.log(callData);
$.ajax({
url:app.createApiPath(apiController_data,apiAction_data),
method:"POST",
dataType: "json",
data: {
callData: JSON.parse(JSON.stringify(callData)),
api_version: 1,
deviceType: 'web'
},
success: function(responseData){
console.log({responseData})
successCallback(app.calendarParse(responseData.data.results));
}
})
},
//sessionCalendar
});
calendar.render();
},
我的HTML代码
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#list_view_session" aria-controls="list_view_session" role="tab" data-toggle="tab">List View</a></li>
<li role="presentation"><a href="#calendar_view_session" id="calendar_view_session_id" onclick="app.calendar_view_session()" aria-controls="calendar_view_session" role="tab" data-toggle="tab">Calendar View</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="list_view_session">
<div class="session_list">
<div class="loaderapi hide">
<i class="fa fa-spinner fa-spin fa-4x" aria-hidden="true"></i>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="calendar_view_session">
<div id='calendar'></div>
</div>
</div>
</div>
这是我的职责.但是,我先使用$("#calendar").destroy()
函数销毁日历.它显示错误信息
This is my function. However, I use $("#calendar").destroy()
function to destroy the calendar first. It shows error saying
sessions.js:253 Uncaught TypeError: $(...).destroy is not a function
我在
var calendarEl = document.getElementById('calendar');
行.
推荐答案
您应该在calendar
而不是DOM中的元素上运行destroy方法.
You should run the destroy method on calendar
rathern then on the element in the DOM.
尝试改用window.calendar.destroy()
.
在此处查看文档: https://fullcalendar.io/docs/destroy
这篇关于销毁引导程序选项卡上的全日历,然后再初始化新日历的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!