ASP .NET Core MVC 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.
  • The sample below demonstrates how to set the 'Summer' theme to jqxCalendar.