Can blocked events behave like regular events, automatically overlap and resize?

We are using the Angular schedule component and have some users who are at multiple locations.  When they are booked at one location, we set a block event at their other location, to show they are unavailable initially.  But we do allow overlap appointments.  And if needed, the scheduler can add another appointment at the 2nd location that overlaps with the blocked event.

The issue is that blocked events aren't treated like regular appointments.  So they completely overlap, rather than getting split like 2 appointments would in normal view.  Or in timeline view instead of showing +1 more (or turning on rowAutoHeight to make the row bigger), they still just end up with the regular appt and the blocked event drawn on top of each other, making both hard to read or click on.

Normal appointment overlap:
Image_5098_1753297524709
Appointment and blocked overlap, one at 1030, one at 11:
Image_2463_1753297637784
2 overlapping blocked events:

Image_7965_1753297720808


Ideally we would like blocked events to behave like normal events for the purposes of overlap and layout, so that we can read them.  This might be a feature request, to add an option to blocked events or as part of allowOverlap settings?

We are able to do a partial workaround using onEventRendered and checking isSlotAvailable but it gets more complicated if there are more than 2 events or a mix of appointment and blocked.  And it's difficult to resize if the user changes between day or week view and has more space.  It would be much simpler if we could just apply the same overlap logic that is applied to normal appointments to blocked ones.  But whatever method resizes normal events does not seem to be available to apply to blocked or it does not recognize blocked events?

Ideally we would want it to look something like this, where blocked vs blocked and event vs blocked are treated the same as event vs event:
Image_8893_1753298117851

Is this possible?  Thanks.


1 Reply

VR Vijay Ravi Syncfusion Team July 28, 2025 12:05 PM UTC

Hi Lucas Jeremy,
 

We have reviewed and validated the query you reported. You have requested that blocked appointments allow overlapping and resizing similar to normal events. However, this functionality is currently not supported for blocked events.
 

To address your requirement, you can render appointments as normal events and configure the read-only field for specific appointments to restrict editing or deletion operations, effectively treating them as blocked events. Additionally, you can utilize the eventRendered event to apply custom colors to these appointments, mimicking the appearance of blocked events.


Sample link: https://stackblitz.com/edit/angular-xnyxfx2r-ppwcvfi9?file=src%2Fdata.ts,src%2Fapp.component.ts


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

Regards,

Vijay


Loader.
Up arrow icon