How to Integrated calendar feature in Web Application
Posted By : Chandan Gupta | 31-May-2021
Installation and configuration
Clone this project from GitHub, Using cmd prompt method, and install the impotant npm packages following cmd line.
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install
by default, project is pre - configured with the all EJ2 dependencies packages. For more understanding, jsut remove all the dependencies from
src/system.config.js
file to get intially started with the scheduler component.
these are the CSS files are available in ej2-schedule packages and it is sub-component packages. This can be referenced in your application using the 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-calendars/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-schedule/styles/material.css';
In case seen, if you want to make use of combined css of entire components, hence you can avail it from the root folder file of Essential JS 2 package it with the code shown below.
@import '../../node_modules/@syncfusion/ej2/material.css';
Module injection
Each view types of calendar mode available in Scheduler as individual modules and to work with those views, and it is compulsory to inject the required modules. The following modules are available in Scheduler namely,
- Day - This module to work with the day view of calendar.
- Week - This module to work with the week view of calendar.
- WorkWeek - This module to work with the work week view of calendar.
- Month - This module to work with the month view of calendar.
- Agenda - This module to work with the agenda view of calendar.
this above mentioned modules can be injected in Scheduler using this Schedule.Inject
method in ts file of compoenent.
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
Initialize the Schedule
HTML code which defined with an ID in Index.html, where scheduler user interface element is initialized.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Schedule Typescript Component</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!--style reference from node_modules/@syncfusion/ej2/-->
<link href="/styles/styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
<script src="system.config.js" type="text/javascript"></script>
</head>
<body>
<!--Element where the Schedule will be rendered-->
<div id="Schedule"></div>
</body>
</html>
[src/app/app.ts]
import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';
Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);
let scheduleObj: Schedule = new Schedule();
scheduleObj.appendTo('#Schedule');
Now its time to run the application using the following cmd.
npm start
For Complete Guide Visit URL -
https://ej2.syncfusion.com/documentation/schedule/getting-started/#dependencies
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Chandan Gupta
Chandan is a Frontend Developer with good experience in his domain. He Believes in smart work and loves to play with codes. He is good in programming.