全日历时间线视图答案

【问题标题】：FullCalendar Time Line View全日历时间线视图
【发布时间】：2019-09-10 05:26:51
【问题描述】：

我正在使用带有 Time Grid 插件的完整日历，一切正常。我想更改过去日期和时间的颜色。通过 dayRender 事件，我可以更改前一个日期的颜色，但不能更改时间，例如查看从 2019 年 9 月 8 日星期日到 2019 年 9 月 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();
});

【问题讨论】：

标签： html css fullcalendar fullcalendar-scheduler fullcalendar-4

【解决方案1】：

您可以通过使用不带结束日期的validRange 更严格地限制前几天：

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

除了在视觉上使日期变灰外，这还将停止添加或拖动事件。

将当天的次置灰会带来更大的问题。这是因为没有一个 HTML 元素可以代表特定日期的“时间段”，您可以将其作为目标来进行每小时甚至每分钟的限制。我认为您可以在这里做的最好的事情是创建一个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

【讨论】：