Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
You can change the format of the day that to be displayed in header using dayHeaderFormat property. By default, the format is Short.
You can find the possible formats on below.
| Name | Description |
|---|---|
Short |
Sets the short format of day name (like Su ) in day header. |
Narrow |
Sets the single character of day name (like S ) in day header. |
Abbreviated |
Sets the min format of day name (like Sun ) in day header. |
Wide |
Sets the long format of day name (like Sunday ) in day header. |
import { Component, ViewChild } from '@angular/core';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';
import { DropDownListComponent,ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
@Component({
selector: 'app-root',
styleUrls: ['styles.css'],
template: `
<div id="container">
<div id="calendar">
<ejs-calendar #default dayHeaderFormat='Short'></ejs-calendar>
</div>
<div id="format">
<label class="custom-input-label">Header Format Types</label>
<ejs-dropdownlist id="dayformat" #select [dataSource]='formatData' [(value)]='value' [fields]='fields' [placeholder]='waterMark' (change)='formatHandler($event)'></ejs-dropdownlist>
</div>
</div>
`
})
export class AppComponent {
@ViewChild('default')
public calendarObj: CalendarComponent;
@ViewChild('select')
public dayHeaderFormat: DropDownListComponent;
// define the JSON of data
public formatData: Object[] = [
{ Id: 'Short', Label: 'Short' },
{ Id: 'Narrow', Label: 'Narrow' },
{ Id: 'Abbreviated', Label: 'Abbreviated' },
{ Id: 'Wide', Label: 'Wide' },
];
public fields: Object = { text: 'Label',value: 'Id' };
public waterMark: string = 'Select format type';
public value: string ='Short';
public formatHandler(args: ChangeEventArgs): void {
this.calendarObj.dayHeaderFormat = args.value;
}
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
DropDownListModule,
CalendarModule //declaration of ej2-angular-calendars module into NgModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);