Просмотр временной шкалы FullCalendar

Я использую Full Calendar с плагином Time Grid, все работает хорошо. Я хочу изменить цвет для прошлой даты и времени. По событию dayRender я мог бы изменить цвет предыдущей даты, но не время, например, просмотреть неделю, начиная с воскресенья 8 сентября 2019 года до 14 субботы 2019 года. И открыть страницу 10 сентября 2019 года в 9.00 утра, я должен изменить цвет до 10 сентября 2019 года. в 9.00, но я смогу сделать это до 9 сентября 2019 года.

Как я могу включить время. Моя кодовая ручка https://codepen.io/milindsaraswala/pen/VwZXpRM

var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'resourceTimeGrid' ],
    timeZone: 'UTC',
    defaultView: 'resourceTimeGridFourDay',
    soltDuration: '00:30:00',
    slotLabelInterval: '00:30:00',
    minTime:'07:00:00',
    maxTime:'24:00:00',
    slotLabelFormat:{
      hour: 'numeric',
      minute: '2-digit',
      omitZeroMinute: false,
      meridiem: 'short'
    },
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimeGridDay,resourceTimeGridFourDay'
    },
    views: {
      resourceTimeGridFourDay: {
        type: 'resourceTimeGrid',
        duration: { weeks:1},
        buttonText: '7 days'
      }
    },
    resources: [
       { id: 'a', title: 'Room A' },
    ],
    //events: 'https://fullcalendar.io/demo-events.json?with-resources=2',
    events:events,
    dayRender:function(day){

      if (moment(day.date).isBefore(moment())) {
          day.el.classList.add('disabledDates');
        }
    }
  });

  calendar.render();
});

html css fullcalendar fullcalendar-4 fullcalendar-scheduler
person Milind    schedule 10.09.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете более жестко ограничить предыдущие дни, используя validRange без даты окончания:

validRange: function(nowDate) {
  return {
    start: nowDate
  };
},

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

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

dayRender: function(day) {
  var d = moment(day.date).startOf("day");
  var today = moment().startOf("day");

  if (d.isSame(today)) {
    var now = moment();
    var evt = {
      start: today.format("YYYY-MM-DD HH:mm"),
      end: now.format("YYYY-MM-DD HH:mm"),
      rendering: "background",
      className: "disabledDates"
    }
    calendar.addEvent(evt);
  }
}

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

Демо: https://codepen.io/ADyson82/pen/pozLWjo

person ADyson    schedule 10.09.2019