Appointment Booking
Book single or multiple appointments depending on the use-case or set up recurring date and time selection. Limit the available dates with the min and max options. Make dates un-selectable with the invalid option. Load pricing, available spots on demand and show it as labels that help people book the appointment.
The calendar can be displayed inline with one or more months or linked to an input. Learn how to initialize the calendar.
Looking for flight or hotel booking? Check out the range picker →
Demo
Single date selection
For enhanced validation set min and max dates. In addition to that disable invalid days by passing them to the invalid option.
If you need to show additional information, use the labels option and pass prices or availability. Invalids and things like pricing can be set on-load or on-demand in the
onPageLoading
lifecycle event.
htmlhtml<mbsc-datepicker
display="inline"
[controls]="['calendar']"
[min]="min"
[max]="max"
[labels]="singleLabels"
[invalid]="singleInvalid"
(onPageLoading)="onPageLoading($event)">
</mbsc-datepicker>
tsmin = '2026-10-25T00:00';
max = '2027-04-25T00:00';
single: Date | undefined;
singleLabels = [];
singleInvalid = [];
onPageLoading(event: any): void {
this.getPrices(event.firstDay, (bookings: any) => {
this.singleLabels = bookings.labels;
this.singleInvalid = bookings.invalid;
});
}
getPrices(date: any, callback: any): void {
const invalid: any = [];
const labels: any = [];
this.http.jsonp('//trial.mobiscroll.com/getprices/?year=' + date.getFullYear() + '&month=' + date.getMonth(), 'callback').subscribe((bookings: any) => {
for (var i = 0; i < bookings.length; ++i) {
const booking = bookings[i];
const d = new Date(booking.d);
if (booking.nr > 0) {
labels.push({
start: d,
title: booking.nr + ' SPOTS',
textColor: '#e1528f'
});
} else {
invalid.push(d);
}
}
callback({ labels, invalid });
});
}
Booking a date and time
Use a calendar in combination with a time picker or timegrid. Dynamically filter the time grid based on availability and add labels to the dates to inform users of free spots.
html<mbsc-datepicker
display="inline"
minTime="08:00"
maxTime="19:59"
[controls]="['calendar', 'timegrid']"
[min]="2026-10-25T00:00"
[max]="2027-04-25T00:00"
[stepMinute]="60"
[labels]="myLabels"
[invalid]="myInvalid">
</mbsc-datepicker>
ts// example for today's labels and invalids
myLabels = [{
start: '
Booking multiple appointments
For multiple event booking set the selectMultiple option to 'true'. min, max, invalid are essential for a great UX and labels can be used for showing extra information about available spots.
html<mbsc-datepicker
display="inline"
[controls]="['calendar']"
[min]="min"
[max]="max"
[labels]="multipleLabels"
[invalid]="multipleInvalid"
[selectMultiple]="true"
(onPageLoading)="onPageLoading($event)">
</mbsc-datepicker>
tsmin = '2026-10-25T00:00';
max = '2027-04-25T00:00';
multiple = [
'2026-10-11T00:00',
'2026-10-16T00:00',
'2026-10-17T00:00'
];
multipleLabels = [];
multipleInvalid = [];
onPageLoading(event: any): void {
this.getBookings(event.firstDay, (bookings: any) => {
this.multipleLabels = bookings.labels;
this.multipleInvalid = bookings.invalid;
});
}
getBookings(date: any, callback: any): void {
const invalid: any = [];
const labels: any = [];
this.http.jsonp('//trial.mobiscroll.com/getbookings/?year=' + date.getFullYear() + '&month=' + date.getMonth(), 'callback').subscribe((bookings: any) => {
for (const booking of bookings) {
const d = new Date(booking.d);
if (booking.nr > 0) {
labels.push({
start: d,
title: booking.nr + ' SPOTS',
textColor: '#e1528f'
});
} else {
invalid.push(d);
}
}
callback({ labels, invalid });
});
}
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { MbscDatepickerOptions, MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const minDate = '2026-10-25T00:00';
const maxDate = '2027-04-25T00:00';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [MbscModule, CommonModule],
})
export class AppComponent {
constructor(private http: HttpClient) {}
multiple = ['2026-10-11T00:00', '2026-10-16T00:00', '2026-10-17T00:00'];
singleLabels = [];
singleInvalid = [];
datetimeLabels = [];
datetimeInvalid = [];
multipleLabels = [];
multipleInvalid = [];
singleSettings: MbscDatepickerOptions = {
display: 'inline',
controls: ['calendar'],
min: minDate,
max: maxDate,
pages: 'auto',
onPageLoading: (args) => {
this.getPrices(args.firstDay, (bookings: any) => {
this.singleLabels = bookings.labels;
this.singleInvalid = bookings.invalid;
});
},
};
datetimeSettings: MbscDatepickerOptions = {
display: 'inline',
controls: ['calendar', 'timegrid'],
min: minDate,
max: maxDate,
minTime: '08:00',
maxTime: '19:59',
stepMinute: 60,
onPageLoading: (args) => {
this.getDatetimes(args.firstDay, (bookings: any) => {
this.datetimeLabels = bookings.labels;
this.datetimeInvalid = bookings.invalid;
});
},
};
multipleSettings: MbscDatepickerOptions = {
display: 'inline',
controls: ['calendar'],
min: minDate,
max: maxDate,
pages: 'auto',
selectMultiple: true,
onPageLoading: (args) => {
this.getBookings(args.firstDay, (bookings: any) => {
this.multipleLabels = bookings.labels;
this.multipleInvalid = bookings.invalid;
});
},
};
getPrices(d: Date, callback: any): void {
const myInvalid: any = [];
const myLabels: any = [];
const y = d.getFullYear();
const m = d.getMonth();
this.http.jsonp('https://trial.mobiscroll.com/getprices/?year=' + y + '&month=' + m, 'callback').subscribe((bookings: any) => {
for (const booking of bookings) {
const date = new Date(booking.d);
if (booking.price > 0) {
myLabels.push({
start: date,
title: '$' + booking.price,
textColor: '#e1528f',
});
} else {
myInvalid.push(date);
}
}
callback({ labels: myLabels, invalid: myInvalid });
});
}
getDatetimes(d: Date, callback: any): void {
let myInvalid: any = [];
const myLabels: any = [];
const y = d.getFullYear();
const m = d.getMonth();
this.http.jsonp('https://trial.mobiscroll.com/getbookingtime/?year=' + y + '&month=' + m, 'callback').subscribe((bookings: any) => {
for (const booking of bookings) {
const date = new Date(booking.d);
if (booking.nr > 0) {
myLabels.push({
start: date,
title: booking.nr + ' SPOTS',
textColor: '#e1528f',
});
myInvalid = [...myInvalid, ...booking.invalid];
} else {
myInvalid.push(date);
}
}
callback({ labels: myLabels, invalid: myInvalid });
});
}
getBookings(d: Date, callback: any): void {
const myInvalid: any = [];
const myLabels: any = [];
const y = d.getFullYear();
const m = d.getMonth();
this.http.jsonp('https://trial.mobiscroll.com/getbookings/?year=' + y + '&month=' + m, 'callback').subscribe((bookings: any) => {
for (const booking of bookings) {
const date = new Date(booking.d);
if (booking.nr > 0) {
myLabels.push({
start: date,
title: booking.nr + ' SPOTS',
textColor: '#e1528f',
});
} else {
myInvalid.push(date);
}
}
callback({ labels: myLabels, invalid: myInvalid });
});
}
}
<mbsc-page>
<div class="dms-calendar-booking">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Single date & appointment booking</div>
<mbsc-datepicker [options]="singleSettings" [labels]="singleLabels" [invalid]="singleInvalid"></mbsc-datepicker>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Select date & time</div>
<mbsc-datepicker [options]="datetimeSettings" [labels]="datetimeLabels" [invalid]="datetimeInvalid"></mbsc-datepicker>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Booking multiple appointments</div>
<mbsc-datepicker [options]="multipleSettings" [labels]="multipleLabels" [invalid]="multipleInvalid"></mbsc-datepicker>
</div>
</div>
</mbsc-page>
.md-calendar-booking .mbsc-calendar-text {
text-align: center;
}
.md-calendar-booking .booking-datetime .mbsc-datepicker-tab-calendar {
flex: 1 1 0;
min-width: 300px;
}
.md-calendar-booking .mbsc-timegrid-item {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.md-calendar-booking .mbsc-timegrid-container {
top: 30px;
}