如何在完整日历中禁用所有没有事件的日期?

时间:2019-04-25 11:33:19

标签: javascript jquery fullcalendar fullcalendar-3

我已经使用了此代码,但是无法禁用不带事件的日期,在此代码中将有可用的日期,但某些日期是空白的,如果我单击它,则单击它会显示一个弹出窗口已创建但颜色变成绿色,这不是必需的,请检查

$('#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;
}

此日历向学生显示,所以我希望他们仅选择可用的时段。

0 个答案:

没有答案