我无法将开始和结束日期之外的资源变灰

Question

我想将不在 businessHours 之间的其他日期设为灰色。在此示例中，我传入了资源 abusinessHours 日期。我想要 2024 年 1 月 19 日之前和 2024 年 1 月 30 日之后的灰色背景。所以我无法在此日期之前和之后删除任何活动。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: [
      {
        "id": "a",
        "title": "Auditorium A",
        bussinessHours: {
          start: new Date('2024-01-19'),
          end: new Date('2024-01-30')
        }
      },
      {
        "id": "b",
        "title": "Auditorium B",
        "eventColor": "green"
      },
      {
        "id": "c",
        "title": "Auditorium C",
        "eventColor": "orange"
      }
    ],
    events: [
      {
        "resourceId": "b",
        "title": "event 5",
        "start": "2024-01-19T10:00:00+00:00",
        "end": "2024-01-19T15:00:00+00:00"
      },
      {
        "resourceId": "a",
        "title": "event 2",
        "start": "2024-01-19T09:00:00+00:00",
        "end": "2024-01-19T14:00:00+00:00"
      }
    ]
  });

  calendar.render();
});

Answer 1

必须使用FullCalendar中的dateSet回调来根据条件动态更新日历的后台渲染。

像下面一样添加一个函数。根据需要更改日期。

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'UTC',
    initialView: 'resourceTimelineDay',
    aspectRatio: 1.5,
    headerToolbar: {
      left: 'prev,next',
      center: 'title',
      right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
    },
    editable: true,
    resourceAreaHeaderContent: 'Rooms',
    resources: [
      {
        "id": "a",
        "title": "Auditorium A",
        bussinessHours: {
          start: new Date('2024-01-19'),
          end: new Date('2024-01-30')
        }
      },
      {
        "id": "b",
        "title": "Auditorium B",
        "eventColor": "green"
      },
      {
        "id": "c",
        "title": "Auditorium C",
        "eventColor": "orange"
      }
    ],
    events: [
      {
        "resourceId": "b",
        "title": "event 5",
        "start": "2024-01-19T10:00:00+00:00",
        "end": "2024-01-19T15:00:00+00:00"
      },
      {
        "resourceId": "a",
        "title": "event 2",
        "start": "2024-01-19T09:00:00+00:00",
        "end": "2024-01-19T14:00:00+00:00"
      }
    ],
    datesSet: function (info) {
      var startDate = info.start.toISOString().split('T')[0];
      var endDate = info.end.toISOString().split('T')[0];

      calendarEl.querySelectorAll('.fc-day').forEach(function (cell) {
        var cellDate = cell.getAttribute('data-date');
        if (cellDate < '2024-01-19' || cellDate > '2024-01-30') {
          cell.classList.add('fc-non-business');
        } else {
          cell.classList.remove('fc-non-business');
        }
      });
    }
  });

  calendar.render();
});

尝试一下，让我知道效果如何。谢谢。