私が達成しようとしているのは、 Fullcalendarを使用して Google カレンダーからイベントを読み込むことですが、その月の日とスケジュールされたイベントがない日のみを表示することです。これらの利用可能な日をクリックすると、連絡先フォームが表示されます。
問題
月を変更すると、イベントが Google カレンダーから読み込まれるため、フラッターが発生します。イベントをロードしてから毎月表示する方法はありますか? または、その日を完全に覆い隠し、イベントがある場合にその日を見えなくすることを示すために、マスク (青色で強調表示) を配置することを避ける方法があるでしょうか?
他の月のイベントや日が表示されないことに加えて、クリックできないようにする方法はありますか? 青いボックスの外側をクリックしてもモーダルが表示されることに注目してください。
これが私がこれまでに持っているものです - http://jsfiddle.net/AzmJv/151/
JS
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
defaultView: 'month',
events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
eventClick: function (event) {
return false;
},
editable: false,
selectable: true,
//header and other values
select: function (date, allDay) {
date = $.fullCalendar.formatDate(date, 'dddd dd MMMM yyyy');
var mywhen = date;
$('#createEventModal #apptAllDay').val(allDay);
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal('show');
}
});
$('#submitButton').on('click', function (e) {
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doSubmit();
});
function doSubmit() {
$("#createEventModal").modal('hide');
console.log($('#apptStartTime').val());
console.log($('#apptEndTime').val());
console.log($('#apptAllDay').val());
alert("form submitted");
$("#calendar").fullCalendar('renderEvent', {
title: $('#patientName').val(),
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true"),
},
true);
}
});
どんな助けでも大歓迎です。ありがとうございました。