FullCalander 5 添加事件
我正在构建一个 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回答
-
白板的微信
有两个问题：calendarEl是一个 DOM 元素。它没有.addEvent属性（至少没有 FullCalendar 属性。）的参数addEvent是单个Event 对象，而不是具有键events和事件数组作为值的对象。该addEvent演示可能对您有所帮助。您需要将使用关键字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' }); }); -
明月笑刀无情
看起来您需要在加载 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>
随时随地看视频慕课网APP
相关分类
JavaScript