jQWidgets jqxCalendar viewChange Event

Last Updated : 19 May, 2022

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

The jqxCalendar viewChange event is triggered when Calendar’s view is changed. To change the calendar view, we need to click on the top bar of the calendar.

Syntax:

$('#jqxCalendar').on('viewChange', function () { 
    // Code
});

Linked Files: Download jQWidgets zipped file from the official website link and extract the file. Then create an HTML file, and 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>

Example: Below example illustrates the jqxCalendar viewChange event in jQWidgets.

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 viewChange Event 
        </h3> 
        <div id='jqxcal'></div> 
    </center> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#jqxcal").jqxCalendar({ 
                theme: 'energyblue', 
                width: '400px', 
                height: '300px', 
                enableTooltips: true, 
                backText: 'Back Option' 
            }); 
            $("#jqxcal").on('viewChange', function () { 
                alert('viewChange event triggered!'); 
            }); 
        }); 
    </script> 
</body> 
</html>