Javascript Popup Event creation modal Example

Use the popup to show a modal with an add/edit form for event creation and/or update. The popup can be easily set up to be shown right in the middle of the screen, top, bottom or anchored to the newly added event. Check out the different display modes and play around with the different configurations.

You have full control over what is shown within the popup. Use Mobiscroll form elements or any components that you are already using throughout your application.

Interested in exploring the event calendar? Check out these examples →

Download and try example

Preview in full screen

mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

var eventStatus = document.getElementById('demo-popup-status-busy');
var eventTitle = document.getElementById('demo-popup-event-title');
var eventDescription = document.getElementById('demo-popup-event-description');
var eventAllDay = document.getElementById('demo-popup-all-day');

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

var popup = mobiscroll.popup('#demo-add-event-popup', {
  width: 400,
  contentPadding: false,
  headerText: 'Add new event',
  display: 'center',
  buttons: [
    'cancel',
    {
      text: 'Add',
      keyCode: 'enter',
      handler: function () {
        var eventTimes = range.getVal();
        var newEvent = {
          title: eventTitle.value,
          description: eventDescription.value,
          allDay: eventAllDay.value,
          status: eventStatus.value,
          start: eventTimes[0],
          end: eventTimes[1] || eventTimes[0],
        };
        calendar.addEvent(newEvent);
        calendar.navigateToEvent(newEvent);
        mobiscroll.toast({
          message: 'Event added',
        });
        popup.close();
      },
      cssClass: 'mbsc-popup-button-primary',
    },
  ],
  showOverlay: false,
});

var range = mobiscroll.datepicker('#demo-event-date', {
  controls: ['calendar', 'time'],
  select: 'range',
  startInput: '#demo-popup-start-input',
  endInput: '#demo-popup-end-input',
  display: 'anchored',
  touchUi: true,
  showOverlay: false,
  showRangeLabels: false,
});

var calendar = mobiscroll.eventcalendar('#demo-calendar', {
  view: {
    calendar: { labels: true },
  },
  data: myData,
});

document.getElementById('demo-popup-add-btn').addEventListener('click', function () {
  range.setVal([new Date(), new Date()]);
  mobiscroll.getInst(eventTitle).value = 'New Event';
  mobiscroll.getInst(eventDescription).value = '';
  mobiscroll.getInst(eventAllDay).checked = false;
  mobiscroll.getInst(eventStatus).checked = true;
  popup.open();
});

eventAllDay.addEventListener('change', function () {
  var checked = this.checked;
  // Change range settings based on the allDay
  range.setOptions({
    controls: checked ? ['calendar'] : ['calendar', 'time'],
  });
});

<div mbsc-page class="mds-full-height">
  <div class="mds-full-height mbsc-flex-col">
    <div class="mbsc-button-group-block">
      <button mbsc-button id="demo-popup-add-btn">Add new event</button>
    </div>
    <div style="display: none">
      <div id="demo-add-event-popup">
        <div class="mbsc-form-group">
          <label>
            Title
            <input mbsc-input id="demo-popup-event-title">
          </label>
          <label>
            Description
              <input mbsc-input id="demo-popup-event-description">
          </label>
        </div>
        <div class="mbsc-form-group">
          <label>
            All-day
            <input mbsc-switch type="checkbox" id="demo-popup-all-day"/>
          </label>
          <label>
            Starts
            <input mbsc-input id="demo-popup-start-input" />
          </label>
          <label>
            Ends
            <input mbsc-input id="demo-popup-end-input" />
          </label>
        </div>
          <div class="mbsc-form-group">
            <label>
              Show as busy
              <input id="demo-popup-status-busy" mbsc-segmented type="radio" name="event-status" value="busy">
            </label>
            <label>
              Show as free
              <input id="demo-popup-status-free" mbsc-segmented type="radio" name="event-status" value="free">
            </label>
          </div>
        </div>
      <div id="demo-event-date"></div>
    </div>
    <div id="demo-calendar" class="mbsc-flex-1-1"></div>
  </div>
</div>