Event Resizing in the React Scheduler

Adjust appointment duration and timing by resizing from edge handlers. Resize handlers (top, bottom, left, right) are available across all Scheduler views. Enable event resizing by configuring the eventResize property to either a boolean value (true for default behavior) or an EventResizeProps configuration object for advanced customization. Vertical resizing adjusts duration (extends or shortens the time slot), while horizontal resizing shifts the appointment position in Week and WorkWeek views.

On mobile devices, long-press an appointment to reveal touch-friendly resize dot handlers for precise control. Handlers appear automatically on desktop.

Set eventResize to true to enable resizing with default configurations:

import { DayView, WeekView, WorkWeekView, MonthView, Scheduler, EventSettings } from '@syncfusion/react-scheduler';

export default function App() {
    const eventSettings: EventSettings = { dataSource: scheduleData };
    return (
        <Scheduler eventSettings={eventSettings} eventResize={true}>
            <DayView />
            <WeekView />
            <WorkWeekView />
            <MonthView />
        </Scheduler>
    );
};

Configuration

Customize resize behavior by configuring the following properties in the eventResize object:

Resize lifecycle events

Three callbacks manage the resize lifecycle:

• onResizeStart: Fires when the user begins resizing. Use it to validate or cancel the resize operation.
• onResizing: Fires continuously while resizing. Use it for real-time duration validation or preview updates.
• onResizeStop: Fires when resizing ends. Use it for final validation or persisting the new event duration.

Each resize callback receives a SchedulerResizeEvent object containing information about the event being resized. This object allows you to access and work with the appointment data and timing during the resize lifecycle.