Highlighting multiple dates in scheduler

Asked by Anonymous
2 months 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 months 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 months 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 months ago.

Great, thanks for posting your solution!

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

Highlighting multiple dates in scheduler

Products

Learn

Get Support

DayPilot Pro