Question

我要完成的是使用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);
}
});

非常感谢任何帮助。谢谢。

Answer 1

您可以使用clientEvents检查是否存在和事件：

检索FullCalendar在内存中的事件。

如果有任何阻止你的功能。

代码：

select: function (date, allDay) {

            var dayEvents = $('#calendar').fullCalendar('clientEvents', function (event) {
                return event.start.setHours(0, 0, 0, 0) === date.setHours(0, 0, 0, 0);
            });

            if (dayEvents.length>0) return

            date = $.fullCalendar.formatDate(date, 'dddd dd MMMM yyyy');

            var mywhen = date;

            $('#createEventModal #apptAllDay').val(allDay);
            $('#createEventModal #when').text(mywhen);
            $('#createEventModal').modal('show');
        }
    });

您可以使用以下方式设置事件的样式：

.fc-event-skin {
    border: 1px dotted red !important;
    background-color: transparent !important;
    color: black;    
}

演示：http://jsfiddle.net/IrvinDominin/gmm8b/1/

Fullcalendar显示加载事件和可选择性问题

1 个答案: