我见过几种处理这些操作的解决方案,但大多数解决方案都处理早于 V4 的版本。
我想添加处理一天双击和事件双击的函数。
下面是我当前的设置没有处理这些事件的部分。
<div id="calendar"></div>
<script src="./vendor/jquery/jquery.min.js"></script>
<script src="./vendor/fullcalendar/core/main.min.js"></script>
<script src="./vendor/fullcalendar/daygrid/main.min.js"></script>
<script src="./vendor/fullcalendar/timegrid/main.min.js"></script>
<script src="./vendor/fullcalendar/interaction/main.min.js"></script>
<script src="./vendor/fullcalendar/moment/main.min.js"></script>
<script>
var time = new Date();
var now = time.getHours()+":00:00";
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid','timeGrid','interaction'],
height: 550,
header:{
left: 'title',
center: '',
right: 'today dayGridMonth timeGridWeek timeGridDay prev,next'
},
minTime: '05:00:00',
maxTime: '22:00:00',
nowIndicator: true,
scrollTime: now,
selectable: true,
events: myEvents,
slotEventOverlap: false,
views:{
dayGrid:{eventLimit:4},
},
});
calendar.render();
});
</script>
现在我尝试了几种解决方案,第一个是下面返回的错误“fullCalendar is not a function”
$('#calendar').fullCalendar({
eventRender: function(event, element) {
element.bind('dblclick', function() {
alert('double click!');
});
}
})
下一个是非功能性的:
eventRender: function(event, element) {
$(element).on({
click: function() {
// Handle click...
},
dblclick: function() {
// Handle double click...
}
});
},
我相信我的问题可能源于版本差异。我希望能链接到处理 V4 中此功能的示例或其他解决方案。
EDIT 1 因此我目前可以使用下面的内容引起点击/双击一天或事件的警报。出于某种原因,dayRender
函数仅在单击一天的下半部分时触发。我需要这方面的帮助。
eventRender: function(info) {
info.el.addEventListener('click', function() {
clickCount++;
if (clickCount === 1) {
singleClickTimer = setTimeout(function() {
clickCount = 0;
alert('single click');
}, 400);
} else if (clickCount === 2) {
clearTimeout(singleClickTimer);
clickCount = 0;
alert('double click');
}
});
},
dayRender: function(info) {
console.log(info.el);
info.el.addEventListener('click', function() {
clickCount++;
if (clickCount === 1) {
singleClickTimer = setTimeout(function() {
clickCount = 0;
alert('single click');
}, 400);
} else if (clickCount === 2) {
clearTimeout(singleClickTimer);
clickCount = 0;
alert('double click');
}
});
},
最佳答案
eventRender 函数接收一个包含事件和元素对象的信息参数。 你需要使用类似的东西:
eventRender: function(info) {
info.el.addEventListener('click', function() {
alert('click')
});
}
查看我制作的这个 jsfiddle:https://jsfiddle.net/6jc7ngLo/
关于javascript - JS FullCalendar 日期和事件双击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58882609/