Ответ 1
// a) and b)
// We dont need dayClick event, only select
// I think you created calender something like this
// var calendar = $('#calendar').fullCalendar({ ... })
select: function(start, end, allDay) {
//debugger;
var events = calendar.fullCalendar( 'clientEvents' );
for (var i = 0; events.length > i ; i++){
//If we have 1 day event
if((events[i].end == null && (events[i].start.getTime() >= start.getTime() && events[i].start.getTime() <= end.getTime())) ||
// If we have many days event
(events[i].end != null && ((events[i].start.getTime() >= start.getTime() && events[i].start.getTime() <= end.getTime()) ||
(events[i].end.getTime() >= start.getTime() && events[i].start.getTime() <= end.getTime()) ||
(events[i].start.getTime() <= start.getTime() && events[i].end.getTime() >= end.getTime()))
)){
alert("Realy busy!!!");
return;
}
}
// If this time is not busy, for example, we promt to enter Event Title
var title = prompt('Event Title:');
if (title) {
//............Adding event into calendar
}
calendar.fullCalendar('unselect');
},
// c) and d)
// This is invoked when we navigate throw the month callender
eventAfterRender: function(event, element, view ){
$(".booked").removeClass(".booked"); // Remove all booked class from element
var elements = $(".fc-widget-content:not(.fc-other-month)").filter(function(){
//We try to find day number witch corresponds to the event date
return (event.end == null && $(this).find(".fc-day-number").text() == event.start.getDate()) //If we have 1 day event
|| (event.end != null && $(this).find(".fc-day-number").text() >= event.start.getDate() // If we have many day event
&& $(this).find(".fc-day-number").text() <= event.end.getDate())
});
elements.addClass("booked");
// e)
// Hide all events related to previous and next months
// If we event ends in previous month or starts in next we dont show it!
if(
(event.end == null && (view.start.getMonth() != event.start.getMonth())) //If we have 1 day event
|| (event.end != null && (view.start.getMonth() > event.end.getMonth() // If we have many day event
|| view.start.getMonth() < event.start.getMonth()))
){
$(element).hide();
}
}
EDIT Эта конструкция
var elements = $(".fc-widget-content:not(.fc-other-month)").filter(function(){
//We try to find day number witch corresponds to the event date
return (event.end == null && $(this).find(".fc-day-number").text() == event.start.getDate()) //If we have 1 day event
|| (event.end != null && $(this).find(".fc-day-number").text() >= event.start.getDate() // If we have many day event
&& $(this).find(".fc-day-number").text() <= event.end.getDate())
});
означает, что мы выбираем дни текущего месяца (:not(.fc-other-month)), которые удовлетворяют условиям filter (return true): дни месяц равен дням событий
О вашем коде, как я уже сказал, вы должны удалить событие dayClick, и ваше событие select:
select: function (startDate, endDate, allDay, jsEvent) {
// This is my addition //
var events = calendar.fullCalendar( 'clientEvents' );
for (var i = 0; events.length > i ; i++){
//If we have 1 day event
if((events[i].endDate == null && (events[i].start.getTime() >= startDate.getTime() && events[i].start.getTime() <= endDate.getTime())) ||
// If we have many days event
(events[i].endDate != null && ((events[i].start.getTime() >= startDate.getTime() && events[i].start.getTime() <= endDate.getTime()) ||
(events[i].end.getTime() >= startDate.getTime() && events[i].start.getTime() <= endDate.getTime()) ||
(events[i].start.getTime() <= startDate.getTime() && events[i].end.getTime() >= endDate.getTime()))
)){
alert('Sorry this date is already taken');
return;
}
}
// /This is my addition //
console.dir(jsEvent);
if (liveDate > startDate) {
alert('This date has been passed');
return false;
} else {
var title = prompt('New Charges:');
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: startDate,
end: endDate,
allDay: allDay
}, false // make the event "unstick"
);
var startDateString = $.fullCalendar.formatDate(startDate, 'yyyy-MM-dd');
var endDateString = $.fullCalendar.formatDate(endDate, 'yyyy-MM-dd');
$.ajax({
type: 'POST',
url: './new_event.php?action=add',
data: {
startDate: startDateString,
endDate: endDateString,
eventTitle: title,
propID: propID
},
dateType: 'json',
success: function (resp) {
calendar.fullCalendar('refetchEvents');
}
});
} // end of inner if
} // end of else
calendar.fullCalendar('unselect');
},
О viewDisplay.
Его запускают каждый раз, когда мы идем в предыдущий или следующий месяц, и он запускается после eventAfterRender. Если мы используем eventAfterRender и переходим на месяц без событий, мы не имеем никакого эффекта. Свободные ячейки остаются забронированными.
Я предлагаю проанализировать события текущего месяца в viewDisplay:
function viewCalDisplay(view) {
//...................
// Your code
$(".booked").removeClass("booked"); // Remove all booked class from element
var events = view.calendar.clientEvents(function(event){
//we need only events of current month
return event.start.getMonth() == view.start.getMonth();
} );
for(i = 0; events.length > i; i++){
var event = events[i];
// We need only days of current month. We select <td> of calender table (by class .ui-widget-content)
var elements = $(".ui-widget-content:not(.fc-other-month)").filter(function(){
//We try to find day number witch corresponds to the event date
return (event.end == null && $(this).find(".fc-day-number").text() == event.start.getDate()) //If we have 1 day event
|| (event.end != null && $(this).find(".fc-day-number").text() >= event.start.getDate() // If we have many day event
&& $(this).find(".fc-day-number").text() <= event.end.getDate())
});
elements.addClass("booked"); //Only for this <td>
}
}