CRUD Events

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 →
Download and try example

Demo

Loading the live demo

Preview in full screen

Add, edit, move, resize, and delete events on a Timeline — drag or double-click to create; set color, dates and all-day options in a dialog.

Code

View code on GitHub 
mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

$(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, resourceColor) {
    // 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 || resourceColor;
    eventStatus = event.free;
    eventResource = event.resource;

    // 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,
      resource: eventResource,
    };
  }

  function createAddPopup(event, target, color) {
    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, color);
    addEditPopup.open();
  }

  function createEditPopup(event, target, color) {
    // 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, color);
    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 eventResource;

  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-22T13:00',
      end: '2026-10-22T15:00',
      title: "Lunch @ Butcher's",
      description: '',
      allDay: false,
      bufferBefore: 15,
      free: true,
      resource: 3,
    },
    {
      id: 2,
      start: '2026-10-22T14:00',
      end: '2026-10-22T16:00',
      title: 'Conference',
      description: '',
      allDay: false,
      bufferBefore: 30,
      free: false,
      resource: 5,
    },
    {
      id: 3,
      start: '2026-10-22T18:00',
      end: '2026-10-22T22:00',
      title: 'Site Visit',
      description: '',
      allDay: false,
      bufferBefore: 60,
      free: true,
      resource: 4,
    },
    {
      id: 4,
      start: '2026-10-22T10:30',
      end: '2026-10-22T13:00',
      title: 'Stakeholder mtg.',
      description: '',
      allDay: false,
      free: false,
      resource: 1,
    },
  ];

  var myResources = [
    {
      id: 1,
      name: 'Resource A',
      color: '#ffeb3c',
    },
    {
      id: 2,
      name: 'Resource B',
      color: '#f44437',
    },
    {
      id: 3,
      name: 'Resource C',
      color: '#3f51b5',
    },
    {
      id: 4,
      name: 'Resource D',
      color: '#4baf4f',
    },
    {
      id: 5,
      name: 'Resource E',
      color: '#ff9900',
    },
  ];

  // Init the event calendar
  var calendar = $('#demo-crud-event-calendar')
    .mobiscroll()
    .eventcalendar({
      clickToCreate: 'double',
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      view: {
        timeline: { type: 'day' },
      },
      data: myEvents,
      resources: myResources,
      onEventClick: function (args) {
        createEditPopup(args.event, args.domEvent.currentTarget, args.resourceObj.color);
      },
      onEventCreated: function (args) {
        createAddPopup(args.event, args.target, args.resourceObj.color);
      },
      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 () {
    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);
    }
  });
});

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.