Open In App

How to design calendar for web page using jQuery EasyUI ?

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

  • Before execution: 
     

  • After execution:



Last Updated : 20 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads