Add, Edit and Delete 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 the next example →
Download and try example

Demo

Loading the live demo

Preview in full screen

Add full event management to a event calendar — create events by drag or click, edit them in a custom dialog, and delete with undo.

Code

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

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) {
    timeGroupElm.remove();
  } else {
    timeGroupParent.appendChild(timeGroupElm);
  }
}

// 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
  mobiscroll.getInst(eventTitleElm).value = eventTitle;
  mobiscroll.getInst(eventDescriptionElm).value = eventDescription;
  mobiscroll.getInst(eventAllDayElm).checked = eventAllDay;
  eventStartEndPicker.setVal([eventStart, eventEnd]);
  mobiscroll.getInst(eventBufferElm).value = eventBuffer;
  highlightColor(eventColor);
  updateColorPreview(eventColor);
  if (eventStatus) {
    mobiscroll.getInst(eventStatusFreeElm).checked = true;
  } else {
    mobiscroll.getInst(eventStatusBusyElm).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
  eventDeleteButtonElm.parentElement.style.display = 'none';

  // 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(Object.assign({}, event, { allDay: false }));
  addEditPopup.open();
}

function createEditPopup(event, target) {
  // Show delete button inside edit popup
  eventDeleteButtonElm.parentElement.style.display = 'block';

  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) {
  document.querySelectorAll('.mds-crud-color-value').forEach(function (elm) {
    elm.classList.remove('mds-crud-color-value-selected');
  });
  document.querySelector('.mds-crud-color-value[data-value="' + color + '"]').classList.add('mds-crud-color-value-selected');
}

function updateColorPreview(color) {
  colorPreviewElm.style.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 eventTitleElm = document.getElementById('crud-popup-event-title');
var eventDescriptionElm = document.getElementById('crud-popup-event-desc');
var eventAllDayElm = document.getElementById('crud-popup-event-all-day');
var eventBufferElm = document.getElementById('crud-popup-event-buffer');
var eventColorElm = document.getElementById('crud-popup-event-color');
var colorPreviewElm = document.getElementById('crud-popup-event-color-preview');
var colorValueElms = document.querySelectorAll('.mds-crud-color-value');
var eventStatusBusyElm = document.getElementById('crud-popup-event-status-busy');
var eventStatusFreeElm = document.getElementById('crud-popup-event-status-free');
var eventDeleteButtonElm = document.getElementById('crud-popup-event-delete');
var timeGroupElm = document.getElementById('crud-popup-time-group');
var timeGroupParent = timeGroupElm.parentNode;

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-20T15:00',
    end: '2026-10-20T16:00',
    title: 'Conference',
    description: '',
    allDay: false,
    bufferBefore: 30,
    free: false,
    color: '#ff9900',
  },
  {
    id: 3,
    start: '2026-10-19T18:00',
    end: '2026-10-19T22:00',
    title: 'Site Visit',
    description: '',
    allDay: false,
    bufferBefore: 60,
    free: true,
    color: '#3f51b5',
  },
  {
    id: 4,
    start: '2026-10-21T10:30',
    end: '2026-10-21T11:30',
    title: 'Stakeholder mtg.',
    description: '',
    allDay: false,
    free: false,
    color: '#f44437',
  },
];

// Init the event calendar
var calendar = mobiscroll.eventcalendar('#demo-crud-event-calendar', {
  clickToCreate: 'double',
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  view: {
    calendar: { labels: true },
  },
  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',
    });
  },
});

// Init event start/end date picker
var eventStartEndPicker = mobiscroll.datepicker('#crud-popup-event-dates', {
  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];
  },
});

// Init event color picker
var eventColorPicker = mobiscroll.popup('#crud-color-picker-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: eventColorElm,
      buttons: [],
    },
  },
});

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

eventTitleElm.addEventListener('input', function (ev) {
  eventTitle = ev.target.value;
});

eventDescriptionElm.addEventListener('change', function (ev) {
  eventDescription = ev.target.value;
});

eventAllDayElm.addEventListener('change', function (ev) {
  eventAllDay = ev.target.checked;
  toggleDatetimePicker(eventAllDay);
  toggleTravelTime(eventAllDay);
});

eventBufferElm.addEventListener('change', function (ev) {
  eventBuffer = +ev.target.value;
});

document.querySelectorAll('.mds-crud-popup-event-status').forEach(function (elm) {
  elm.addEventListener('change', function (ev) {
    eventStatus = ev.target.value === 'free';
  });
});

eventDeleteButtonElm.addEventListener('click', function () {
  calendar.removeEvent(editedEvent);
  addEditPopup.close();

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

eventColorElm.addEventListener('click', function () {
  highlightColor(eventColor || '');
  eventColorPicker.open();
});

colorValueElms.forEach(function (elm) {
  elm.addEventListener('click', function () {
    var color = elm.getAttribute('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.