• Last Updated : 27 Sep, 2023

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. It has more than 60 UI widget that helps to create attractive UI design.

jQWidgets Tutorial

Download and Installation:

  • Download jQWidget file in zip format from the https://www.jqwidgets.com/download/ link. After downloading the zip file, extract the files and save them into the folder. After that create a new HTML file and add the jQWidget code into the file and include the widget link inside the head section.



  • Open Node.js command prompt and run the following command –
    npm install jqwidgets-framework - demos & scripts
    npm install jqwidgets-scripts - scripts
    npm install jqwidgets-ng - angular modules
  • To get the information of jQWidget npm package, use the following command –
    npm info jqwidgets-framework


Installing the jQWidgets Bower Package:

  • Open Node.js command prompt and run the following command –
    bower install jqwidgets
  • To get the information of jQWidget bower package, use the following command –
    bower info jqwidgets

Example: This example describe the basic example. In this example, we will use jqxCalendar widget to create a calendar and added the back text on it using backText Property.

<!DOCTYPE html>
<html lang="en">

    <link rel="stylesheet" 
          href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script tyle="text/javascript" 

        <h1 style="color: green;">

            jQWidgets jqxCalendar backText Property

        <div id='jqxcal'></div>

    <script type="text/javascript">
        $(document).ready(function () {
                theme: 'energyblue',
                width: '400px',
                height: '300px',
                enableTooltips: true,
                backText: 'Back Option'


backText property

jQWidgets Complete References:


Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above