javascript - 在初始化新日历之前单击引导选项卡上的销毁全日历
问题描述
我有两个来自引导程序的选项卡。Fullcalendar 在默认隐藏的第二个选项卡内。所以我使用onclick事件来触发该calendar_view_session
功能。但是每次我访问该选项卡时,新日历都会附加到相同的选项卡中。它实际上是在复制日历。
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()
首先使用函数来销毁日历。它显示错误说
sessions.js:253 Uncaught TypeError: $(...).destroy is not a function
我之后使用这个破坏功能
var calendarEl = document.getElementById('calendar');
线。
解决方案
错误很明显,方法 destroy 不存在于 fullcalendar 中,相反,您可以:
$('#calendar').fullCalendar( 'destroy' );
这是一个小提琴
更新:
在实例化 fullcalendar 之前,您可能需要在每次单击选项卡时清空容器元素。
$('#calendar').html('');
在你的情况下,你这样做:
calendar_view_session: function () {
var calendarEl = document.getElementById('calendar');
$('#calendar').html('');
// your long code goes here...
calendar.render();
}
注意:您可能需要超时来呈现您的日历。
最终更新
// very global, outside of your context:
var calendar = null;
calendar_view_session: function () {
var calendarEl = document.getElementById('calendar');
if (calendar) {
calendar.destroy();
}
calendar = new FullCalendar.Calendar(calendarEl, { ... });
calendar.render();
},
推荐阅读
- random - 如何在不引入偏差的情况下生成一个范围内的随机 Rust 整数?
- c - MSP430:需要帮助设置此 TimerA
- html - 使用 boostrap 为台式机和笔记本电脑 13 英寸设置 col 布局
- exception - Java Try Catch 装饰器
- ios - 不调用 iOS 12 Handoff 委托方法
- android - 当用户使用适配器单击项目时隐藏和显示项目
- php - PHP PGP 在导入前检查密钥大小
- swift - 用动画隐藏上方的 CollectionView 单元格(Swift 4)
- javascript - 带有缩小脚本的 AngularJS 错误模块
- spring - Spring Data Mongodb:json字符串到BasicDBObject