Editing Restrictions

The Scheduler provides multiple approaches to prevent or restrict its editing functionality, including event-based restrictions, conditional editing, and CSS-based visual restrictions.

Event-Based and CSS-Based Restrictions

You can combine event handling and CSS styling to create comprehensive editing restrictions.

The following example demonstrates how to prevent users from creating, editing, moving, or resizing events in slots that are already occupied using both approaches.

Change Theme

Theme

Loading ...

Preventable Events

The Scheduler provides the following events that you can handle to prevent editing operations by setting the preventDefault property to true:

Event	Description	Use Case
add	Fires before the editing directive renders the Add dialog.	Prevent creation in specific time slots or based on business rules.
edit	Fires before the editing directive renders the Edit dialog.	Restrict editing of certain events or during specific conditions.
remove	Fires when an event is removed.	Prevent deletion of important events or based on user permissions.
dragStart	Fires when an event drag operation starts.	Prevent dragging of certain events or during restricted periods.
dragEnd	Fires when an event drag operation ends.	Prevent moving events to restricted areas or time periods.
resizeStart	Fires when an event resize operation starts.	Block resizing in occupied slots or for specific event types.
resizeEnd	Fires when an event resize operation ends.	Block resizing in occupied slots or for specific event types.

CSS-Based Visual Restrictions

The example also shows how to use CSS styling to provide visual feedback for restricted areas:

• slotClass property—Apply custom CSS classes to specific time slots to indicate restrictions.
• Custom CSS—Use pointer-events: none and visual styling to prevent interactions and show restricted areas.
• Event styling—Apply CSS to make certain events appear read-only or restricted.

Conditional Editing

You can render a read-only Scheduler (for example, depending on user permissions) by setting the editable attribute to false.

html

<kendo-scheduler [editable]="false">
</kendo-scheduler>

Suggested Links

• Angular Scheduler Overview
• Overview of Editing
• API Reference of the SchedulerComponent
• API Index of the Scheduler