全日历时间线视图

Question

我正在使用带有时间网格插件的完整日历，一切正常。我想更改过去日期和时间的颜色。通过 dayRender 事件，我可以更改前一个日期的颜色，但不能更改时间，例如查看从 2019 年 9 月 8 日星期日到 2019 年星期六 14 日的一周。并在 2019 年 9 月 10 日上午 9 点打开页面，我应该在 2019 年 9 月 10 日之前更改颜色上午 9 点，但我可以做到 2019 年 9 月 9 日。

我怎样才能包括时间。我的密码笔 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();
});

Answer 1

您可以使用没有结束日期的 validRange 来更严格地限制前几天：

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

除了在视觉上使日期变灰之外，这还会停止向其添加或拖放事件。

将当天的次变灰会出现更多问题。这是因为没有单个 HTML 元素表示特定日期的 "time slot"，您可以将其作为目标以进行每小时甚至每分钟的限制。我认为您在这里可以做的最好的事情是创建一个 background event 涵盖一天中直到当前时间的时间段：

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);
  }
}

如果您随后想限制在背景事件上创建/拖动其他事件，您可以通过一些 date selection settings.

演示：https://codepen.io/ADyson82/pen/pozLWjo

全日历时间线视图

FullCalendar Time Line View

html

css

fullcalendar

fullcalendar-scheduler

fullcalendar-4