1

私が達成しようとしているのは、 Fullcalendarを使用して Google カレンダーからイベントを読み込むことですが、その月の日とスケジュールされたイベントがない日のみを表示することです。これらの利用可能な日をクリックすると、連絡先フォームが表示されます。

問題

  1. 月を変更すると、イベントが Google カレンダーから読み込まれるため、フラッターが発生します。イベントをロードしてから毎月表示する方法はありますか? または、その日を完全に覆い隠し、イベントがある場合にその日を見えなくすることを示すために、マスク (青色で強調表示) を配置することを避ける方法があるでしょうか?

  2. 他の月のイベントや日が表示されないことに加えて、クリックできないようにする方法はありますか? 青いボックスの外側をクリックしてもモーダルが表示されることに注目してください。

これが私がこれまでに持っているものです - 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);
}
});

どんな助けでも大歓迎です。ありがとうございました。

4

1 に答える 1