Responsive Day and Week Views
The scheduler is fully responsive, it adapts to the available space and fills the screen to look good everywhere.
Use the responsive option to configure how the scheduler behaves on different sized screens. You can set it up as a daily schedule view on small screens and a weekly schedule on bigger screens.
The responsive option is equipped with five breakpoints - xsmall, small, medium, large, xlarge - and custom values can be added for a perfect fine-tune.
Demo
responsive: {
}
ComponentTemplate
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarOptions, MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' ',
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) {}
myEvents: MbscCalendarEvent[] = [];
eventSettings: MbscEventcalendarOptions = {
clickToCreate: ,
dragToCreate: ,
dragToMove: ,
dragToResize: ,
eventDelete: ,
responsive: {
xsmall: {
view: {
scheduler: {
type: 'day',
},
},
},
custom: {
// Custom breakpoint
breakpoint: 600,
view: {
scheduler: {
type: 'week',
},
},
},
},
};
ngOnInit(): void {
this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/events/?vers=5', 'callback').subscribe((resp) => {
this.myEvents = resp;
});
}
}
<mbsc-eventcalendar [data]="myEvents" [options]="eventSettings"></mbsc-eventcalendar>