Half yearly view in Angular Schedule component

27 Apr 20245 minutes to read

The year view of our scheduler displays all the 365 days and their related appointments of a particular year. You can customize the year view by using the following properties.

• firstMonthOfYear
• monthsCount
• monthHeaderTemplate

In the following code example, you can see how to render only the last six months of a year in the scheduler. To start with the month of June, firstMonthYear is set to 6 and monthsCount is set to 6 to render only 6 months.

app.component.html

<ejs-schedule width="100%" height="550px" [selectedDate]="selectedDate" [views]="views"
[currentView]='currentView' [eventSettings]="eventSettings" [group]='group' [firstMonthOfYear]="firstMonthOfYear" [monthsCount]="monthsCount"
>
<e-resources>
  <e-resource field="OwnerId" title="Owner" name="Owners"
    [dataSource]="ownerDataSource" textField='OwnerText' idField='Id' colorField='OwnerColor'>
  </e-resource>
</e-resources>
<ng-template #monthHeaderTemplate let-data>
    <div></div>
</ng-template>
<ng-template #resourceHeaderTemplate let-data>
    <div class='template-wrap'>
      <div class="resource-details">
        <div class="resource-name"></div>    
      </div>
    </div>
  </ng-template>
<e-views>
    <e-view option="Year"></e-view>
    <e-view option="TimelineYear" displayName="Horizontal TimelineYear" [isSelected]="isSelected"></e-view>
    <e-view option="TimelineYear" displayName="Vertical TimelineYear" orientation="Vertical" [group]="groupSettings"></e-view>
  </e-views>
</ejs-schedule>

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule'
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'



import { Component, ViewEncapsulation } from '@angular/core';
import {
  ScheduleComponent, EventSettingsModel, EventRenderedArgs, YearService, TimelineYearService, GroupModel, ResizeService, DragAndDropService,MonthAgendaService
} from '@syncfusion/ej2-angular-schedule';
import { resourceData } from './datasource';

@Component({
imports: [
        
        ScheduleModule,
        TimePickerModule
    ],

providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService,
                YearService, TimelineYearService, ResizeService, DragAndDropService],
standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./index.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public selectedDate: Date = new Date(2021, 7, 4);
    public firstMonthOfYear: number = 6;
    public monthsCount: number = 6;
    public eventSettings: EventSettingsModel = {
        dataSource: resourceData
    };
    public group: GroupModel = {
        resources: ['Owners']
    };
    public ownerDataSource: Object[] = [
        { OwnerText: 'Nancy', Id: 1, OwnerColor: '#ffaa00' },
        { OwnerText: 'Steven', Id: 2, OwnerColor: '#f8a398' },
        { OwnerText: 'Robert', Id: 3, OwnerColor: '#7499e1' },
        { OwnerText: 'Smith', Id: 4, OwnerColor: '#f8a398' },
        { OwnerText: 'Michael', Id: 5, OwnerColor: '#f8a398' }
    ];
currentView: any;
isSelected: any;
groupSettings: any;
views: any;
    public getMonthHeaderText(date: Date): string {
        return date.toLocaleString('en-us', { month: 'long' }) + ' ' + date.getFullYear();
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));