Doctors Availability
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: localeEn Selecting the locale loads the localized settings and the translated UI text.
Doctors Availability
You can tailor the scheduler to show availability per doctor using visual indicators in each column. Availability is marked with a green status track on the left side of each doctor's column, making open slots easy to spot and supporting quick scheduling decisions.
To create the visual indicator, we added extra resource columns with a narrow width, styled using a custom CSS class set via the cssClass property in the resource data. The availability track is shown using events placed on these columns, with their content hidden via schedulerEventTemplate option and resized responsively based on the narrow resource column width. Time ranges outside each doctor's working hours are disabled to reflect their actual schedule.
Demo
Code
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
MbscCalendarEvent,
MbscEventcalendarView,
MbscModule,
MbscResource,
Notifications,
setOptions ,
} from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' ',
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [Notifications],
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
constructor(private notify: Notifications) {}
myEvents: MbscCalendarEvent[] = [
{
id: 1,
resource: 2,
tooltip: 'Availability: 10:00 - 18:00',
start: '10:00',
end: '18:00',
recurring: { repeat: 'daily' },
type: 'availability',
editable: false,
},
{
id: 2,
resource: 4,
tooltip: 'Availability: 08:00 - 16:00',
start: '08:00',
end: '16:00',
recurring: { repeat: 'daily' },
type: 'availability',
editable: false,
},
{
id: 3,
resource: 6,
tooltip: 'Availability: 09:00 - 17:00',
start: '09:00',
end: '17:00',
recurring: { repeat: 'daily' },
type: 'availability',
editable: false,
},
{
id: 4,
resource: 8,
tooltip: 'Availability: 10:00 - 18:00',
start: '10:00',
end: '18:00',
recurring: { repeat: 'daily' },
type: 'availability',
editable: false,
},
// Showing partial data. Download full source.
];
myResources: MbscResource[] = [
{
id: 2,
color: 'rgb(40, 179, 114)',
cssClass: 'mds-healthcare-res-col-bar',
},
{
id: 1,
name: 'Dr. James Cole',
color: 'rgba(255, 204, 193)',
cssClass: 'mds-healthcare-res-col',
description: 'Injury Recovery Specialist',
img: 'https://img.mobiscroll.com/demos/m4.png',
},
{
id: 4,
color: 'rgb(40, 179, 114)',
eventCreation: false,
cssClass: 'mds-healthcare-res-col-bar',
},
{
id: 3,
name: 'Dr. Anna Hayes',
color: 'rgb(193, 221, 195)',
cssClass: 'mds-healthcare-res-col',
description: 'Sports Physiotherapist',
img: 'https://img.mobiscroll.com/demos/f3.png',
},
{
id: 6,
color: 'rgb(40, 179, 114)',
eventCreation: false,
cssClass: 'mds-healthcare-res-col-bar',
},
{
id: 5,
name: 'Dr. Mark Lewis',
color: 'rgb(134, 224, 193)',
cssClass: 'mds-healthcare-res-col',
description: 'Mobility Recovery Expert',
img: 'https://img.mobiscroll.com/demos/m3.png',
},
{
id: 8,
color: 'rgb(40, 179, 114)',
eventCreation: false,
cssClass: 'mds-healthcare-res-col-bar',
},
{
id: 7,
name: 'Dr. Emily Carter',
color: 'rgb(255, 193, 228)',
cssClass: 'mds-healthcare-res-col',
description: 'Chiropractic Specialist',
img: 'https://img.mobiscroll.com/demos/f1.png',
},
{
id: 10,
color: 'rgb(40, 179, 114)',
eventCreation: false,
cssClass: 'mds-healthcare-res-col-bar',
},
{
id: 9,
name: 'Dr. Robert Stone',
color: 'rgb(193, 204, 255)',
cssClass: 'mds-healthcare-res-col',
description: 'Orthopedic Surgeon',
img: 'https://img.mobiscroll.com/demos/m2.png',
},
{
id: 12,
color: 'rgb(40, 179, 114)',
eventCreation: false,
cssClass: 'mds-healthcare-res-col-bar',
},
{
id: 11,
name: 'Dr. Sophia Miller',
color: 'rgb(255, 223, 176)',
cssClass: 'mds-healthcare-res-col',
description: 'Sports Physiotherapist',
img: 'https://img.mobiscroll.com/demos/f2.png',
},
];
myInvalids: MbscCalendarEvent[] = [
{ resource: [1, 2], start: '00:00', end: '10:00', recurring: { repeat: 'daily' } },
{ resource: [1, 2], start: '18:00', end: '24:00', recurring: { repeat: 'daily' } },
{ resource: [3, 4], start: '00:00', end: '08:00', recurring: { repeat: 'daily' } },
{ resource: [3, 4], start: '16:00', end: '24:00', recurring: { repeat: 'daily' } },
{ resource: [5, 6], start: '00:00', end: '09:00', recurring: { repeat: 'daily' } },
{ resource: [5, 6], start: '17:00', end: '24:00', recurring: { repeat: 'daily' } },
{ resource: [7, 8], start: '00:00', end: '10:00', recurring: { repeat: 'daily' } },
{ resource: [7, 8], start: '18:00', end: '24:00', recurring: { repeat: 'daily' } },
{ resource: [9, 10], start: '00:00', end: '08:00', recurring: { repeat: 'daily' } },
{ resource: [9, 10], start: '16:00', end: '24:00', recurring: { repeat: 'daily' } },
{ resource: [11, 12], start: '00:00', end: '09:00', recurring: { repeat: 'daily' } },
{ resource: [11, 12], start: '17:00', end: '24:00', recurring: { repeat: 'daily' } },
];
myView: MbscEventcalendarView = {
scheduler: {
type: 'week',
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '18:00',
timeCellStep: 20,
timeLabelStep: 20,
allDay: false,
},
};
showToast(message: string) {
this.notify.toast({
message: message,
});
}
}
<mbsc-eventcalendar
class="mds-healthcare"
[data]="myEvents"
[dragTimeStep]="20"
[eventOverlap]="false"
groupBy="date"
[invalid]="myInvalids"
[resources]="myResources"
[view]="myView"
[schedulerEventContentTemplate]="eventTemplate"
[resourceTemplate]="resourceTemplate"
(onEventCreated)="showToast('Appointment created')"
(onEventDeleted)="showToast('Appointment deleted')"
(onEventUpdated)="showToast('Appointment updated')"
></mbsc-eventcalendar>
<ng-template #resourceTemplate let-resource>
<div *ngIf="resource.cssClass === 'mds-healthcare-res-col'" class="mbsc-flex">
<img class="mds-healthcare-res-avatar mbsc-flex-none" [alt]="resource.name" [src]="resource.img" />
<div class="mds-healthcare-res-cont mbsc-flex-1-1">
<div class="mds-healthcare-res-name">{{ resource.name }}</div>
<div class="mds-healthcare-res-desc">{{ resource.description }}</div>
</div>
</div>
</ng-template>
<ng-template #eventTemplate let-event>
<ng-container *ngIf="!event.original!.type">Patient: {{ event.title === 'New event' ? 'John Doe' : event.title }}</ng-container>
</ng-template>
.mds-healthcare .mbsc-schedule-time-col,
.mds-healthcare .mbsc-schedule-time-wrapper {
width: 80px;
}
.mds-healthcare .mbsc-schedule-resource-title {
padding: 0;
}
.mds-healthcare-res-col {
width: 210px;
border: 0 !important;
}
/* Availability column */
.mds-healthcare-res-col-bar {
width: 14px;
}
.mds-healthcare-res-col-bar .mbsc-schedule-event {
margin-left: 5px;
}
.mds-healthcare-res-col-bar .mbsc-schedule-event-range {
display: none;
}
.mds-healthcare-res-col-bar .mbsc-schedule-event-bar {
width: 4px;
border-radius: 3px;
}
/* Resource header */
.mds-healthcare-res-cont {
padding: 10px;
font-weight: 500;
text-align: start;
}
.mds-healthcare-res-name {
font-size: 16px;
font-weight: 600;
line-height: 20px;
}
.mds-healthcare-res-desc {
font-size: 12px;
line-height: 14px;
margin-top: 4px;
}
.mds-healthcare-res-avatar {
height: 40px;
width: 40px;
margin: 10px 0;
}