Semi-blocked cells?

[Erez Lirov]

Is there a way to render semi-blocked cells? For example, suppose that between 9 and 10AM, we allow only 1 appointment instead of the usual 3. We would like the block of cells between 9 and 10am to be colored in a certain way, have a label such as "1 Appointment Only", BUT still be clickable so that the user can book their one appointment.

In the screenshot, you can see how the block is rendered so that 2 of the slots are completely blocked and 1 is translucent so you can see that 1 appointment is allowed. I understand it wouldn't make sense to have this exact representation in syncfusion.. but is there a way to achieve something similar?

Attachment: png2jpg_fa29690c.zip

[Vijay Ravi]

Hi Erez Lirov,

To apply custom styles to specific cells in the Syncfusion Scheduler component based on your blockData, you can utilize the renderCell event to add classes to the cells during the rendering process.

You can modify the onRenderCell method to check if the cell's date and time correspond with any entries in blockData. If a match is found, you can add a specific class for styling purposes.

Additionally, while blocked cells should display data corresponding to the blocked times in the data source, they should not be clickable, preventing any actions from being performed on them. This way, the blocked time slots are visually distinct, and users cannot interact with them.

[app.component.html]
 

<ejs-schedule #scheduleObj cssClass='schedule-block-events' width='100%' height='650px'

        [currentView]="currentView" [selectedDate]="selectedDate" [eventSettings]="eventSettings" [timeScale]="timeScale" (renderCell)="onRenderCell($event)">

</ejs-schedule>

[app.component.ts]
 

onRenderCell(args: RenderCellEventArgs): void {

    if (args.elementType === 'workCells' || args.elementType === 'monthCells') {

      const cellDate = new Date(args.date.getTime());

      // Check against each block data item

      this.data.forEach(block => {

        const blockStart = new Date(block.StartTime);

        const blockEnd = new Date(block.EndTime);

        if (cellDate >= blockStart && cellDate < blockEnd) {

          // Add a custom class for styling

          args.element.classList.add('blocked-cell');

        }

      });

    }

  }

[app.component.css]
 

.e-schedule .e-vertical-view .e-work-cells.blocked-cell {

  background-color:rgb(238, 164, 193);

  color: #a00;   border: 1px solid #a00;

}

Sample link: U74bmr (forked) - StackBlitz

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay