美好的一天
我正在使用FullCalendar.js在我的表单上呈现日历。我的要求是只允许用户在日历上选择一个插槽。他们允许从不同日期选择多个广告位，但不是在同一天内。
他们可以选择的时段的持续时间最长为1小时且不小于。
我已经找到了后者（允许最多可以选择1小时的插槽）但是对于我的生活，我无法弄清楚如何取消选择＆＃34;＆＃34;取消选择＆＃34;如果在同一天内选择了新插槽，则选择上一次。
这是我的代码：
$('#calendar').fullCalendar({
header:{
left: '',
center: '',
right: ''
},
columnFormat: {
week: 'ddd'
},
selectable:true,
selectHelper: true,
editable: false,
eventStartEditable : false,
allDaySlot: false,
defaultView: 'agendaWeek',
slotDuration:'01:00:00',
allDay: false,
slotEventOverlap: false,
dayClick: function(date,JSevent, view) {
//$(this).fullCalendar('unselect');
console.log("I am hereerer");
$('#calendar').fullCalendar('clientEvents', function(event) {
console.log(date);
console.log(event.start);
console.log(event.end);
if(event.start <= date && event.end >= date) {
return true;
}
return false;
});
},
select:function(start, end)
{
var minutes = end.diff(start,"minutes");
$('#calendar').fullCalendar('unselect');
if(minutes===60)
{
$('#calendar').fullCalendar('renderEvent', {
start: start,
end: end,
allDay: false
},
true
);
}
}
});
答案 0 :(得分：0)
您在这里：
<script>
$(document).ready(function () {
var appointments = 0;
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 11; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
$("#form_id").val(makeid());
var calendar = $('#calendar').fullCalendar({
editable: true,
slotDuration: '00:20:00',
defaultView: 'agendaWeek',
allDaySlot: false,
eventConstraint: {
start: '00:00', // a start time (start of the day in this example)
end: '24:00', // an end time (end of the day in this example)
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: 'load.php?id=' + $("#form_id").val(),
eventRender: function (event, element) {
if (!event.editable) {
element.addClass('fc-event-non-editable');
element.draggable = false;
}
},
eventOverlap: false,
selectable: true,
selectHelper: true,
select: function (start, end, allDay, revertFunc)
{
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1);
var eventData = {
start: start,
end: end
};
if (appointments < 3) {
if (start >= myDate.getTime()) {
var title = prompt("Enter Event Title");
if (title)
{
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url: "insert.php",
type: "POST",
data: {title: title, start: start, end: end, user_id: $("#form_id").val()},
success: function ()
{
alert("Added Successfully");
$('#calendar').fullCalendar('unselect');
$('#calendar').fullCalendar('refetchEvents');
appointments++;
}
})
}
} else {
alert('It is not possible to book an appointment prior to today.');
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
} else {
alert("You can select maximum of 3 dates!");
}
},
eventResize: function (event, delta, revertFunc)
{
if ((event.end - event.start) <= '3600000') {
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {title: title, start: start, end: end, id: id},
success: function () {
calendar.fullCalendar('refetchEvents');
alert('Event Update');
}
});
} else {
revertFunc();
alert("Appointment could be of maximum 1:30 hrs.");
}
},
eventDrop: function (event)
{
var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
var title = event.title;
var id = event.id;
$.ajax({
url: "update.php",
type: "POST",
data: {title: title, start: start, end: end, id: id},
success: function ()
{
calendar.fullCalendar('refetchEvents');
alert("Event Updated");
}
});
},
eventClick: function (event)
{
if (event.editable) {
if (confirm("Are you sure you want to remove it?"))
{
var id = event.id;
$.ajax({
url: "delete.php",
type: "POST",
data: {id: id},
success: function ()
{
calendar.fullCalendar('refetchEvents');
alert("Event Removed");
appointments--;
}
})
}
}
},
dayRender: function (date, cell) {
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1);
if (date < myDate) {
$(cell).addClass('disabled');
}
},
viewRender: function (view, element) {
// Drop the second param ('day') if you want to be more specific
if (moment().isAfter(view.intervalStart, 'day')) {
$('.fc-prev-button').addClass('fc-state-disabled');
} else {
$('.fc-prev-button').removeClass('fc-state-disabled');
}
}
});
});
</script>