How to design calendar for web page using jQuery EasyUI ?
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" >
< 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" >
< script type = "text/javascript"
src = "jquery.min.js" >
</ script >
< 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 >
< 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" >
< 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" >
< script type = "text/javascript"
src = "jquery.min.js" >
</ script >
< script type = "text/javascript"
src = "jquery.easyui.min.js" >
</ script >
</ head >
< body >
< div style = "margin:20px 0" ></ div >
< 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" >
< 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" >
< script type = "text/javascript"
src = "jquery.min.js" >
</ script >
< 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:
Last Updated :
20 Dec, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...