Highlighting multiple dates in scheduler

Asked by Anonymous
2 years ago.

Hello, I am using the scheduler component and I need to highlight several sections of the calendar based on an arrangement of dates with times, example:

illuminate 2024-02-05 01:00 - 03:00 (not highlighted)
illuminate 2024-02-06 01:00 - 03:00 (not highlighted)
illuminate 2024-02-07 01:00 - 03:00 (highlighted)

but no matter how hard I tried, I only get the last block to highlight

let datesArray: string[] = ['2024-02-05', '2024-02-06', '2024-02-07'];

datesArray.forEach((date: Date) => {
    const ds = new DayPilot.Date(date + ' ' + formData.startHour.selected.startHour + ':00'); // 'date + 01:00:00'
    const de = new DayPilot.Date(date + ' ' + formData.endHour.selected.endHour + ':00'); // 'date + 03:00:00'

    configCalendar.value.onBeforeCellRender = (args) => {
        if (
            args.cell.start.getDatePart() === new DayPilot.Date(date) &&
            args.cell.start >= ds &&
            args.cell.start < de
        ) {
            args.cell.backColor = 'rgba(223, 242, 227, 0.7)';
        }
    };
});

scheduler.value.control.update();

Comment posted by Anonymous
2 years ago.

I answer myself since I found my mistake. The foreach should go inside 'onBeforeCellRender'.

configCalendar.value.onBeforeCellRender = (args) => {
    datesArray.forEach((date: string) => {
        const ds = new DayPilot.Date(date + ' ' + formData.startHour.selected.startHour + ':00');
        const de = new DayPilot.Date(date + ' ' + formData.endHour.selected.endHour + ':00');

        if (args.cell.start.getDatePart() === new DayPilot.Date(date) &&
            args.cell.start >= ds &&
            args.cell.start < de) {
            args.cell.backColor = 'rgba(223, 242, 227, 0.7)';
        }
    });
};

scheduler.value.control.update();

Answer posted by Dan Letecky [DayPilot]
2 years ago.

You are overwriting the onBeforeCellRender event handler several times and only the last value is used.

You need to check the dates against the list of highlighted days inside onBeforeCellRender.

This approach is used in the following tutorial:

JavaScript Scheduler: Displaying Holidays

You can use something like this:

onBeforeCellRender: (args) => {

  const startHour = parseInt(formData.startHour.selected.startHour);
  const endHour = parseInt(formData.endHour.selected.endHour);
  
  const item = datesArray.find(day => {
    const start = new DayPilot.Date(day).addHours(startHour);
    const end = new DayPilot.Date(day).addHours(endHour);
    return DayPilot.Util.overlaps(start, end, args.cell.start, args.cell.end);
  });

  if (item) {
    args.cell.backColor = 'rgba(223, 242, 227, 0.7)';
  }

}

Define the event handler only once and make sure it can read the current values of startHour, endHour and datesArray.

Comment posted by Dan Letecky [DayPilot]
2 years ago.

Great, thanks for posting your solution!

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.