我已经使用了此代码,但是无法禁用不带事件的日期,在此代码中将有可用的日期,但某些日期是空白的,如果我单击它,则单击它会显示一个弹出窗口已创建但颜色变成绿色,这不是必需的,请检查
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
},
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
validRange: function(nowDate) {
return {
start: nowDate,
end: nowDate.clone().add(2, 'months')
};
},
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
startDate = moment(new Date(start)).format("MM-DD-YYYY");
endDate = moment(new Date(end)).format("MM-DD-YYYY");
$("#calendar").fullCalendar('addEventSource', [{
start: start,
end: end,
rendering: 'background',
block: true,
}]);
$("#calendar").fullCalendar("unselect");
},
selectOverlap: function(event) {
return !event.block;
},
dayRender: function(date, cell) {
if (!IsDateHasEvent(date)) {
$(cell).addClass('fc-disabled-day disabled');
}
},
editable: true,
eventLimit: true,
events: function(start, end, timezone, callback) {
$.ajax({
url: '/my-url',
dataType: 'json',
data: {
tutor_id: $('#tutor_id').val()
},
success: function(response) {
var events = [];
for (var i = 0; i < response.length; i++) {
var start = response[i]['tutor_start_date'] + ' ' + response[i]['tutor_start_time'];
var end = response[i]['tutor_start_date'] + ' ' + response[i]['tutor_end_time'];
events.push({
start: start,
end: end,
color: '#8ec165',
tutor_id: response[i]['tutor_id'],
id: response[i]['id'],
textColor: 'white'
});
}
callback(events);
}
});
},
eventClick: function(event, jsEvent, view) {
startDate = moment(new Date(event.start)).format("YYYY-MM-DD hh:mm:ss");
endDate = moment(new Date(event.end)).format("YYYY-MM-DD hh:mm:ss");
var startEndDate = startDate + ',' + endDate;
slected_date_arr.push(startEndDate);
var myJsonString = JSON.stringify(slected_date_arr);
$('#selected_date_times').val(myJsonString);
},
dayClick: function(date, allDay, jsEvent, view) {
if (!IsDateHasEvent(date)) {
selectedDate = date;
// $("#divAddNewAppointment").dialog("open");
alert('This date is not available for selection');
return false;
} else {
// $('<%= "#" + lblMessage.ClientID%>').html(" your error msg");
// $("#divMessage").dialog("open");
console.log('there is event');
return true;
}
},
loading: function(bool) {
$('#loading').toggle(bool);
},
eventRender: function(event, element) {
element.qtip({
content: '<b> Time -' + event.start.format('hh:mma') + ' - ' + event.end.format('hh:mma') + '</b>',
});
},
eventAfterAllRender: function(view) {
$(".fc-time-grid-event").on('click', function(e) {
e.preventDefault();
$(this).css('background-color', '#B7A6EE');
$(this).css('border-color', '#B7A6EE');
$(this).removeClass("fc-time-grid-event").addClass("selected-event");
var quantity = $('.selected-event').length;
$("#quantity").val(quantity);
var totalQuantity = $("#quantity").val();
var tutorAmount = {
{
$tutor_price
}
};
var totalAmount = totalQuantity * tutorAmount;
$("#payable_amount").html(totalAmount);
$("#coursePrice").val(totalAmount);
});
$(".fc-day-grid-event").on('click', function(e) {
e.preventDefault();
$(this).css('background-color', '#B7A6EE');
$(this).css('border-color', '#B7A6EE');
$(this).removeClass("fc-day-grid-event").addClass("selected-event");
var quantity = $('.selected-event').length;
$("#quantity").val(quantity);
var totalQuantity = $("#quantity").val();
var tutorAmount = {
{
$tutor_price
}
};
var totalAmount = totalQuantity * tutorAmount;
$("#payable_amount").html(totalAmount);
$("#coursePrice").val(totalAmount);
});
},
});
IsDateHasEvent()的定义
function IsDateHasEvent(date) {
var allEvents = [];
allEvents = $('#calendar').fullCalendar('clientEvents');
var event = $.grep(allEvents, function (v) {
return +v.start === +date;
});
return event.length > 0;
}
此日历向学生显示,所以我希望他们仅选择可用的时段。