Search results

Show half-yearly view in Angular Schedule component

17 Sep 2021 / 2 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.

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.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
app.component.html
index.css
Copied to clipboard
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();
  }
}
Copied to clipboard
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 { }
Copied to clipboard
export let resourceData: Object[] = [
    {
        Id: 1,
        Subject: 'Workflow Analysis',
        StartTime: new Date(2021, 7, 1, 9, 30),
        EndTime: new Date(2021, 7, 1, 12, 0),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 2,
        Subject: 'Requirement planning',
        StartTime: new Date(2021, 7, 1, 12, 30),
        EndTime: new Date(2021, 7, 1, 14, 45),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 3,
        Subject: 'Quality Analysis',
        StartTime: new Date(2021, 8, 2, 10, 0),
        EndTime: new Date(2021, 8, 2, 12, 30),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 4,
        Subject: 'Resource planning',
        StartTime: new Date(2021, 8, 2, 13, 0),
        EndTime: new Date(2021, 8, 2, 15, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 5,
        Subject: 'Timeline estimation',
        StartTime: new Date(2021, 7, 3, 9, 0),
        EndTime: new Date(2021, 7, 3, 11, 30),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 6,
        Subject: 'Developers Meeting',
        StartTime: new Date(2021, 8, 3, 14, 0),
        EndTime: new Date(2021, 8, 3, 16, 45),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 7,
        Subject: 'Project Review',
        StartTime: new Date(2021, 7, 4, 11, 15),
        EndTime: new Date(2021, 7, 4, 13, 30),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 8,
        Subject: 'Manual testing',
        StartTime: new Date(2021, 7, 4, 9, 15),
        EndTime: new Date(2021, 7, 4, 11, 45),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 9,
        Subject: 'Project Preview',
        StartTime: new Date(2021, 9, 5, 9, 30),
        EndTime: new Date(2021, 9, 5, 12, 45),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 10,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2021, 7, 5, 13, 45),
        EndTime: new Date(2021, 7, 5, 16, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 11,
        Subject: 'Bug Automation',
        StartTime: new Date(2021, 10, 6, 10, 0),
        EndTime: new Date(2021, 10, 6, 12, 15),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 12,
        Subject: 'Functionality testing',
        StartTime: new Date(2021, 7, 6, 9, 0),
        EndTime: new Date(2021, 7, 6, 11, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 13,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2021, 7, 7, 13, 0),
        EndTime: new Date(2021, 7, 7, 15, 15),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 14,
        Subject: 'Test report Validation',
        StartTime: new Date(2021, 9, 7, 9),
        EndTime: new Date(2021, 9, 7, 11),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 15,
        Subject: 'Test case correction',
        StartTime: new Date(2021, 7, 8, 9, 45),
        EndTime: new Date(2021, 7, 8, 11, 30),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 16,
        Subject: 'Run test cases',
        StartTime: new Date(2021, 9, 8, 10, 30),
        EndTime: new Date(2021, 9, 8, 13, 0),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 17,
        Subject: 'Quality Analysis',
        StartTime: new Date(2021, 7, 9, 12),
        EndTime: new Date(2021, 7, 9, 15, 30),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 18,
        Subject: 'Debugging',
        StartTime: new Date(2021, 7, 9, 9, 0),
        EndTime: new Date(2021, 7, 9, 11, 15),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 19,
        Subject: 'Exception handling',
        StartTime: new Date(2021, 7, 10, 10, 10),
        EndTime: new Date(2021, 7, 10, 13, 30),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 20,
        Subject: 'Decoding',
        StartTime: new Date(2021, 7, 10, 10, 30),
        EndTime: new Date(2021, 7, 10, 12, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 21,
        Subject: 'workflow Analysis',
        StartTime: new Date(2021, 7, 11, 9, 30),
        EndTime: new Date(2021, 7, 11, 11, 30),
        IsAllDay: false,
        OwnerId: 3
    }, {
        Id: 22,
        Subject: 'Requirement planning',
        StartTime: new Date(2021, 7, 11, 12, 30),
        EndTime: new Date(2021, 7, 11, 14, 45),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 23,
        Subject: 'Quality Analysis',
        StartTime: new Date(2021, 7, 12, 10),
        EndTime: new Date(2021, 7, 12, 12, 30),
        IsAllDay: false,
        OwnerId: 3
    }, {
        Id: 24,
        Subject: 'Resource planning',
        StartTime: new Date(2021, 7, 12, 13),
        EndTime: new Date(2021, 7, 12, 14, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 25,
        Subject: 'Timeline estimation',
        StartTime: new Date(2021, 7, 13, 9),
        EndTime: new Date(2021, 7, 13, 11),
        IsAllDay: false,
        OwnerId: 3
    }, {
        Id: 26,
        Subject: 'Developers Meeting',
        StartTime: new Date(2021, 7, 13, 14),
        EndTime: new Date(2021, 7, 13, 15, 45),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 27,
        Subject: 'Project Review',
        StartTime: new Date(2021, 7, 14, 11),
        EndTime: new Date(2021, 7, 14, 13),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 28,
        Subject: 'Manual testing',
        StartTime: new Date(2021, 7, 14, 9),
        EndTime: new Date(2021, 7, 14, 11, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 29,
        Subject: 'Project Preview',
        StartTime: new Date(2021, 7, 15, 9, 30),
        EndTime: new Date(2021, 7, 15, 11),
        IsAllDay: false,
        OwnerId: 3
    }, {
        Id: 30,
        Subject: 'Cross-browser testing',
        StartTime: new Date(2021, 7, 15, 14),
        EndTime: new Date(2021, 7, 15, 16, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 31,
        Subject: 'Bug Automation',
        StartTime: new Date(2021, 7, 16, 10),
        EndTime: new Date(2021, 7, 16, 11),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 32,
        Subject: 'Functionality testing',
        StartTime: new Date(2021, 7, 16, 9),
        EndTime: new Date(2021, 7, 16, 11, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 33,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2021, 7, 17, 14),
        EndTime: new Date(2021, 7, 17, 15),
        IsAllDay: false,
        OwnerId: 3
    }, {
        Id: 34,
        Subject: 'Test report Validation',
        StartTime: new Date(2021, 7, 17, 9),
        EndTime: new Date(2021, 7, 17, 11),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 35,
        Subject: 'Test case correction',
        StartTime: new Date(2021, 7, 18, 10),
        EndTime: new Date(2021, 7, 18, 11, 30),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 36,
        Subject: 'Run test cases',
        StartTime: new Date(2021, 10, 18, 10),
        EndTime: new Date(2021, 10, 18, 10, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 37,
        Subject: 'Bug fixing',
        StartTime: new Date(2021, 10, 9, 10),
        EndTime: new Date(2021, 10, 9, 10, 30),
        IsAllDay: false,
        OwnerId: 3
    }, {
        Id: 38,
        Subject: 'Debugging',
        StartTime: new Date(2021, 7, 19, 9),
        EndTime: new Date(2021, 7, 19, 10, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 39,
        Subject: 'Exception handling',
        StartTime: new Date(2021, 7, 20, 10),
        EndTime: new Date(2021, 7, 20, 11),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 40,
        Subject: 'Decoding',
        StartTime: new Date(2021, 7, 20, 10, 30),
        EndTime: new Date(2021, 7, 20, 12, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 41,
        Subject: 'workflow Analysis',
        StartTime: new Date(2021, 7, 21, 9, 30),
        EndTime: new Date(2021, 7, 21, 11, 30),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 42,
        Subject: 'Requirement planning',
        StartTime: new Date(2021, 7, 21, 12, 30),
        EndTime: new Date(2021, 7, 21, 13, 45),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 43,
        Subject: 'Quality Analysis',
        StartTime: new Date(2021, 9, 22, 10),
        EndTime: new Date(2021, 9, 22, 11, 30),
        IsAllDay: false,
        OwnerId: 1
    }, {
        Id: 44,
        Subject: 'Resource planning',
        StartTime: new Date(2021,11, 22, 13),
        EndTime: new Date(2021,11, 22, 14, 30),
        IsAllDay: false,
        OwnerId: 2
    }, {
        Id: 45,
        Subject: 'Timeline estimation',
        StartTime: new Date(2021, 7, 23, 9),
        EndTime: new Date(2021, 7, 23, 10),
        IsAllDay: false,
        OwnerId: 3
    }, {
        Id: 46,
        Subject: 'Developers Meeting',
        StartTime: new Date(2021, 9, 23, 14),
        EndTime: new Date(2021, 9, 23, 15, 45),
        IsAllDay: false,
        OwnerId: 2
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<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>{{getMonthHeaderText(data.date)}}</div>
</ng-template>
<ng-template #resourceHeaderTemplate let-data>
    <div class='template-wrap'>
      <div class="resource-details">
        <div class="resource-name">{{data.resourceData.OwnerText}}</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>
Copied to clipboard
#loader {
    color: #008cff;
    font-family:  'Helvetica Neue','calibiri';
    font-size: 16px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.e-schedule .template-wrap {
    display: flex;
    text-align: left;
}

.e-schedule .template-wrap .resource-details {
    padding-left: 10px;
}

.e-schedule .template-wrap .resource-details .resource-name {
    font-size: 16px;
    font-weight: 500;
    margin-top: 5px;
}
  /* csslint ignore:start */
.e-schedule.e-device .template-wrap .resource-details .resource-name {
    font-size: inherit;
    font-weight: inherit;
}

.e-schedule.e-device .e-resource-tree-popup .e-fullrow {
    height: 50px;
}
  /* csslint ignore:end */