search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Highlighting multiple dates in scheduler

Asked by Anonymous
24 days 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
24 days 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]
24 days 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:

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]
24 days ago.

Great, thanks for posting your solution!

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):