Half yearly view in Angular Schedule component

17 Jan 20235 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 { Component, ViewEncapsulation } from '@angular/core';
import {
  ScheduleComponent, EventSettingsModel, EventRenderedArgs, YearService, TimelineYearService, GroupModel, ResizeService, DragAndDropService
} from '@syncfusion/ej2-angular-schedule';
import { resourceData } from './datasource.ts';

@Component({
    selector: 'app-root',
    templateUrl: 'app/app.component.html',
    providers: [YearService, TimelineYearService, ResizeService, DragAndDropService],
    styleUrls: ['app/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' }
    ];
    public getMonthHeaderText(date: Date): string {
        return date.toLocaleString('en-us', { month: 'long' }) + ' ' + date.getFullYear();
  }
}

app.module.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 { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ScheduleModule,
        TimePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [DayService, 
                WeekService, 
                WorkWeekService, 
                MonthService,
                AgendaService,
                MonthAgendaService]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);