---
title: "JQuery Scheduler Create, Edit and Delete Events Example | Mobiscroll"
component: "Scheduler"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/scheduler/create-read-update-delete-CRUD"
---

# Create, Edit and Delete Events - jQuery Scheduler demo

Implement full event CRUD in a JQuery Scheduler — drag or click to create events, confirm via a custom dialog, then drag to move, resize, or delete.

- [Live demo](https://demo.mobiscroll.com/jquery/scheduler/create-read-update-delete-CRUD)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/scheduler/create-read-update-delete-CRUD)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/create-read-update-delete-CRUD.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/create-read-update-delete-CRUD.md), [React](https://demo.mobiscroll.com/react/scheduler/create-read-update-delete-CRUD.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/create-read-update-delete-CRUD.md)

## Description

### Create new events

Drag to create and click to create is enabled. Events can be created by dragging or with double clicks. As soon as the initial position is confirmed, a temporary event is created and a custom edit dialog is shown for refinement. On cancel the temporary event will be removed and on confirmation the event will stay in the calendar.

### Edit existing events

Drag to resize and drag to move is enabled. Events can be reordered and resized. In addition to that, clicking on the event will open a custom dialog that enables editing the various properties.

### Delete events

Delete can be implemented inside the edit dialog with a button. It's just a matter of removing it from the data object. If a dialog is not shown on click, focused events can be deleted with the *backspace* and *delete* keys.

**Interested in adding recurrence configuration?** [Check out this example →](https://demo.mobiscroll.com/jquery/scheduler/recurring-event-add-edit-dialog)

## What this demo shows

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.
- **New event dialog** Creating an event opens a dialog with fields for title, description, all-day, start and end date selection, travel time, event color, and busy or free status.
- **Date selection** The start and end inputs open a date picker calendar with range selection.
- **Cancel behavior** Clicking outside the dialog or pressing Cancel closes it and removes the temporary event from the scheduler.
- **Event editing** Clicking or tapping an existing event opens the same dialog in edit mode with the current values prefilled.
- **Editable properties** In edit mode, the event details and event color can be changed before saving.
- **Save and close behavior** Clicking outside the dialog or pressing Cancel closes the editor without applying changes, while Save updates the event.
- **Delete flow** The edit dialog includes a Delete event action that removes the event from the scheduler.
- **Undo feedback** After deletion, a centered bottom toast appears with an Undo action so the deleted event can be restored.
- **Responsive behavior** The dialog adapts to screen size and device type, using touch-optimized controls such as scrollers on smaller or touch devices.
- **Mobile presentation** On smaller screens, the dialog is shown as a sheet instead of a popover.

## Best for

- **Weekly event management** Managing create, read, update, and delete workflows in a week-based scheduler view.
- **General scheduling** Applications where users need to add, edit, and remove events directly from the scheduler.
- **Mixed event types** Schedulers that need to handle single-day, multi-day, all-day, and timed events in the same interface.
- **Responsive scheduling UIs** Products that need the same event management flow to work well on desktop and touch devices.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option
- [`setOptions`](https://mobiscroll.com/docs/jquery/datepicker/api#method-setOptions) - method
- [`controls`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-controls) - option
- [`responsive`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-responsive) - option
- [`touchUi`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-touchUi) - option
- [`setOptions`](https://mobiscroll.com/docs/jquery/popup/api#method-setOptions) - method
- [`anchor`](https://mobiscroll.com/docs/jquery/popup/api#opt-anchor) - option
- [`headerText`](https://mobiscroll.com/docs/jquery/popup/api#opt-headerText) - option
- [`buttons`](https://mobiscroll.com/docs/jquery/popup/api#opt-buttons) - option
- [`updateEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-updateEvent) - method
- [`navigateToEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-navigateToEvent) - method
- [`close`](https://mobiscroll.com/docs/jquery/popup/api#method-close) - method
- [`cssClass`](https://mobiscroll.com/docs/jquery/popup/api#opt-cssClass) - option
- [`onClose`](https://mobiscroll.com/docs/jquery/popup/api#event-onClose) - event
- [`removeEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-removeEvent) - method
- [`open`](https://mobiscroll.com/docs/jquery/popup/api#method-open) - method
- [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option
- [`onEventClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventClick) - event
- [`onEventCreated`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventCreated) - event
- [`onEventDeleted`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventDeleted) - event
- [`addEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-addEvent) - method
- [`select`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-select) - option
- [`startInput`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-startInput) - option
- [`endInput`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-endInput) - option
- [`showRangeLabels`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-showRangeLabels) - option
- [`onChange`](https://mobiscroll.com/docs/jquery/datepicker/api#event-onChange) - event
- [`display`](https://mobiscroll.com/docs/jquery/popup/api#opt-display) - option
- [`showArrow`](https://mobiscroll.com/docs/jquery/popup/api#opt-showArrow) - option
- [`showOverlay`](https://mobiscroll.com/docs/jquery/popup/api#opt-showOverlay) - option
- [`responsive`](https://mobiscroll.com/docs/jquery/popup/api#opt-responsive) - option
- [`fullScreen`](https://mobiscroll.com/docs/jquery/popup/api#opt-fullScreen) - option
- [`scrollLock`](https://mobiscroll.com/docs/jquery/popup/api#opt-scrollLock) - option
- [`width`](https://mobiscroll.com/docs/jquery/popup/api#opt-width) - option
- [`touchUi`](https://mobiscroll.com/docs/jquery/popup/api#opt-touchUi) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  function toggleDatetimePicker(allDay) {
    // Toggle between date and datetime picker
    eventStartEndPicker.setOptions({
      controls: allDay ? ['date'] : ['datetime'],
      responsive: allDay
        ? { medium: { controls: ['calendar'], touchUi: false } }
        : { medium: { controls: ['calendar', 'time'], touchUi: false } },
    });
  }

  function toggleTravelTime(allDay) {
    if (allDay) {
      $timeGroup.remove();
    } else {
      $timeGroupParent.append($timeGroup);
    }
  }

  // Fills the popup with the event's data
  function fillPopup(event) {
    // Load event properties
    eventId = event.id;
    eventTitle = event.title || '';
    eventDescription = event.description || '';
    eventAllDay = event.allDay;
    eventStart = event.start;
    eventEnd = event.end;
    eventBuffer = event.bufferBefore || 0;
    eventColor = event.color || '';
    eventStatus = event.free;

    // Set event fields
    $eventTitle.mobiscroll('getInst').value = eventTitle;
    $eventDescription.mobiscroll('getInst').value = eventDescription;
    $eventAllDay.mobiscroll('getInst').checked = eventAllDay;
    eventStartEndPicker.setVal([eventStart, eventEnd]);
    $eventBuffer.val(eventBuffer);
    highlightColor(eventColor);
    updateColorPreview(eventColor);
    if (eventStatus) {
      $eventStatusFree.mobiscroll('getInst').checked = true;
    } else {
      $eventStatusBusy.mobiscroll('getInst').checked = true;
    }
    toggleDatetimePicker(eventAllDay);
    toggleTravelTime(eventAllDay);
  }

  function getEventData() {
    return {
      id: eventId,
      title: eventTitle,
      description: eventDescription,
      allDay: eventAllDay,
      start: eventStart,
      end: eventEnd,
      bufferBefore: eventBuffer,
      color: eventColor,
      free: eventStatus,
    };
  }

  function createAddPopup(event, target) {
    var success = false;

    // Hide delete button inside add popup
    $eventDeleteButton.parent().hide();

    // Set popup header text and buttons for adding
    addEditPopup.setOptions({
      anchor: target,
      headerText: 'New event',
      buttons: [
        'cancel',
        {
          text: 'Add',
          keyCode: 'enter',
          handler: function () {
            var newEvent = getEventData();
            calendar.updateEvent(newEvent);
            calendar.navigateToEvent(newEvent);
            success = true;
            addEditPopup.close();
          },
          cssClass: 'mbsc-popup-button-primary',
        },
      ],
      onClose: function () {
        // Remove event if popup is cancelled
        if (!success) {
          calendar.removeEvent(event);
        }
      },
    });

    fillPopup(event);
    addEditPopup.open();
  }

  function createEditPopup(event, target) {
    // Show delete button inside edit popup
    $eventDeleteButton.parent().show();

    editedEvent = event;

    // Set popup header text and buttons
    addEditPopup.setOptions({
      headerText: 'Edit event',
      anchor: target,
      buttons: [
        'cancel',
        {
          text: 'Save',
          keyCode: 'enter',
          handler: function () {
            var updatedEvent = getEventData();
            calendar.updateEvent(updatedEvent);
            calendar.navigateToEvent(updatedEvent);
            addEditPopup.close();
          },
          cssClass: 'mbsc-popup-button-primary',
        },
      ],
    });

    fillPopup(event);
    addEditPopup.open();
  }

  function highlightColor(color) {
    $('.mds-crud-color-value').removeClass('mds-crud-color-value-selected');
    $('.mds-crud-color-value[data-value="' + color + '"]').addClass('mds-crud-color-value-selected');
  }

  function updateColorPreview(color) {
    $colorPreview.css('background', color || '');
  }

  function applySelectedColor(color) {
    eventColor = color;
    updateColorPreview(color);
    eventColorPicker.close();
  }

  var editedEvent;
  var selectedColor;

  var eventId;
  var eventTitle;
  var eventDescription;
  var eventAllDay;
  var eventStart;
  var eventEnd;
  var eventBuffer;
  var eventColor;
  var eventStatus;

  var $eventTitle = $('#crud-popup-event-title');
  var $eventDescription = $('#crud-popup-event-desc');
  var $eventAllDay = $('#crud-popup-event-all-day');
  var $eventBuffer = $('#crud-popup-event-buffer');
  var $eventColor = $('#crud-popup-event-color');
  var $colorPreview = $('#crud-popup-event-color-preview');
  var $eventStatusBusy = $('#crud-popup-event-status-busy');
  var $eventStatusFree = $('#crud-popup-event-status-free');
  var $eventDeleteButton = $('#crud-popup-event-delete');
  var $timeGroup = $('#crud-popup-time-group');
  var $timeGroupParent = $timeGroup.parent();

  var myEvents = [
    {
      id: 1,
      start: '2026-10-08T13:00',
      end: '2026-10-08T13:45',
      title: "Lunch @ Butcher's",
      description: '',
      allDay: false,
      bufferBefore: 15,
      free: true,
      color: '#009788',
    },
    {
      id: 2,
      start: '2026-10-26T15:00',
      end: '2026-10-26T16:00',
      title: 'Conference',
      description: '',
      allDay: false,
      bufferBefore: 30,
      free: false,
      color: '#ff9900',
    },
    {
      id: 3,
      start: '2026-10-25T18:00',
      end: '2026-10-25T22:00',
      title: 'Site Visit',
      description: '',
      allDay: false,
      bufferBefore: 60,
      free: true,
      color: '#3f51b5',
    },
    {
      id: 4,
      start: '2026-10-27T10:30',
      end: '2026-10-27T11:30',
      title: 'Stakeholder mtg.',
      description: '',
      allDay: false,
      free: false,
      color: '#f44437',
    },
  ];

  // Init the event calendar
  var calendar = $('#demo-crud-event-calendar')
    .mobiscroll()
    .eventcalendar({
      clickToCreate: 'double',
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      view: {
        scheduler: { type: 'week' },
      },
      data: myEvents,
      onEventClick: function (args) {
        createEditPopup(args.event, args.domEvent.currentTarget);
      },
      onEventCreated: function (args) {
        createAddPopup(args.event, args.target);
      },
      onEventDeleted: function (args) {
        mobiscroll.snackbar({
          button: {
            action: function () {
              calendar.addEvent(args.event);
            },
            text: 'Undo',
          },
          message: 'Event deleted',
        });
      },
    })
    .mobiscroll('getInst');

  // Init event start/end date picker
  var eventStartEndPicker = $('#crud-popup-event-dates')
    .mobiscroll()
    .datepicker({
      controls: ['date'],
      select: 'range',
      startInput: '#crud-popup-event-start',
      endInput: '#crud-popup-event-end',
      showRangeLabels: false,
      touchUi: true,
      responsive: { medium: { touchUi: false } },
      onChange: function (args) {
        var dates = args.value;
        eventStart = dates[0];
        eventEnd = dates[1];
      },
    })
    .mobiscroll('getInst');

  // Init event color picker
  var eventColorPicker = $('#crud-color-picker-popup')
    .mobiscroll()
    .popup({
      display: 'bottom',
      contentPadding: false,
      showArrow: false,
      showOverlay: false,
      buttons: [
        'cancel',
        {
          text: 'Set',
          keyCode: 'enter',
          handler: function () {
            applySelectedColor(selectedColor);
          },
          cssClass: 'mbsc-popup-button-primary',
        },
      ],
      responsive: {
        medium: {
          display: 'anchored',
          anchor: $eventColor[0],
          buttons: [],
        },
      },
    })
    .mobiscroll('getInst');

  var addEditPopup = $('#crud-add-edit-popup')
    .mobiscroll()
    .popup({
      display: 'bottom',
      contentPadding: false,
      fullScreen: true,
      scrollLock: false,
      responsive: {
        medium: {
          display: 'anchored',
          width: 400,
          fullScreen: false,
          touchUi: false,
        },
      },
    })
    .mobiscroll('getInst');

  // Attach event handlers

  $eventTitle.on('input', function () {
    eventTitle = this.value;
  });

  $eventDescription.on('change', function () {
    eventDescription = this.value;
  });

  $eventAllDay.on('change', function () {
    eventAllDay = this.checked;
    toggleDatetimePicker(eventAllDay);
    toggleTravelTime(eventAllDay);
  });

  $eventBuffer.on('change', function () {
    eventBuffer = +this.value;
  });

  $('.mds-crud-popup-event-status').on('change', function () {
    eventStatus = this.value === 'free';
  });

  $eventDeleteButton.on('click', function () {
    calendar.removeEvent(editedEvent);
    addEditPopup.close();

    mobiscroll.snackbar({
      button: {
        action: function () {
          calendar.addEvent(editedEvent);
        },
        text: 'Undo',
      },
      message: 'Event deleted',
    });
  });

  $eventColor.on('click', function () {
    highlightColor(eventColor || '');
    eventColorPicker.open();
  });

  $('.mds-crud-color-value').on('click', function (ev) {
    var color = $(ev.currentTarget).data('value');
    selectedColor = color;
    highlightColor(color);

    if (!eventColorPicker.s.buttons.length) {
      applySelectedColor(color);
    }
  });
});
```

### HTML

```html
<div id="demo-crud-event-calendar"></div>

<div style="display: none">
  <div id="crud-add-edit-popup">
    <div class="mbsc-form-group">
      <label>
        Title
        <input mbsc-input id="crud-popup-event-title" />
      </label>
      <label>
        Description
        <textarea mbsc-textarea id="crud-popup-event-desc"></textarea>
      </label>
    </div>
    <div class="mbsc-form-group">
      <div>
        <label>
          All-day
          <input mbsc-switch id="crud-popup-event-all-day" type="checkbox" />
        </label>
        <div id="crud-popup-event-dates"></div>
        <label>
          Starts
          <input mbsc-input id="crud-popup-event-start" />
        </label>
        <label>
          Ends
          <input mbsc-input id="crud-popup-event-end" />
        </label>
        <label id="crud-popup-time-group">
          <select data-label="Travel time" mbsc-dropdown id="crud-popup-event-buffer">
            <option value="0">None</option>
            <option value="5">5 minutes</option>
            <option value="15">15 minutes</option>
            <option value="30">30 minutes</option>
            <option value="60">1 hour</option>
            <option value="90">1.5 hours</option>
            <option value="120">2 hours</option>
          </select>
        </label>
      </div>
      <div id="crud-event-color-picker" class="mbsc-flex mds-crud-event-color-cont">
        <div class="mbsc-flex-1-0">Color</div>
        <div id="crud-popup-event-color">
          <div id="crud-popup-event-color-preview" class="mds-crud-selected-event-color"></div>
        </div>
      </div>
      <label>
        Show as busy
        <input id="crud-popup-event-status-busy" class="mds-crud-popup-event-status" mbsc-segmented type="radio" name="event-status" value="busy" />
      </label>
      <label>
        Show as free
        <input id="crud-popup-event-status-free" class="mds-crud-popup-event-status" mbsc-segmented type="radio" name="event-status" value="free" />
      </label>
      <div class="mbsc-button-group">
        <button class="mbsc-button-block" id="crud-popup-event-delete" mbsc-button data-color="danger" data-variant="outline">
          Delete event
        </button>
      </div>
    </div>
  </div>

  <div id="crud-color-picker-popup">
    <div class="mbsc-flex mds-crud-color-row">
      <div class="mds-crud-color-value" data-value="#ffeb3c">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" style="background: #ffeb3c"></div>
      </div>
      <div class="mds-crud-color-value" data-value="#ff9900">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" style="background: #ff9900"></div>
      </div>
      <div class="mds-crud-color-value" data-value="#f44437">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" style="background: #f44437"></div>
      </div>
      <div class="mds-crud-color-value" data-value="#ea1e63">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" style="background: #ea1e63"></div>
      </div>
      <div class="mds-crud-color-value" data-value="#9c26b0">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" style="background: #9c26b0"></div>
      </div>
    </div>
    <div class="mbsc-flex mds-crud-color-row">
      <div class="mds-crud-color-value" data-value="#3f51b5">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" style="background: #3f51b5"></div>
      </div>
      <div class="mds-crud-color-value" data-value="">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check"></div>
      </div>
      <div class="mds-crud-color-value" data-value="#009788">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" style="background: #009788"></div>
      </div>
      <div class="mds-crud-color-value" data-value="#4baf4f">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" style="background: #4baf4f"></div>
      </div>
      <div class="mds-crud-color-value" data-value="#7e5d4e">
        <div class="mds-crud-color mbsc-icon mbsc-font-icon mbsc-icon-material-check" style="background: #7e5d4e"></div>
      </div>
    </div>
  </div>
</div>
```

### CSS

```css
.mds-crud-event-color-cont {
  margin: 16px;
  align-items: center;
  cursor: pointer;
}

.mds-crud-selected-event-color {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  margin-right: 10px;
  margin-left: 240px;
  background: #5ac8fa;
}

.mds-crud-color-row {
  justify-content: center;
  margin: 5px;
}

.mds-crud-color {
  position: relative;
  min-width: 46px;
  min-height: 46px;
  margin: 2px;
  cursor: pointer;
  border-radius: 23px;
  background: #5ac8fa;
}

.mds-crud-color:before {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  color: #f7f7f7;
  font-size: 20px;
  text-shadow: 0 0 3px #000;
  display: none;
}

.mds-crud-color-value {
  padding: 3px;
  margin: 2px;
}

.mds-crud-color-value.mds-crud-color-value-selected,
.mds-crud-color-value:hover {
  box-shadow: inset 0 0 0 3px #007bff;
  border-radius: 48px;
}

.mds-crud-color-value.mds-crud-color-value-selected .mds-crud-color:before {
  display: block;
}
```

## Implementation notes

- Use `view: { scheduler: { type: 'week' } }`. Enable all four interaction modes: `clickToCreate` (React/Vue/Angular: `true`; JS/jQuery: `'double'`), `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`.
- Start with 4 sample events using `dyndatetime` offsets. Each event carries: `id`, `title`, `description`, `allDay`, `start`, `end`, `bufferBefore`, `free`, and `color`.
- Handle three calendar events: `onEventClick` → opens the edit popup; `onEventCreated` → opens the add popup (the event is already temporarily placed on the calendar); `onEventDeleted` → shows a snackbar ("Event deleted") with an "Undo" button that adds the event back.
- Maintain an `isEdit` flag and an `editedEvent` reference. A `fillPopup(event)` helper populates all form fields from the event object.
- **Edit mode**: set `isEdit = true`, store `editedEvent`, set popup anchor to the clicked element, call `fillPopup`, open with "Edit event" header and a "Save" button.
- **Add mode**: set `isEdit = false`, set `isSuccess = false`, call `fillPopup`, open with "New Event" header and an "Add" button.
- **On popup close (add mode, not confirmed)**: if `isEdit` is false and `isSuccess` is false, refresh the events array (spread trick) to strip the temporary event; for the imperative API, call `calendar.removeEvent(event)` in the popup's `onClose` handler.
- **"Add" button**: build the event from form state, append to the events array, set `isSuccess = true`, call `inst.navigateToEvent(newEvent)`, close popup.
- **"Save" button**: build updated event from form state, find by `id` and splice in place, call `inst.navigateToEvent(updatedEvent)`, close popup.
- **Popup form fields**: **Title** (`Input`), **Description** (`Textarea`), **All-day** (`Switch` - when on, switches the date picker to date-only and removes the Travel time row), **Start/End** (a `Datepicker` in range mode with `startInput`/`endInput`; controls are `['datetime']` normally, `['date']` for all-day), **Travel time** (`Dropdown` with None/5/15/30 min/1 h/1.5 h/2 h options mapped to `bufferBefore` in minutes - hidden when all-day), **Color** (a clickable row opening a color picker popup with 10 swatches), **Show as busy / free** (`SegmentedGroup` mapping to the `free` boolean), and a **Delete event** button (visible in edit mode only).
- The color picker is a separate `Popup` with 10 color swatches in 2 rows of 5. On desktop: clicking applies and closes immediately. On mobile: bottom-sheet with "Set"/"Cancel". The active swatch is highlighted.
- **Delete from popup**: filter the event from the array by `id`, close the popup, show a snackbar with "Undo".

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-jquery.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config jquery
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config jquery --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation

## Related demos

- Next: [Bulk Event Actions](https://demo.mobiscroll.com/jquery/scheduler/event-bulk-actions-edit-delete-update.md) - Add bulk event actions to JQuery Scheduler — select multiple events via shortcuts or select-all, apply bulk actions, and use right-click for per-event actions.