Getting started in EJ2 TypeScript Calendar control
7 May 20258 minutes to read
This section explains how to create a simple Calendar, and configure its available functionalities in TypeScript, using Essential® JS 2quickstart seed repository.
This application is integrated with the
webpack.config.jsconfiguration and uses the latest version of thewebpack-cli. It requires nodev14.15.0or higher. For more information about webpack and its features, refer to thewebpack documentation.
Dependencies
The list of dependencies required to use the Calendar component in your application is given below:
|--@syncfusion/ej2-calendars|--@syncfusion/ej2-base|--@syncfusion/ej2-inputs|--@syncfusion/ej2-splitbuttons|--@syncfusion/ej2-lists|--@syncfusion/ej2-popups|--@syncfusion/ej2-buttonsSet up development environment
Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project fromGitHub.
git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstartAfter cloning the application in theej2-quickstart folder, run the following command line to navigate to theej2-quickstart folder.
cd ej2-quickstartAdd Syncfusion® JavaScript packages
Syncfusion® JavaScript (Essential® JS 2) packages are available on thenpmjs.com public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single@syncfusion/ej2 package or individual packages for each control.
The quickstart application is preconfigured with the dependent@syncfusion/ej2 package in the~/package.json file. Use the following command to install the dependent npm packages from the command prompt.
npm installImport the Syncfusion® CSS styles
To render Calendar component, need to import Calendar and its dependent components styles as given below in the~/src/styles/styles.css file, as shown below:
@import"../../node_modules/@syncfusion/ej2-base/styles/material.css";@import"../../node_modules/@syncfusion/ej2-buttons/styles/material.css";@import"../../node_modules/@syncfusion/ej2-calendars/styles/material.css";Add Calendar to the application
Add the HTML div tag with an ID attribute as theelement to yourindex.html file.
[src/index.html]
<!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 Calendar component</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no"/><metaname="description"content="Essential JS 2"/><metaname="author"content="Syncfusion"/><linkrel="shortcut icon"href="resources/favicon.ico"/><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/></head><body><divstyle="margin: 50px;"><!--Element which is going to render the Calendar--><divid="element"></div></div></body></html>Then, import the Calendar component to yourapp.ts file, and initialize it with the#element[src/app/app.ts].
import{Calendar}from'@syncfusion/ej2-calendars';//Initialize calendar component.letcalendarObject:Calendar=newCalendar();//Render initialized calendar.calendarObject.appendTo('#element');Run the application
Now, run the application by using the command below.
npm run startThe following example shows a basic Calendar component.
import{Calendar,ChangedEventArgs}from'@syncfusion/ej2-calendars';// Creates a simple calendar component.letcalendarObject:Calendar=newCalendar();calendarObject.appendTo('#element');<!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 Calendar control</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Typescript UI Controls"/><metaname="author"content="Syncfusion"/><!--style reference from the Calendar component--><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-calendars/styles/material.css"rel="stylesheet"/><!--style reference from app--><linkhref="styles.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>LOADING....</div><divid='container'><!--element which is going to render the Calendar--><divid='element'></div></div></body></html>Setting the value, min and max dates
After rendering a simple Calendar component by following the above steps, configure the Calendar to set a value within a specific range using its value, min, and max properties.
Here the Calendar allows you to select a date within the range from 9th to 15th.
import{Calendar,ChangedEventArgs}from'@syncfusion/ej2-calendars';letmonth:number=newDate().getMonth();letfullYear:number=newDate().getFullYear();// Creates a calendar with min max property.letcalendarObject:Calendar=newCalendar({// Sets the min.min:newDate(fullYear,month,9),//Sets the max.max:newDate(fullYear,month,15),// Sets the value.value:newDate(fullYear,month,11)});calendarObject.appendTo('#element');<!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 Calendar control</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Typescript UI Controls"/><metaname="author"content="Syncfusion"/><!--style reference from the Calendar component--><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-buttons/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.12/ej2-calendars/styles/material.css"rel="stylesheet"/><!--style reference from app--><linkhref="styles.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>LOADING....</div><divid='container'><!--element which is going to render the Calendar--><divid='element'></div></div></body></html>See Also
[8]ページ先頭