Focus whole 'day' column style based on today Date on Month View

[Arturo Martinez]

I have been using the 'Room Scheduler ' example and each time I move one day back or forward I want to know how can I focus the whole column, this on the month view like this:

A border line on the whole column on the current day im on, also I don't know if I can change styling of the column 'Thu 02' to change its color background based on the current day im on the navigation.

[Vijay Ravi]

Hi Arturo,

Based on your requirement, we prepared a sample for the entire column on the current day while navigating the previous or next week. We suggest using the actionComplete event to apply background color for the selectedDate whole column, as shown in the code snippet shared below. Please try our shared sample.

[app.component.ts]

public onActionComplete(args: ActionEventArgs): void {

    if (args.requestType === 'dateNavigate') {

      const selectedDate = this.selectedDate;

        const workCells = this.scheduleObj.element.querySelectorAll('.e-work-cells');

      this.applyStylesToCells(workCells, selectedDate);

      const headerCells = this.scheduleObj.element.querySelectorAll('.e-date-header-wrap .e-header-cells');

      this.applyStylesToCells(headerCells, selectedDate);

    }

  }

 

  private applyStylesToCells(cells: NodeListOf<Element>, selectedDate: Date): void {

    cells.forEach((cell: HTMLElement) => {

      const cellDate = this.scheduleObj.getDateFromElement(cell);

      if (cellDate && cellDate.getDate() === selectedDate.getDate() &&

          cellDate.getMonth() === selectedDate.getMonth() &&

          cellDate.getFullYear() === selectedDate.getFullYear()) {

        cell.style.backgroundColor = 'lightgray';

      } else {

        cell.style.backgroundColor = '';

      }

    });

  }

Sample: https://stackblitz.com/edit/customize-selecteddate-whole-column-while-navigat-rx8anm?file=src%2Fapp.component.ts

Output screenshot:

Please get back to us if you need any further assistance.

Regards,

Vijay