Angular Event calendar Property Booking Calendar Example

When keeping records of bookings, the event calendar with exact label displays can come in handy. The labels accurately mark the exact start (e.g. 14:00) and end times (e.g. 11:00) of bookings, consolidating all booking records in a single, clear view.

By combining the eventDisplay: 'exact' setting under the view option with customizable calendarEventContentTemplate , you can tailor the calendar to your specific needs. This allows you to create an efficient and user-friendly booking planning UI, ensuring all your bookings are easily managed and clearly displayed.

Get started with this example

Preview in full screen

Show property reservations in a monthly booking calendar — exact check-in/check-out time labels, color-coded by platform (Airbnb, Booking).

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscModule,
  MbscNewEventData,
  Notifications,
  setOptions ,
} from '@mobiscroll/angular';

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

const airBnB = 'https://img.mobiscroll.com/demos/air-bnb-icon.png';
const booking = 'https://img.mobiscroll.com/demos/booking-icon.png';
const makeMyTrip = 'https://img.mobiscroll.com/demos/make-my-trip-icon.png';

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

  myEvents: MbscCalendarEvent[] = [
    {
      start: '2026-10-05T12:00',
      end: '2026-10-08T12:00',
      icon: airBnB,
      title: 'Mary Smith',
      color: '#fffa61',
    },
    {
      start: '2026-10-16T12:00',
      end: '2026-10-22T12:00',
      title: 'James Johnson',
      icon: airBnB,
      color: '#fffa61',
    },
    {
      start: '2026-10-11T12:00',
      end: '2026-10-14T12:00',
      title: 'Patricia Williams',
      icon: airBnB,
      color: '#fffa61',
    },
    {
      start: '2026-10-26T12:00',
      end: '2026-10-28T12:00',
      title: 'Michael Brown',
      icon: airBnB,
      color: '#fffa61',
    },
    {
      start: '2026-11-02T12:00',
      end: '2026-11-03T12:00',
      title: 'Jennifer Jones',
      icon: booking,
      color: '#ff9999',
    },
    {
      start: '2026-10-23T12:00',
      end: '2026-10-26T12:00',
      title: 'Robert Garcia',
      icon: booking,
      color: '#ff9999',
    },
    {
      start: '2026-11-11T12:00',
      end: '2026-11-12T12:00',
      title: 'Linda Miller',
      icon: booking,
      color: '#ff9999',
    },
    {
      start: '2026-11-18T12:00',
      end: '2026-11-19T12:00',
      title: 'John Davis',
      icon: booking,
      color: '#ff9999',
    },
    {
      start: '2026-10-08T12:00',
      end: '2026-10-10T12:00',
      title: 'Elizabeth Rodriguez',
      icon: makeMyTrip,
      color: '#a0efaa',
    },
    {
      start: '2026-11-05T12:00',
      end: '2026-11-07T12:00',
      title: 'David Martinez',
      icon: makeMyTrip,
      color: '#a0efaa',
    },
    {
      start: '2026-11-08T12:00',
      end: '2026-11-10T12:00',
      title: 'Barbara Wilson',
      icon: makeMyTrip,
      color: '#a0efaa',
    },
    {
      start: '2026-10-14T12:00',
      end: '2026-10-15T12:00',
      title: 'William Anderson',
      icon: makeMyTrip,
      color: '#a0efaa',
    },
    {
      start: '2026-11-15T12:00',
      end: '2026-11-18T12:00',
      title: 'Susan Taylor',
      icon: makeMyTrip,
      color: '#a0efaa',
    },
    {
      start: '2026-10-29T12:00',
      end: '2026-11-01T12:00',
      title: 'Richard Jackson',
      icon: airBnB,
      color: '#fffa61',
    },
  ];

  myView: MbscEventcalendarView = {
    calendar: {
      type: 'month',
      eventDisplay: 'exact',
    },
  };

  handleDefaultEvent(args: MbscNewEventData) {
    const start = new Date(args.start.setHours(12));
    const end = new Date(args.start.getFullYear(), args.start.getMonth(), args.start.getDate() + 1, 12);
    return {
      title: 'New reservation',
      start,
      end,
    };
  }

  handleOverlap() {
    this.notify.toast({
      message: 'Reservations cannot overlap',
    });
  }
}

<mbsc-eventcalendar
  class="mds-booking-calendar"
  [data]="myEvents"
  [clickToCreate]="true"
  [dragToCreate]="true"
  [dragToMove]="true"
  [dragToResize]="true"
  [eventOverlap]="false"
  [extendDefaultEvent]="handleDefaultEvent"
  [view]="myView"
  [calendarEventContentTemplate]="customLabelContent"
  (onEventCreateFailed)="handleOverlap()"
  (onEventUpdateFailed)="handleOverlap()"
>
  <ng-template #customLabelContent let-label>
    <div *ngIf="label" class="mbsc-flex mds-booking-item mbsc-align-items-center">
      <img *ngIf="label.original.icon" draggable="false" class="mds-booking-icon" [src]="label.original.icon" alt="booking icon" />
      <span> {{label.title}} </span>
    </div>
  </ng-template>
</mbsc-eventcalendar>

.mds-booking-calendar .mbsc-calendar-day .mbsc-calendar-text {
  height: 30px;
  line-height: 30px;
  margin: 0 0.2em 0.2em 0.3em;
}

.mds-booking-item {
  font-size: 16px;
}

.mds-booking-icon {
  margin-right: 8px;
  width: 24px;
  height: 24px;
}

Property Booking Calendar

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session