Angular Scheduler Individual View Settings Example

This demo illustrates how to customize each view with specific configurations like applying event template on agenda view, setting different start/end hour to day and week views and enabling grouping in month view. It also shows how to hide the weekend days and to set different time intervals on week view.

30	31	Jun 1	2	3	4	5	30	31	Jun 1	2	3	4	5
6	7	8	9	10	11	12	6	7	8	9	10	11	12
13	14 +1 more	15 +1 more	16	17	18	19 +1 more	13	14	15 +2 more	16	17	18	19
20 +1 more	21	22	23	24	25 +2 more	26	20 +2 more	21	22	23	24	25 +2 more	26
27	28	29	30	Jul 1	2	3	27	28	29	30	Jul 1	2	3

Description

In this demo, the views property is defined to accept the array of view options and therefore for each view, it is possible to set different configurations. In day view, the startHour is set to 7 and endHour set to 18 whereas in week view, the same is set as 9 and 19 respectively. Also, the showWeekend property is set to false only on week view along with different timescale interval. The customized template is applied to the events on Agenda view and on month view, the grouping functionality is enabled by setting group property.

Example of Individual View Settings in Angular Scheduler Component