How to create a Calendar using HTML Code in JavaScript?
This article provides a step-by-step introduction to configure the Syncfusion JavaScript Calendar control (Essential JS 2) and build a simple HTML web application.
Pre-requisites
Calendar Component Initialization
Create an app folder myapp in your local machine to initialize the Essential JS 2 JavaScript components.
Dependencies
- ej2-base
- ej2-buttons
- ej2-calendars
Using CDN link for script and style reference
Step 1: The Essential JS 2 components scripts and styles are already hosted in the following CDN link formats.
Syntax:
Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Style: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css
Example:
Script: http://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js Styles: http://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css
Step 2: You should add the CDN global script and style for the calendar and its dependent packages in the myapp/index.html as like the following code.
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2</title>
<!-- Essential JS 2 Calendar's dependent material theme -->
<link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 Calendar's dependent scripts -->
<script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/ej2-calendars/dist/global/ej2-calendars.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <div> element -->
<div id="element"/>
<script>
// initialize the Calendar component
var calendar = new ej.calendars.Calendar();
// Render the initialized button.
calendar.appendTo('#element')
</script>
</body>
</html>
Else, you can render the Calendar component by using the CDN link instead of component dependent package CDN link for rendering the Calendar as mentioned below.
<!-- Syncfusion Essential JS 2 Styles --> <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" /> <!-- Syncfusion Essential JS 2 Scripts --> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
Screenshot:
Also, you can download and run the sample from this link. Refer to our documentation and online samples for more features.
Conclusion
I hope you enjoyed learning about how to create a Calendar using HTML Code in JavaScript.
You can refer to our JavaScript Calendar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Calendar example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
