[scheduler] add confirmation dialog for event deletion

docs/data/scheduler/event-calendar/editing/EventDeletionConfirmation.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { EventCalendar } from '@mui/x-scheduler/event-calendar';
+import {
+  initialEvents,
+  defaultVisibleDate,
+  resources,
+} from '../../datasets/personal-agenda';
+
+export default function EventDeletionConfirmation() {
+  const [events, setEvents] = React.useState(initialEvents);
+
+  return (
+    <div style={{ height: '650px', width: '100%' }}>
+      <EventCalendar
+        events={events}
+        resources={resources}
+        defaultVisibleDate={defaultVisibleDate}
+        onEventsChange={setEvents}
+        defaultPreferences={{ isSidePanelOpen: false }}
+        eventDeletion={{ confirmation: false }}
+      />
+    </div>
+  );
+}

docs/data/scheduler/event-calendar/editing/EventDeletionConfirmation.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { SchedulerEvent } from '@mui/x-scheduler/models';
+import { EventCalendar } from '@mui/x-scheduler/event-calendar';
+import {
+  initialEvents,
+  defaultVisibleDate,
+  resources,
+} from '../../datasets/personal-agenda';
+
+export default function EventDeletionConfirmation() {
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
+
+  return (
+    <div style={{ height: '650px', width: '100%' }}>
+      <EventCalendar
+        events={events}
+        resources={resources}
+        defaultVisibleDate={defaultVisibleDate}
+        onEventsChange={setEvents}
+        defaultPreferences={{ isSidePanelOpen: false }}
+        eventDeletion={{ confirmation: false }}
+      />
+    </div>
+  );
+}

docs/data/scheduler/event-calendar/editing/EventDeletionConfirmation.tsx.preview

@@ -0,0 +1,8 @@
+<EventCalendar
+  events={events}
+  resources={resources}
+  defaultVisibleDate={defaultVisibleDate}
+  onEventsChange={setEvents}
+  defaultPreferences={{ isSidePanelOpen: false }}
+  eventDeletion={{ confirmation: false }}
+/>

docs/data/scheduler/event-calendar/editing/editing.md

@@ -44,6 +44,22 @@ Set `eventCreation.interaction` to `"double-click"` to open the creation form wh
 
 {{"demo": "EventCreationInteraction.js", "bg": "inline", "defaultCodeOpen": false}}
 
+## Event deletion
+
+Deleting a non-recurring event asks for confirmation first, through a dialog with a Cancel and a Delete event action. Deleting a [recurring event](/x/react-scheduler/recurring-events/) opens the recurring scope dialog instead, which already asks the user to confirm a scope before applying the change—no second prompt is shown on top of it.
+
+Use the `eventDeletion` prop to customize this behavior.
+
+### Skip the confirmation dialog
+
+Pass `eventDeletion={{ confirmation: false }}` to delete non-recurring events immediately, without asking for confirmation:
+
+```tsx
+<EventCalendar eventDeletion={{ confirmation: false }} />
+```
+
+{{"demo": "EventDeletionConfirmation.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Event dialog
 
 Clicking an event or creating a new one opens the event dialog.

docs/data/scheduler/event-timeline/editing/EventDeletionConfirmation.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
+import {
+  initialEvents,
+  defaultVisibleDate,
+  resources,
+} from '../../datasets/company-roadmap';
+
+export default function EventDeletionConfirmation() {
+  const [events, setEvents] = React.useState(initialEvents);
+
+  return (
+    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
+      <EventTimelinePremium
+        events={events}
+        resources={resources}
+        defaultVisibleDate={defaultVisibleDate}
+        onEventsChange={setEvents}
+        defaultPreset="monthAndYear"
+        eventDeletion={{ confirmation: false }}
+      />
+    </div>
+  );
+}

docs/data/scheduler/event-timeline/editing/EventDeletionConfirmation.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { SchedulerEvent } from '@mui/x-scheduler/models';
+import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
+import {
+  initialEvents,
+  defaultVisibleDate,
+  resources,
+} from '../../datasets/company-roadmap';
+
+export default function EventDeletionConfirmation() {
+  const [events, setEvents] = React.useState<SchedulerEvent[]>(initialEvents);
+
+  return (
+    <div style={{ height: '500px', width: '100%', overflow: 'auto' }}>
+      <EventTimelinePremium
+        events={events}
+        resources={resources}
+        defaultVisibleDate={defaultVisibleDate}
+        onEventsChange={setEvents}
+        defaultPreset="monthAndYear"
+        eventDeletion={{ confirmation: false }}
+      />
+    </div>
+  );
+}

docs/data/scheduler/event-timeline/editing/EventDeletionConfirmation.tsx.preview

@@ -0,0 +1,8 @@
+<EventTimelinePremium
+  events={events}
+  resources={resources}
+  defaultVisibleDate={defaultVisibleDate}
+  onEventsChange={setEvents}
+  defaultPreset="monthAndYear"
+  eventDeletion={{ confirmation: false }}
+/>

docs/data/scheduler/event-timeline/editing/editing.md

@@ -44,6 +44,22 @@ Set `eventCreation.interaction` to `"double-click"` to open the creation form wh
 
 {{"demo": "EventCreationInteraction.js", "bg": "inline", "defaultCodeOpen": false}}
 
+## Event deletion
+
+Deleting a non-recurring event asks for confirmation first, through a dialog with a Cancel and a Delete event action. Deleting a [recurring event](/x/react-scheduler/recurring-events/) opens the recurring scope dialog instead, which already asks the user to confirm a scope before applying the change—no second prompt is shown on top of it.
+
+Use the `eventDeletion` prop to customize this behavior.
+
+### Skip the confirmation dialog
+
+Pass `eventDeletion={{ confirmation: false }}` to delete non-recurring events immediately, without asking for confirmation:
+
+```tsx
+<EventTimelinePremium eventDeletion={{ confirmation: false }} />
+```
+
+{{"demo": "EventDeletionConfirmation.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Event dialog
 
 Clicking an event or creating a new one opens the event dialog.