时隙选择上的完整日历回调 function
[英]Full Calendar callback function on time slots selections
问题描述
如何获得选择的时间？
在我的场景中，我有一个可选择的日历，用户可以 select 日历的某些单元格，然后如果选择的时间小于 3 小时，它将继续执行一些操作，但如果时间差超过 3 小时，然后它将显示一条警告消息。
这是一个示例，但我想在
select事件之前进行。
https://codepen.io/nasser-ali-karimi/pen/KKKNzRB?editors=0010
$(function() {
$('#calendar').fullCalendar({
selectable: true,
defaultView: 'agendaDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay'
},
select: function(startDate, endDate) {
// Find the time diff for checking the druation.
var fromTime = parseInt(new Date(startDate.format()).getTime()/1000);
var toTime = parseInt(new Date(endDate.format()).getTime()/1000);
var timeDiff = (toTime - fromTime)/3600; // will give difference in hrs
// Check if user selected time more than 3 hours then, show the warning.
if (timeDiff > 3) {
$('.fc-highlight').css('background', 'red');
}
else {
alert("continue !");
}
}
});
});
为了更好的用户体验，我想将所选部分的颜色更改为黄色或红色以警告用户。 但我不知道是否有内置功能。
使用Fullcalendar v3和moments.js！
1 个解决方案
解决方案1
1 2019-10-20 05:09:35
基于@ADyson 的方向，我终于可以做到这一点。
1-为此使用selectAllow 。
2-根据条件更改背景颜色
我尝试在.fc-highlight上使用直接更改，但它不起作用，因此我将 class 添加到#calendar并使其背景变为red并且它可以工作。
#calendar.invalid-choice .fc-highlight {
background: red;
}
这是我所做的简要说明，但如果您愿意，可以查看完整的代码。
selectAllow: function(date) {
if (timeDiff > 3) {
$('#calendar').addClass('invalid-choice');
}
else {
$('#calendar').removeClass('invalid-choice');
}
},
演示https://codepen.io/nasser-ali-karimi/pen/ExxNbMW
jQuery(document).ready(function($) { $('body').append(`<div class="popover fade right in" role="tooltip" id="selected-hours" style="top: 670px; left: 670px; display: none;"> <div class="popover-data"> </div> </div>`); $('#calendar').fullCalendar({ selectable: true, defaultView: 'agendaDay', header: { left: 'prev,next today', center: 'title', right: 'agendaDay' }, selectAllow: function(date) { // Find the time diff for checking the druation. var fromTime = new Date(date.start.format()).getTime()/1000; var toTime = new Date(date.end.format()).getTime()/1000; var timeDiff = (toTime - fromTime)/3600; // will give difference in hrs var offset = $('body').offset(); var left = event.pageX; var top = event.pageY; var theHeight = $('#selected-hours').height(); $('#selected-hours').show(); $('#selected-hours.popover-data').html(timeDiff).css({ 'min-width': "20px", 'text-align': 'center', }); if (timeDiff > 3) { $('#calendar').addClass('invalid-choice'); } else { $('#calendar').removeClass('invalid-choice'); } $('#selected-hours').css('left', (left + 'px')); $('#selected-hours').css('top', (top - (theHeight / 2)) + 'px'); $('#selected-hours').css({ 'z-index': '9999', 'position': 'absolute', 'display': 'block', }); }, select: function(startDate, endDate, jsEvent, view, resource) { $('#selected-hours').hide(); } }); }); html, body { margin: 0; padding: 0; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-size: 14px; } #calendar { max-width: 900px; margin: 40px auto; } #calendar.invalid-choice.fc-highlight { background: red; }
<script src="https://unpkg.com/moment@2.24.0/min/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <,DOCTYPE html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1. shrink-to-fit=no"> <link rel="stylesheet" href="https.//unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.css" crossorigin="anonymous"> <title>Page Title</title> </head> <body> <h1>Full calendar change highlight background during selections</h1> <div id='calendar'></div> </body> </html>
解决方案2
0 2019-10-19 08:29:34
这个怎么样..
如果您根据 select 回调 function 中的持续时间设置事件的颜色会怎样。 如果时差大于 3 小时，则将颜色设置为红色，否则设置为蓝色。
然后使用eventResize回调 function 在调整大小停止并且事件持续时间发生变化时触发以更新已编辑事件的颜色。
$(function() {
$('#calendar').fullCalendar({
selectable: true,
defaultView: 'agendaDay',
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay'
},
select: function(startDate, endDate) {
// Find the time diff for checking the druation.
var fromTime = parseInt(new Date(startDate.format()).getTime()/1000);
var toTime = parseInt(new Date(endDate.format()).getTime()/1000);
var timeDiff = (toTime - fromTime)/3600; // will give difference in hrs
// Check if user selected time more than 3 hours then, show the warning.
if (timeDiff > 3) {
createEvent('red')
}
else {
createEvent('blue')
}
},
editable: true,
eventResize: function(event, delta, revertFunc) {
alert(event.title + " end is now " + event.end.format());
//Calculate time difference from event parameter...
if(timeDiff > 3){
//Set the color of the event to red.
event.setProp( 'backgroundColor', 'rgb(255,0,0)')
}else{
//Set the color of the event to blue.
event.setProp( 'backgroundColor', 'rgb(0,255,0)')
}
if (!confirm("is this okay?")) {
revertFunc();
}
}
});
});
将虚拟事件添加到完整日历以创建广告位
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.