javascript - FullCalendar 动态呈现事件
问题描述
我正在Bootstarp v4.0
使用FullCalendar.io
我创建FullCalendar
如下
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar, events = localStorage.reservedRooms ? JSON.parse(localStorage.reservedRooms) : []
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
//defaultDate: '2019-04-12',
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
calendar.render();
});
我从哪里放置事件localStorage
我想从 jQuery 按钮单击加载全日历,但我做不到。我还尝试创建单独的 HTML 文件并尝试在 div 中加载该 HTML 文件,
$.get
但它从不呈现。我也尝试通过插入事件,calendar.addEventSource( source )
但这也不起作用。
我的 jQuery 按钮单击
$(document).ready(function() {
$('#checkAvailability').click(function(e) {
$.get(
'../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(data) {
$('#dvResult').html(data)
})
})
})
请帮我动态加载日历。
解决方案
更改您的 ajax 以仅返回事件(作为 json),当 ajax 成功时初始化日历
var calendar;
$('#checkAvailability').click(function(e) {
$.get(
'../Shared Documents/html/meetingRoom/meetingRoomSearchResult.html',
function(events) {
if(calendar) calendar.destroy();
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
//defaultDate: '2019-04-12',
weekNumbers: true,
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true, // allow "more" link when too many events
events: events
});
calendar.render();
});
})
将 div 添加到您的主页
<div id='calendar'></div>
推荐阅读
- git - 权限被拒绝并且无法从远程存储库中读取
- javascript - 如何在 React Native 中使用动画值对数组进行索引?
- python - 是否可以在不迭代的情况下搜索整个元组中的条目?
- flutter - 发生异常。_Exception(异常:读取 PDF 时出错!)从 url 加载 pdf
- amazon-web-services - 使用 Visual Studio 工具包检索 AWS 机密
- r - 尝试从具有特定条件的数据框中获取某些行
- r - Kable cell_spec 格式删除表格的行标签
- r - R 中的 xgboost:xgb.cv 的 early_stopping_rounds 的容差是多少?
- javascript - 仅使用提交按钮以 HTML 表单执行 onsubmit 功能
- mysql - sql 只返回具有特定列值的行