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 →
Get started with this 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 
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MbscCalendarEvent,
  MbscDateType,
  MbscEventcalendar,
  MbscEventcalendarView,
  MbscEventClickEvent,
  MbscEventCreatedEvent,
  MbscModule,
  MbscPopup,
  MbscPopupButton,
  MbscPopupOptions,
  MbscResponsiveOptions,
  Notifications,
  setOptions ,
} from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  providers: [Notifications],
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
  constructor(private notify: Notifications) {}

  @ViewChild('calendar', { static: false })
  calendar!: MbscEventcalendar;

  @ViewChild('addEditPopup', { static: false })
  addEditPopup!: MbscPopup;

  @ViewChild('colorPicker', { static: false })
  colorPicker!: MbscPopup;

  eventId: string | number | undefined;
  eventTitle: string | undefined;
  eventDescription = '';
  eventAllDay = false;
  eventDates: MbscDateType[] = [];
  eventBuffer = 0;
  eventColor = '';
  eventStatus = false;

  selectedColor = '';
  statusValue = 'busy';
  editedEvent: MbscCalendarEvent | null = null;
  addEditPopupAnchor: HTMLElement | undefined;
  colorPickerAnchor: HTMLElement | undefined;
  isEdit = false;
  isSuccess = false;

  myView: MbscEventcalendarView = { calendar: { labels: true } };

  colors: string[] = ['#ffeb3c', '#ff9900', '#f44437', '#ea1e63', '#9c26b0', '#3f51b5', '', '#009788', '#4baf4f', '#7e5d4e'];

  myEvents: MbscCalendarEvent[] = [
    {
      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',
    },
  ];

  editButtons: (MbscPopupButton | 'ok' | 'close' | 'set' | 'cancel')[] = [
    'cancel',
    {
      text: 'Save',
      keyCode: 'enter',
      cssClass: 'mbsc-popup-button-primary',
      handler: () => {
        const updatedEvent: MbscCalendarEvent = this.getEventData();
        const index = this.myEvents.findIndex((x) => x.id === updatedEvent.id);
        const newEventList = [...this.myEvents];

        // Update event in the list
        newEventList.splice(index, 1, updatedEvent);
        this.myEvents = newEventList;

        this.calendar.navigateToEvent(updatedEvent);
        this.addEditPopup.close();
      },
    },
  ];

  addButtons: (MbscPopupButton | 'ok' | 'close' | 'set' | 'cancel')[] = [
    'cancel',
    {
      text: 'Add',
      keyCode: 'enter',
      cssClass: 'mbsc-popup-button-primary',
      handler: () => {
        const newEvent: MbscCalendarEvent = this.getEventData();

        // Add new event to the list
        this.myEvents = [...this.myEvents, newEvent];

        this.isSuccess = true;
        this.calendar.navigateToEvent(newEvent);
        this.addEditPopup.close();
      },
    },
  ];

  addEditPopupResponsive: MbscResponsiveOptions<MbscPopupOptions> = {
    medium: {
      display: 'anchored',
      width: 400,
      fullScreen: false,
      touchUi: false,
    },
  };

  colorPickerButtons: (MbscPopupButton | 'ok' | 'close' | 'set' | 'cancel')[] = [
    'cancel',
    {
      text: 'Set',
      keyCode: 'enter',
      handler: () => this.applySelectedColor(this.selectedColor),
      cssClass: 'mbsc-popup-button-primary',
    },
  ];

  colorPickerResponsive: MbscResponsiveOptions<MbscPopupOptions> = {
    medium: {
      display: 'anchored',
      buttons: [],
      touchUi: false,
    },
  };

  fillPopup(event: MbscCalendarEvent): void {
    this.eventId = event.id;
    this.eventTitle = event.title || '';
    this.eventDescription = event['description'] || '';
    this.eventAllDay = event.allDay!;
    this.eventDates = [event.start!, event.end!];
    this.eventBuffer = event.bufferBefore || 0;
    this.eventColor = event.color || '';
    this.eventStatus = event['free'] || false;
    this.statusValue = event['free'] ? 'free' : 'busy';
  }

  createEditPopup(event: MbscCalendarEvent, target: HTMLElement): void {
    this.isEdit = true;
    this.editedEvent = event;
    this.addEditPopupAnchor = target;
    this.fillPopup(event);
    this.addEditPopup.open();
  }

  createAddPopup(event: MbscCalendarEvent, target: HTMLElement): void {
    this.isSuccess = false;
    this.isEdit = false;
    this.editedEvent = event;
    this.addEditPopupAnchor = target;
    this.fillPopup({ ...event, allDay: false });
    this.addEditPopup.open();
  }

  getEventData(): MbscCalendarEvent {
    return {
      id: this.eventId,
      title: this.eventTitle,
      description: this.eventDescription,
      allDay: this.eventAllDay,
      start: this.eventDates[0],
      end: this.eventDates[1],
      bufferBefore: this.eventBuffer,
      color: this.eventColor,
      free: this.statusValue === 'free',
    };
  }

  handleAddEditPopupClose(): void {
    if (!this.isEdit && !this.isSuccess) {
      // Refresh the list, if add popup was canceled, to remove the temporary event
      this.myEvents = [...this.myEvents];
    }
  }

  handleEventClick(args: MbscEventClickEvent): void {
    this.createEditPopup(args.event, args.domEvent.currentTarget);
  }

  handleEventCreated(args: MbscEventCreatedEvent): void {
    setTimeout(() => {
      this.createAddPopup(args.event, args.target!);
    });
  }

  handleEventDeleted() {
    this.notify.snackbar({
      button: {
        action: () => {
          this.myEvents = [...this.myEvents, this.editedEvent!];
        },
        text: 'Undo',
      },
      message: 'Event deleted',
    });
  }

  handleDeleteButtonClick() {
    const filteredEvents = this.myEvents.filter((e) => e.id !== this.editedEvent!.id);
    this.myEvents = filteredEvents;
    this.addEditPopup.close();
    this.notify.snackbar({
      button: {
        action: () => {
          this.myEvents = [...this.myEvents, this.editedEvent!];
        },
        text: 'Undo',
      },
      message: 'Event deleted',
    });
  }

  handleEventColorClick(ev: MouseEvent): void {
    this.colorPickerAnchor = ev.currentTarget as HTMLElement;
    this.colorPicker.open();
  }

  handleColorChange(ev: MouseEvent): void {
    const color = (ev.currentTarget as HTMLDivElement).getAttribute('data-value') || '';
    this.eventColor = color;
    this.selectedColor = color;
    if (!this.colorPicker.s.buttons!.length) {
      this.applySelectedColor(color);
    }
  }

  applySelectedColor(color: string): void {
    this.eventColor = color;
    this.colorPicker.close();
  }
}

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.