Dimensions in Angular Schedule component
26 Sep 20238 minutes to read
The Scheduler dimensions refers to both height and width of the entire layout and it accepts 3 types of values.
- auto
- pixel
- percentage
Auto Height and Width
When height and width of the Scheduler are set to auto
, it will try as hard as possible to keep an element the same width as its parent container. In other words, the parent container that holds Scheduler, it’s width/height will be the sum of its children. By default, Scheduler is assigned with auto
values for both height and width properties.
import { Component } from '@angular/core';
import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';
import { scheduleData} from './datasource';
@Component({
selector: 'app-root',
providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
// specifies the template string for the Schedule component
template: `<ejs-schedule width='auto' height='auto' [selectedDate]='selectedDate' [eventSettings]='eventSettings'></ejs-schedule>`
})
export class AppComponent {
public selectedDate: Date = new Date(2018, 1, 15);
public eventSettings: EventSettingsModel = {
dataSource: scheduleData
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ScheduleModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [DayService,
WeekService,
WorkWeekService,
MonthService,
AgendaService,
MonthAgendaService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Height and Width in pixel
The Scheduler height and width will be rendered exactly as per the given pixel values. It accepts both string and number values.
import { Component } from '@angular/core';
import { EventSettingsModel, WeekService, WorkWeekService } from '@syncfusion/ej2-angular-schedule';
import { scheduleData} from './datasource';
@Component({
selector: 'app-root',
providers: [WeekService, WorkWeekService],
// specifies the template string for the Schedule component
template: `<ejs-schedule width='650px' height='550px' [selectedDate]='selectedDate' [eventSettings]='eventSettings'></ejs-schedule>`
})
export class AppComponent {
public selectedDate: Date = new Date(2018, 1, 15);
public eventSettings: EventSettingsModel = {
dataSource: scheduleData
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ScheduleModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [DayService,
WeekService,
WorkWeekService,
MonthService,
AgendaService,
MonthAgendaService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Height and Width in percentage
When height and width of the Scheduler are given as percentage, it will make the Scheduler as wide as the parent container.
import { Component } from '@angular/core';
import { EventSettingsModel, WeekService, WorkWeekService } from '@syncfusion/ej2-angular-schedule';
import { scheduleData} from './datasource';
@Component({
selector: 'app-root',
providers: [WeekService, WorkWeekService],
// specifies the template string for the Schedule component
template: `<ejs-schedule width='100%' height='100%' [selectedDate]='selectedDate' [eventSettings]='eventSettings'></ejs-schedule>`
})
export class AppComponent {
public selectedDate: Date = new Date(2018, 1, 15);
public eventSettings: EventSettingsModel = {
dataSource: scheduleData
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ScheduleModule } from '@syncfusion/ej2-angular-schedule';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService} from '@syncfusion/ej2-angular-schedule';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ScheduleModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [DayService,
WeekService,
WorkWeekService,
MonthService,
AgendaService,
MonthAgendaService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
You can refer to our Angular Scheduler feature tour page for its groundbreaking feature representations. You can also explore our Angular Scheduler example to knows how to present and manipulate data.