Как отключить все даты, у которых нет событий в полном календаре? - PullRequest
0 голосов
/ 25 апреля 2019

Я использовал этот код, но он не работает, чтобы отключить даты без события, здесь в этом коде будут даты, которые будут доступны, но некоторые даты пустые, которые можно нажимать, если я нажимаю на них, отображается одно всплывающее окносоздано, но цвет становится зеленым, что не обязательно, проверьте его

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

Этот календарь отображается для студентов, поэтому я хочу, чтобы онивыберите только доступные слоты.

...