如何获得选定的时间？
在我的情况下，我有一个可以选择的日历，用户可以选择日历的某些单元格，然后，如果所选时间少于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！
基于@ADyson的方向，我最终可以做到这一点。
1-为此使用selectAllow。
2-根据条件更改背景颜色
我尝试在.fc-highlight上使用直接更改，但无法正常工作，因此我向#calendar添加了一个类，并使其返回接地red即可。
#calendar.invalid-choice .fc-highlight {
background: red;
}
这是我所做的简短介绍，但是如果愿意，可以附上完整的代码。
selectAllow: function(date) {
if (timeDiff > 3) {
$('#calendar').addClass('invalid-choice');
}
else {
$('#calendar').removeClass('invalid-choice');
}
},
DEMOhttps://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,
slotDuration: '00:15:00',
slotLabelInterval: '00:01:00',
slotLabelFormat: 'H:mm',
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/[email protected]/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/[email protected]/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/[email protected]/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>