The following section explains the steps required to create a simple Calendar component and also it demonstrates the basic usage of the Calendar.
Install the below required dependency package in order to use the Calendar component in your application.
|-- @syncfusion/ej2-angular-calendars
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttonsAngular provides the easiest way to set angular CLI projects using Angular CLI tool.
Install the CLI application globally to your machine.
npm install -g @angular/cling new syncfusion-angular-calendarBy default, it install the CSS style base application. To setup with SCSS, pass —style=scss argument on create project.
Example code snippet.
ng new syncfusion-angular-calendar --style=scssNavigate to the created project folder.
cd syncfusion-angular-calendarAll the available Essential JS 2 packages are published in npmjs.com registry.
To install Calendar component, use the following command.
npm install @syncfusion/ej2-angular-calendars --save
(or)
npm I @syncfusion/ej2-angular-calendars --saveThe —save will instruct NPM to include the Calendar package inside of the
dependenciessection of thepackage.json.
Import Calendar module into Angular application(src/app/app.module.ts) from the package@syncfusion/ej2-angular-calendars.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the CalendarModule for the Calendar component
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
@NgModule({
//declaration of CalendarModule into NgModule
imports: [ BrowserModule, CalendarModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }The following CSS files are available in ../node_modules/@syncfusion package folder.
This can be referenced in [src/styles.css] using following code.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css';If you want to refer the combined component styles, please make use of our
CRG(Custom Resource Generator) in your application.
Modify the template in [src/app/app.component.ts] file to render the Calendar component. by using <ejs-calendar> selector.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To Render Calendar -->
<ejs-calendar></ejs-calendar>`
})
export class AppComponent { }After completing the configuration required to render a basic Calendar, run the following command to display the output in your default browser.
ng serveThe following example illustrates the output in your browser
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<!-- To Render Calendar -->
<ejs-calendar></ejs-calendar>`
})
export class AppComponent {
constructor() {
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
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);The following example demonstrates how to set the value, min and max dates on initializing the Calendar. Here the Calendar allows you to select a date within a range from 9th to 15th. To know more about range restriction in Calendar, please refer this page.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<!-- Sets the value, min and max -->
<ejs-calendar [value]='dateValue' [min]='minDate' [max]='maxDate'></ejs-calendar>
`
})
export class AppComponent {
public month: number = new Date().getMonth();
public fullYear: number = new Date().getFullYear();
public dateValue: Date = new Date(this.fullYear, this.month , 11);
public minDate: Date = new Date(this.fullYear, this.month , 9);
public maxDate: Date = new Date(this.fullYear, this.month, 15);
constructor() {
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Syncfusion ej2-angular-calendars module
import { CalendarModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
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);