FullCalendar - сделать дату не кликабельной

Я работаю с полным календарем, и мне интересно, есть ли способ сделать определенные даты недоступными для кликов. Функция, которая у меня есть до сих пор, сравнивает все даты «дневных квадратов» в календаре с максимальной датой, которую я определил ранее. Если дата выходит за пределы максимальной даты, я добавляю класс, чтобы сделать их серыми. Они по-прежнему кликабельны. Прячущиеся в них винты с раскладкой календаря и выглядят ужасно.

            // Grey out the dates that go beyond the maximum availability date 
            var maxParsed = Date.parse(maxDate.toString());
            $("td[data-date]").each(function(){
                var date = $(this).data('date');
                var dateParsed = Date.parse(date);
                if(!isNaN(dateParsed) && dateParsed > maxParsed){
                    $(this).addClass('fc-other-month');
                }
            });

javascript jquery fullcalendar fullcalendar-scheduler
person sdg91    schedule 18.11.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, что только с CSS вы можете справиться с этим. В вашем css сделайте следующее:

.fc-other-month {
  pointer-events: none;
  cursor: default;
}

CSS-свойство pointer-events позволяет авторам контролировать, при каких обстоятельствах (если таковые имеются) конкретный графический элемент может стать целью событий мыши. Если это свойство не указано, к содержимому SVG применяются те же характеристики значения visiblePainted.

Вы можете узнать больше об этом здесь: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

Если это не сработает, может помочь предотвращение по умолчанию.

$('.fc-other-month').on('click', function(e) {
   e.preventDefault();
   $(this).css({'pointer-events' : 'none'});
});

=== редактировать ====

Я посмотрел документацию, у них есть eventClick. Вы можете внутри этой функции проверить, является ли это «хорошей датой» или нет, а затем вернуть false, если вы не хотите, чтобы на нее можно было щелкнуть.

$('#calendar').fullCalendar({
    eventClick: function(calEvent, jsEvent, view) {

        if ( 1==1 || "this is a day without click feature") { //dummy code
           return false; //prevent clickable function
        }

    }
});

https://fullcalendar.io/docs/mouse/eventClick/

person sandrina-p    schedule 18.11.2016
comment
Это не сработало. Я даже попытался удалить все классы из дневного квадрата (насколько я могу судить, они просто контролировали цвет/положение и т. д.) и вызвать .unbind() для отмены привязки всех событий. Еще кликабельно.. - person sdg91; 18.11.2016
comment
Ты уверен? Я добавил прямо в демо (devtools) pointer-events: none и цифры перестали быть кликабельными. Я также заставил js добавить этот css. Попробуйте снова - person sandrina-p; 18.11.2016

arrow_upward
0
arrow_downward

Воспользуйтесь помощью jQuery и return false в событии click (думаю, вы назначили ему другой класс) в дату, когда вы не хотите, чтобы на нее нажимали. Так они не действуют на щелчок...

person Vishal Kumar Sahu    schedule 18.11.2016