How to design calendar for web page using jQuery EasyUI ?
Last Updated : 20 Dec, 2020
EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.
In this article, we will learn how to design a calendar feature for our webpage interface.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Example 1: The following example demonstrates the basic calendar feature using jQuery EasyUI framework. The developers can include them in webpages as per one's need.
html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--EasyUI css files --> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--EasyUI library --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> </head> <body> <h2>EasyUI Calendar</h2> <p>Click to select date.</p> <div style="margin:20px 0"></div> <!--"easyui-calendar" class is used --> <div class="easyui-calendar" style="width:250px;height:250px;"> </div> </body> </html>
Output:
Example 2: The following example demonstrates the calendar feature in which one can disable other days other than one selected day for user interaction for any purpose.
html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--EasyUI css files --> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--EasyUI library --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> </head> <body> <div style="margin:20px 0"></div> <!--Allows only wednesdays for user selection --> <div class="easyui-calendar" style="width:250px;height:250px;" data-options=" validator: function(date) { if (date.getDay() == 3) { return true; } else { return false; } } "> </div> </body> </html> Output:
Example 3: The following example demonstrates the calendar feature in which the user can select some day of the week as the “first” day of a week as per one's need.
html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--EasyUI css files --> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--EasyUI library --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> </head> <body> <h2>jQuery EasyUI Calendar</h2> <p> You can choose any day to be the first day of the week. </p> <div style="margin:20px 0"> <select onchange="$('#calendarID') .calendar({firstDay:this.value})"> <option value="0">Sunday</option> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Saturday</option> </select> </div> <div id="calendarID" class="easyui-calendar" style="width:250px;height:250px;"> </div> </body> </html>
Output:
