1

我想要完成的是使用Fullcalendar从谷歌日历加载事件，但只显示当月的日子和没有预定事件的日子。然后单击这些可用日期以显示联系表。

问题

  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

0

您可以使用以下命令检查是否存在和事件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/

于 2014-01-22T12:49:42.310 回答