FullCalander 5添加事件
FullCalander 5添加事件
提问于 2020-08-09 10:25:26
我正在构建一个CRM，并试图在日历div之外创建一个按钮，如果我按下这个按钮，它应该会创建一个事件，但它不起作用。有人能告诉我我做错了什么吗？
这就是我试过的：
$(document).on("click", "#testbtn", function(){
var calendarEl = $("#calendar");
calendarEl.addEvent({events: [
{
title: 'Second Event',
start: '2020-08-08T12:30:00',
end: '2020-08-08T13:30:00'
}
]});
});这是我的全部剧本：
<html>
<body>
<script src='../lib/main.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
<!-- all the options here -->
calendar.render();
});
</script>
</head>
<body>
<button id="testbtn">Add lunch time</button>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script>
var options = { /*Add options here*/};
var calendarEl = $("#calendar");
var calendar = new FullCalendar.Calendar(calendarEl, options);
$(document).on("click", "#testbtn", function(){
calendar.addEvent({
title: 'Lunch',
start: '2020-08-08T12:30:00',
end: '2020-08-08T13:30:00'
});
calendar.render();
});
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-09 11:15:13
有两个问题：
calendarEl是一个DOM元素。它将没有.addEvent属性(至少没有FullCalendar属性)。addEvent的参数是单个事件对象，而不是一个具有键events和作为值的事件数组的对象。
演示可能对你有帮助。
您需要将使用FullCalendar.Calendar关键字创建的new实例传递给事件处理函数。
var calendarEl = $("#calendar").get(0);
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
$("#testbtn").on("click", function(){
calendar.addEvent({
title: 'Second Event',
start: '2020-08-08T12:30:00',
end: '2020-08-08T13:30:00'
});
});Stack Overflow用户
发布于 2020-08-09 12:43:48
看起来，在加载jquery脚本之后，您需要发布这个脚本。这已经加载了事件。我们只是在添加一个事件。
正文
<body>
<button id="testbtn">Add lunch time</button>
<div id='calendar-container'>
<div id='calendar'></div>
</div>
<script src="/js/jquery/jquery.min.js"></script>
</body>然后调用完整的日历插件
<script>
var calendarEl = $("#calendar").get(0);
var calendar = new FullCalendar.Calendar(calendarEl, {
/*options...*/
events:
[
{
id: 1,
title: 'First Event',
start: '2020-08-08T10:30:00',
end: '2020-08-08T11:30:00',
extendedProps: {
description: 'Test 1'
},
color: '#336e03'
},
{
id: 2,
title: 'Second Event',
start: '2020-08-08T15:30:00',
end: '2020-08-08T16:30:00',
extendedProps: {
description: 'Test 2'
},
}
]
});
calendar.render();
/*this is the action when the button is pressed*/
$("#testbtn").on("click", function(){
calendar.addEvent({
title: 'Third Event',
start: '2020-08-08T12:30:00',
end: '2020-08-08T13:30:00'
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63325164
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号