Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxCalendar.
  • jqx-widget - applied to the jqxCalendar widget.
  • jqx-calendar - applied to jqxCalendar widget.
  • jqx-calendar-row-header - applied to the calendar's row header. This header displays the week numbers.
  • jqx-calendar-column-header - applied to the calendar's column. This header displays the day names.
  • jqx-calendar-top-left-header - applied to the calendar's top-left header. This header is displayed before the day names and above the week numbers.
  • jqx-calendar-title-navigation - applied to the calendar's navigation buttons.
  • jqx-calendar-title-header - applied to the calendar's navigation title.
  • jqx-calendar-title-header-disabled - applied to the calendar's navigation title when the calendar is disabled.
  • jqx-calendar-cell - applied to a calendar cell.
  • jqx-calendar-cell-hidden - applied to a calendar cell when the cell is hidden. A cell can be hidden when the showOtherMonthDays property is false and the calendar hides the cells with dates from the other months.
  • jqx-calendar-cell-weekend - applied to a calendar cell when the cell's date is a weekend date.
  • jqx-calendar-cell-specialDate - applied to a calendar cell when the cell's date is a special date(holiday, vacation, birthay).
  • jqx-calendar-cell-today - applied to a calendar cell when the cell's date is the today date.
  • jqx-calendar-cell-hover - applied to a calendar cell when the cell is hovered.
  • jqx-fill-state-hover - applied to a calendar cell when the cell is hovered.
  • jqx-calendar-cell-selected - applied to a calendar cell when the cell is selected.
  • jqx-fill-state-pressed - applied to a calendar cell when the cell is selected.
  • jqx-calendar-cell-othermonth - applied to a calendar cell when the cell's date represents a date from the previous or next month.
  • jqx-calendar-cell-disabled - applied to a calendar cell when the calendar is disabled
  • jqx-calendar-row-cell - applied to a calendar cell when the cell is from the row header that displays the week numbers.
  • jqx-calendar-row-cell-disabled - applied to a calendar cell when the cell is from the row header that displays the week numbers and the calendar is disabled.
  • jqx-calendar-column-cell - applied to a calendar cell when the cell is from the column header that displays the day names.
  • jqx-calendar-column-cell-disabled - applied to a calendar cell when the cell is from the column header that displays the day names and the calendar is disabled.
  • jqx-calendar-view - applied to the calendar's cell area element.
  • jqx-fill-state-disabled - applied to the calendar when it is disabled.
When you create a custom style with colors and backgrounds for jqxCalendar, you need to do the following:
  • Add the above CSS classes related to jqxCalendar
  • After each CSS class, add your theme name.
    For example:
    jqx-calendar-themename
  • To apply your custom style to jqxCalendar, you need to set its 'theme' property(option) to point to your theme name string. 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxcalendar").jqxCalendar({ width: '250px', height: '250px', theme: 'summer' });
        });
    </script>
  • The sample below demonstrates how to set the 'Summer' theme to jqxCalendar. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <title>jQuery Calendar CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.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 async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
    <body>
    <div id='content'>
      <script type="text/javascript">
          $(document).ready(function () {
              $("#jqxcalendar").jqxCalendar({ width: '250px', height: '250px', theme: 'summer' });
          });
      </script>  
      <div id='jqxcalendar'></div>
    </div>
    </body>
    </html>