Use the agenda object inside the view option to configure the agenda. type and size can be set as follows:
- day -
agenda: { type: 'day', size: 20 }can be configured for a single day or a range of days - week -
agenda: { type: 'week', size: 3 }can be configured for a single or multiple weeks - month -
agenda: { type: 'month' }can be configured for one or more months - year -
agenda: { type: 'year' }can be configured for one or more years
Interested in combining this with a calendar view? Check out the previous example →
Demo
Daily agenda
days
Weekly agenda
weeks
Monthly agenda
months
Yearly agenda
years
view: {
agenda: { type: 'day ', size: 2 }
}

ComponentTemplate
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarView, 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[] = [];
dayView: MbscEventcalendarView = { agenda: { type: 'day' } };
weekView: MbscEventcalendarView = { agenda: { type: 'week' } };
monthView: MbscEventcalendarView = { agenda: { type: 'month' } };
ngOnInit(): void {
this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/events-new/?vers=5', 'callback').subscribe((resp) => {
this.myEvents = resp;
});
}
}
<mbsc-page>
<div class="mbsc-grid">
<div class="mbsc-row">
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Daily agenda</div>
<mbsc-eventcalendar [data]="myEvents" [view]="dayView"></mbsc-eventcalendar>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Weekly agenda</div>
<mbsc-eventcalendar [data]="myEvents" [view]="weekView"></mbsc-eventcalendar>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Monthly agenda</div>
<mbsc-eventcalendar [data]="myEvents" [view]="monthView"></mbsc-eventcalendar>
</div>
</div>
</div>
</div>
</mbsc-page>