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>