Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQWidgets jqxCalendar stepMonths Property

  • Last Updated : 21 Jul, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful and optimized framework, platform-independent, and widely supported. The jqxCalendar represents a jQuery calendar widget that enables the user to select a date using a visual monthly calendar display.

The stepMonths property is used to set or return the calendar`s navigation step when the left or right navigation button is clicked. It accepts a number type value and its default value is 1.

Syntax:

$('.selector').jqxCalendar({
  stepMonths: Number
});

 



Linked Files: Download jQWidgets from https://www.jqwidgets.com/download/ link. In the HTML file, locate the script files in the downloaded folder:

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />

<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxdatetimeinput.js”></script>

<script type=”text/javascript” src=”jqwidgets/jqxcalendar.js”></script>

<script type=”text/javascript” src=”jqwidgets/globalization/globalize.js”></script>

<script tyle=”text/javascript” src=”jqwidgets/jqx-all.js”></script>

The example below illustrates the jqxCalendar stepMonths property in jQWidgets:

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="jqwidgets/styles/jqx.base.css"
      type="text/css"/>
    <script type="text/javascript" 
    src="scripts/jquery-1.11.1.min.js">
    </script>
    <script type="text/javascript" 
    src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript" 
    src="jqwidgets/jqxdatetimeinput.js">
    </script>
    <script type="text/javascript" 
       src="jqwidgets/jqxcalendar.js">
    </script>
    <script
      type="text/javascript"
      src="jqwidgets/globalization/globalize.js"
    ></script>
    <script tyle="text/javascript" src="jqwidgets/jqx-all.js"></script>
  </head>
  
  <body>
    <center>
      <h1 style="color: green">GeeksforGeeks</h1>
  
      <h3>jQWidgets jqxCalendar stepMonths Property</h3>
  
      <div id="jqxcal"></div>
    </center>
  
    <script type="text/javascript">
      $(document).ready(function () {
        $("#jqxcal").jqxCalendar({
          width: "400px",
          height: "300px",
          stepMonths: 3,
        });
      });
    </script>
  </body>
</html>

Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcalendar/jquery-calendar-api.htm




My Personal Notes arrow_drop_up
Recommended Articles
Page :