EasyUI jQuery calendar widget

EasyUI is an 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 using jQuery EasyUI. Calendar widget display a one-month calendar that allows the user to select dates and move to the next or previous month.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

<input class="easyui-calendar">

Properties:

width: The width of calendar component.
height: The height of calendar component.
fit: When true to set the calendar size fit it's parent container.
border: Defines if to show the border.
showWeek: Defines if to show the week numbers.
weekNumberHeader: The label to display on the week number header.
getWeekNumber: The function to return the week number.
firstDay: Defines the first day of week.
weeks: The list of week to be showed.
months: The list of month to be showed.
year: The year of calendar.
month: The month of calendar.
current: The current date.
formatter: The day formatter function.

Event:

onSelect: Fires when user select a date.
onChange: Fires when change a date.
onNavigate: Fires when navigate the years and months.

Methods:

options Return the options object.
resize Resize the calendar size.
moveTo Move the calendar to specified date.

CDN Link: First, add jQuery Easy UI scripts needed for your project.

<script type="text/javascript" src="jquery.min.js"> </script>

<script type="text/javascript" src="jquery.easyui.min.js"> </script>

<script type="text/javascript" src="jquery.easyui.mobile.js">
</script>

Example 1:

HTML

<!doctype html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="initial-scale=1.0, 
        maximum-scale=1.0, user-scalable=no"> 
            
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
        href="themes/metro/easyui.css"> 

    <link rel="stylesheet" type="text/css"
        href="themes/mobile.css"> 

    <link rel="stylesheet" type="text/css"
        href="themes/icon.css"> 

    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"> 
    </script> 

    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
        src="jquery.easyui.min.js"> 
    </script> 
    
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js"> 
    </script> 

    <script type="text/javascript"> 
      $(document).ready(function (){ 
        $('#gfg').calendar({ 
          border: false
        }); 
      }); 
    </script> 
</head> 

<body>

    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery calendar widget</h3>
  
        <div  id="gfg" style="margin-bottom:20px">
         <div  class="easyui-calendar" 
               style="width:250px">
         </div>
      </div>

</body>
</html>

Output:

Reference: http://www.jeasyui.com/documentation/

EasyUI jQuery calendar widget

Explore