我正在构建一个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>
有两个问题：
-
calendarEl是一个DOM元素。它不会有.addEvent属性(至少不是FullCalendar属性。( -
addEvent的参数是单个Event对象，而不是以键events和事件数组为值的对象。
addEvent演示可能对您有所帮助。
您需要将使用new关键字创建的FullCalendar.Calendar实例传递给事件处理函数。
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>