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

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..