Hide Resources
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.
Hide Resources
The scheduler can automatically hide non-working resource columns using the hideInvalidColumns property of view option.
The calendar is set to a weekly view (Monday to Friday, 8:00-20:00) and displays multiple doctors as resources, each with unique working days. Recurring invalids are used to mark specific weekdays when a doctor is unavailable, while static invalids indicate individual days off. As a result, only the columns for resources who are working on a given day are shown, making the schedule cleaner and easier to read. This approach is ideal for managing staff with varying shifts and availability.
Demo
Code
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarView, MbscModule, MbscResource, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
myView: MbscEventcalendarView = {
scheduler: {
type: 'week',
allDay: false,
startDay: 1,
endDay: 5,
startTime: '08:00',
endTime: '20:00',
hideInvalidColumns: true,
},
};
myEvents: MbscCalendarEvent[] = [
// Dr. Alice Johnson – Neurology
{ start: '2026-10-22T14:00', end: '2026-10-22T15:00', title: 'Migraine Consultation', resource: 1 },
{ start: '2026-10-22T16:00', end: '2026-10-22T17:00', title: 'Epilepsy Follow-up', resource: 1 },
{ start: '2026-10-23T11:00', end: '2026-10-23T12:00', title: 'Stroke Recovery Check', resource: 1 },
{ start: '2026-10-24T10:00', end: '2026-10-24T11:00', title: 'Multiple Sclerosis Review', resource: 1 },
{ start: '2026-10-24T14:00', end: '2026-10-24T16:00', title: 'Parkinson’s Management', resource: 1 },
{ start: '2026-10-25T09:00', end: '2026-10-25T11:00', title: 'Cognitive Decline Exam', resource: 1 },
{ start: '2026-10-25T11:30', end: '2026-10-25T13:00', title: 'Seizure Evaluation', resource: 1 },
{ start: '2026-10-25T15:00', end: '2026-10-25T17:00', title: 'Headache Treatment', resource: 1 },
{ start: '2026-10-26T15:00', end: '2026-10-26T16:00', title: 'Dementia Consultation', resource: 1 },
{ start: '2026-10-26T17:00', end: '2026-10-26T19:00', title: 'Sleep Disorder Exam', resource: 1 },
{ start: '2026-10-27T11:00', end: '2026-10-27T12:00', title: 'Balance Disorder Check', resource: 1 },
{ start: '2026-10-27T13:00', end: '2026-10-27T16:00', title: 'Nerve Pain Therapy', resource: 1 },
{ start: '2026-10-28T09:00', end: '2026-10-28T10:00', title: 'Follow-up Consultation', resource: 1 },
{ start: '2026-10-28T13:00', end: '2026-10-28T14:00', title: 'Brain MRI Review', resource: 1 },
{ start: '2026-10-29T15:00', end: '2026-10-29T17:00', title: 'Neuropathy Assessment', resource: 1 },
// Dr. Brian Smith – Pediatrics
{ start: '2026-10-21T09:00', end: '2026-10-21T10:00', title: 'Well-Child Checkup', resource: 2 },
{ start: '2026-10-21T12:00', end: '2026-10-21T13:00', title: 'Vaccination Visit', resource: 2 },
{ start: '2026-10-22T11:00', end: '2026-10-22T12:00', title: 'Asthma Follow-up', resource: 2 },
{ start: '2026-10-23T12:00', end: '2026-10-23T13:00', title: 'Ear Infection Exam', resource: 2 },
{ start: '2026-10-23T15:00', end: '2026-10-23T16:00', title: 'Growth & Nutrition Review', resource: 2 },
{ start: '2026-10-24T09:00', end: '2026-10-24T10:00', title: 'School Physical', resource: 2 },
{ start: '2026-10-24T13:00', end: '2026-10-24T14:00', title: 'Cough & Cold Symptoms', resource: 2 },
{ start: '2026-10-25T11:00', end: '2026-10-25T12:00', title: 'Developmental Check', resource: 2 },
{ start: '2026-10-25T13:00', end: '2026-10-25T14:00', title: 'Fever Consultation', resource: 2 },
{ start: '2026-10-26T11:00', end: '2026-10-26T12:00', title: 'Allergy Testing', resource: 2 },
{ start: '2026-10-26T09:00', end: '2026-10-26T10:00', title: 'Adolescent Counseling', resource: 2 },
{ start: '2026-10-27T12:00', end: '2026-10-27T14:00', title: 'Behavioral Concerns', resource: 2 },
{ start: '2026-10-27T10:00', end: '2026-10-27T11:00', title: 'Routine Checkup', resource: 2 },
{ start: '2026-10-28T15:00', end: '2026-10-28T17:00', title: 'Nutrition Counseling', resource: 2 },
{ start: '2026-10-28T18:00', end: '2026-10-28T20:00', title: 'Sports Physical', resource: 2 },
// Dr. Catherine Lee – Dermatology
{ start: '2026-10-19T10:00', end: '2026-10-19T11:00', title: 'Acne Treatment', resource: 3 },
{ start: '2026-10-20T15:00', end: '2026-10-20T16:00', title: 'Eczema Follow-up', resource: 3 },
{ start: '2026-10-21T18:00', end: '2026-10-21T19:00', title: 'Psoriasis Checkup', resource: 3 },
{ start: '2026-10-22T09:00', end: '2026-10-22T10:00', title: 'Skin Cancer Screening', resource: 3 },
{ start: '2026-10-22T13:00', end: '2026-10-22T14:00', title: 'Rosacea Consultation', resource: 3 },
{ start: '2026-10-23T10:00', end: '2026-10-23T11:30', title: 'Mole Removal', resource: 3 },
{ start: '2026-10-24T11:00', end: '2026-10-24T12:00', title: 'Wart Removal', resource: 3 },
{ start: '2026-10-25T15:30', end: '2026-10-25T16:30', title: 'Hair Loss Evaluation', resource: 3 },
{ start: '2026-10-25T18:00', end: '2026-10-25T20:00', title: 'Scar Treatment', resource: 3 },
{ start: '2026-10-26T14:00', end: '2026-10-26T15:00', title: 'Skin Allergy Test', resource: 3 },
{ start: '2026-10-26T16:00', end: '2026-10-26T17:00', title: 'Rash Examination', resource: 3 },
{ start: '2026-10-28T14:00', end: '2026-10-28T15:00', title: 'Cosmetic Consultation', resource: 3 },
{ start: '2026-10-28T16:00', end: '2026-10-28T17:00', title: 'Pigmentation Check', resource: 3 },
{ start: '2026-10-29T09:00', end: '2026-10-29T10:00', title: 'Routine Skin Exam', resource: 3 },
{ start: '2026-10-29T12:00', end: '2026-10-29T15:00', title: 'Laser Therapy', resource: 3 },
// Dr. Daniel Kim – Cardiology
{ start: '2026-10-21T09:00', end: '2026-10-21T11:00', title: 'Heart Disease Screening', resource: 4 },
{ start: '2026-10-22T16:00', end: '2026-10-22T17:00', title: 'Blood Pressure Check', resource: 4 },
{ start: '2026-10-22T18:00', end: '2026-10-22T19:00', title: 'Arrhythmia Consultation', resource: 4 },
{ start: '2026-10-23T14:00', end: '2026-10-23T17:00', title: 'Cardiac Rehab Session', resource: 4 },
{ start: '2026-10-24T10:00', end: '2026-10-24T11:00', title: 'Cholesterol Review', resource: 4 },
{ start: '2026-10-24T12:00', end: '2026-10-24T14:00', title: 'Heart Failure Management', resource: 4 },
{ start: '2026-10-25T15:00', end: '2026-10-25T16:00', title: 'Palpitation Assessment', resource: 4 },
{ start: '2026-10-25T17:00', end: '2026-10-25T18:00', title: 'Post-Stent Checkup', resource: 4 },
{ start: '2026-10-26T11:00', end: '2026-10-26T12:00', title: 'Cardiac Risk Counseling', resource: 4 },
{ start: '2026-10-26T13:00', end: '2026-10-26T15:00', title: 'ECG Review', resource: 4 },
{ start: '2026-10-27T14:00', end: '2026-10-27T15:00', title: 'Heart Surgery Follow-up', resource: 4 },
{ start: '2026-10-28T08:30', end: '2026-10-28T10:00', title: 'Angina Consultation', resource: 4 },
{ start: '2026-10-28T12:00', end: '2026-10-28T13:00', title: 'Cholesterol Counseling', resource: 4 },
{ start: '2026-10-29T15:00', end: '2026-10-29T16:00', title: 'Cardio Exercise Planning', resource: 4 },
{ start: '2026-10-30T09:00', end: '2026-10-30T10:00', title: 'Routine Heart Check', resource: 4 },
// Dr. Eva Martinez – Orthopedics
{ start: '2026-10-20T09:00', end: '2026-10-20T11:00', title: 'Knee Pain Evaluation', resource: 5 },
{ start: '2026-10-22T11:00', end: '2026-10-22T12:00', title: 'Fracture Checkup', resource: 5 },
{ start: '2026-10-22T13:00', end: '2026-10-22T14:00', title: 'Hip Replacement Follow-up', resource: 5 },
{ start: '2026-10-23T10:00', end: '2026-10-23T12:00', title: 'Back Pain Management', resource: 5 },
{ start: '2026-10-23T13:00', end: '2026-10-23T15:00', title: 'Sports Injury Consultation', resource: 5 },
{ start: '2026-10-24T14:00', end: '2026-10-24T15:00', title: 'Shoulder Injury Exam', resource: 5 },
{ start: '2026-10-24T16:00', end: '2026-10-24T18:00', title: 'Arthritis Treatment', resource: 5 },
{ start: '2026-10-25T11:00', end: '2026-10-25T12:30', title: 'Joint Pain Assessment', resource: 5 },
{ start: '2026-10-25T13:00', end: '2026-10-25T14:00', title: 'Spinal Checkup', resource: 5 },
{ start: '2026-10-27T08:00', end: '2026-10-27T10:00', title: 'Physical Therapy Session', resource: 5 },
{ start: '2026-10-27T11:00', end: '2026-10-27T12:30', title: 'Post-Surgery Review', resource: 5 },
{ start: '2026-10-28T11:00', end: '2026-10-28T12:00', title: 'Hip Pain Consultation', resource: 5 },
{ start: '2026-10-28T13:00', end: '2026-10-28T14:00', title: 'Hand Injury Check', resource: 5 },
{ start: '2026-10-29T13:00', end: '2026-10-29T14:00', title: 'Orthopedic Follow-up', resource: 5 },
{ start: '2026-10-29T15:00', end: '2026-10-29T18:00', title: 'Sports Rehab Therapy', resource: 5 },
];
myResources: MbscResource[] = [
{
id: 1,
name: 'Dr. Alice Johnson',
specialty: 'Neurology',
bgColor: '#d392e780',
textColor: '#1b012280',
img: 'https://img.mobiscroll.com/demos/f1.png',
},
{
id: 2,
name: 'Dr. Brian Smith',
specialty: 'Pediatrics',
bgColor: '#69a9ff80',
textColor: '#01285c80',
img: 'https://img.mobiscroll.com/demos/m1.png',
},
{
id: 3,
name: 'Dr. Catherine Lee',
specialty: 'Dermatology',
bgColor: '#71c17680',
textColor: '#02250580',
img: 'https://img.mobiscroll.com/demos/f2.png',
},
{
id: 4,
name: 'Dr. Daniel Kim',
specialty: 'Cardiology',
bgColor: '#bf4d4d80',
textColor: '#15010180',
img: 'https://img.mobiscroll.com/demos/m2.png',
},
{
id: 5,
name: 'Dr. Eva Martinez',
specialty: 'Orthopedics',
bgColor: '#f0eb8980',
textColor: '#1c1b0180',
img: 'https://img.mobiscroll.com/demos/f1.png',
},
];
myColors: MbscCalendarEvent[] = [
{
resource: 1,
start: '08:00',
end: '20:00',
recurring: {
repeat: 'daily',
},
background: '#fadaff4d',
},
{
resource: 2,
start: '08:00',
end: '20:00',
recurring: {
repeat: 'daily',
},
background: '#bfdeff4d',
},
{
resource: 3,
start: '08:00',
end: '20:00',
recurring: {
repeat: 'daily',
},
background: '#e1ffd64d',
},
{
resource: 4,
start: '08:00',
end: '20:00',
recurring: {
repeat: 'daily',
},
background: '#fac4c44d',
},
{
resource: 5,
start: '08:00',
end: '20:00',
recurring: {
repeat: 'daily',
},
background: '#ffffd04d',
},
];
myInvalid: MbscCalendarEvent[] = [
{
recurring: { repeat: 'weekly', weekDays: 'MO,WE,FR' },
resource: 1,
},
{
recurring: { repeat: 'weekly', weekDays: 'MO' },
resource: 2,
},
{
recurring: { repeat: 'weekly', weekDays: 'TU,TH' },
resource: 3,
},
{
recurring: { repeat: 'weekly', weekDays: 'TH,FR' },
resource: 4,
},
{
recurring: { repeat: 'weekly', weekDays: 'MO,WE' },
resource: 5,
},
{
start: '2026-10-26T00:00',
end: '2026-10-26T00:00',
allDay: true,
resource: 1,
title: 'Dr. Alice Johnson OFF',
},
{
start: '2026-10-23T00:00',
end: '2026-10-23T00:00',
allDay: true,
resource: 2,
title: 'Dr. Brian Smith OFF',
},
{
start: '2026-10-22T00:00',
end: '2026-10-22T00:00',
allDay: true,
resource: 3,
title: 'Dr. Catherine Lee OFF',
},
{
start: '2026-10-27T00:00',
end: '2026-10-27T00:00',
allDay: true,
resource: 4,
title: 'Dr. Daniel Kim OFF',
},
{
start: '2026-10-30T00:00',
end: '2026-10-30T00:00',
allDay: true,
resource: 5,
title: 'Dr. Eva Martinez OFF',
},
];
}
<mbsc-eventcalendar
[view]="myView"
[data]="myEvents"
[resources]="myResources"
[colors]="myColors"
[invalid]="myInvalid"
[resourceTemplate]="resourceTemp"
groupBy="date"
class="mds-hide-non-working-resources"
>
<ng-template #resourceTemp let-resource>
<div class="mbsc-flex mds-hide-non-working-resources-bg" [style.background-color]="resource.bgColor">
<img class="mds-hide-non-working-resources-img mbsc-flex-none" [attr.alt]="resource.name" [src]="resource.img" />
<div class="mds-hide-non-working-resources-cont mbsc-flex-1-1">
<div class="mds-hide-non-working-resources-name">{{resource.name}}</div>
<div class="mds-hide-non-working-resources-spec" [style.color]="resource.textColor">{{resource.specialty}}</div>
</div>
</div>
</ng-template>
</mbsc-eventcalendar>
/* Column width */
.mds-hide-non-working-resources .mbsc-schedule-col-width {
width: 200px;
}
/* Resource header */
.mds-hide-non-working-resources .mbsc-schedule-resource-title {
padding: 0;
}
.mds-hide-non-working-resources-bg {
padding: 10px;
}
.mds-hide-non-working-resources-img {
height: 40px;
width: 40px;
margin: 10px 0;
}
.mds-hide-non-working-resources-cont {
padding: 10px;
font-weight: bold;
text-align: start;
}
.mds-hide-non-working-resources-name {
font-size: 14px;
line-height: 20px;
}
.mds-hide-non-working-resources-spec {
font-size: 14px;
line-height: 14px;
margin-top: 4px;
}