我正在构建一个 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 回答
白板的微信
TA贡献1883条经验 获得超3个赞
有两个问题：
calendarEl是一个 DOM 元素。它没有.addEvent属性（至少没有 FullCalendar 属性。）
该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'
});
});
明月笑刀无情
TA贡献1828条经验 获得超4个赞
看起来您需要在加载 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>
添加回答
举报
0/150
提交
取消