Calendar - CSS API Reference

All Common CSS variables:

Specific CSS variables for Calendar styling:

• --smart-calendar-header-height: Default height for calendar's header section.
• --smart-calendar-footer-height: Default height for calendar's footer section.
• --smart-calendar-title-height: Default height for calendar's title.
• --smart-calendar-cell-size: Default size of calendar's cell.
• --smart-calendar-cell-spacing: Defines calendar's cell spacing.
• --smart-calendar-default-width: Defines calendar's default width.
• --smart-calendar-default-height: Defines calendar's default height.
• --smart-calendar-title-text-transform: Defines element's default height.
• --smart-calendar-week-title-text-transform: Controls the capitalization of the week title.
• --smart-calendar-header-text-transform: Controls the capitalization of the header text.
• --smart-calendar-footer-text-transform: Controls the capitalization of the footer text.
• --smart-calendar-cell-border-top-right-radius: Defines cell's top-right border radius.
• --smart-calendar-cell-border-top-left-radius: Defines cell's top-left border radius.
• --smart-calendar-cell-border-bottom-left-radius: Defines cell's bottom-left border radius.
• --smart-calendar-cell-border-bottom-right-radius: Defines cell's bottom-right border radius.
• --smart-calendar-title-padding: Defines title's padding

The following CSS selectors can be used to style Calendar:

• smart-calendar - the calendar itself. Can be used to set width, height, font, background, border for the whole element.
  • .smart-container - wraper that is used to hold all of the internal parts of the element. Normally it shoudn't be used for styling purposes.
    • .smart-calendar-title - the title of the calendar. Contains the current selected date devided in two containers. Can be used to style the title section of the element.
      • .smart-calendar-year-container - contains the year of the current selected date.
    • .smart-calendar-date-container - contains the date ( month and day) of the current selected date.
    • .smart-calendar-container - container that hold the three main sections of the Calendar - header, content and footer.
      • .smart-header - the header part of the calendar that sits just below the title. It contains the navigation keys for the Calendar.
      • .smart-calendar-button - a smartRepeatButton used to traverse between months backwards.
      • .smart-calendar-date-element - a container for the two types of date navigation - default and classic. Both are DIV elements. The first one contains a single string date with user interaction. The second is used only in "classic" calendarMode and contains the following elements:
        • .smart-calendar-month-element - a smartDropDownList used as a month chooser. Can be styled like a normal smartDropDownList.
        • .smart-calendar-year-element - an HTML Input element used as an year chooser.
        • .smart-calendar-year-elements - a container that holds the additional navigation buttons for the '.smart-year-element'.
          • .smart-calendar-button - a smartButton used to increment years.
        • .smart-calendar-button - a smartButton used to decrement years.
      • .smart-calendar-button - a smartRepeatButton used to traverse between months forwards.
    • .smart-content .smart-calendar-body - the content of the calendar. Placed in the middle of the element and takes most of the space. Contains the actual months.
      • .smart-calendar-months-container - a container that holds the months of the calendar.
        • .smart-calendar-month - a month. Contains the smaller parts that form a month.
          • .smart-calendar-month-name - the name of the month.
        • .smart-calendar-week-titles - a DIV container with the names of the days of the week.
          • .smart-calendar-week-title - the name of the day of the week.
        • .smart-calendar-weeks - a container that holds the weeks of the month in one place.
          • .smart-calendar-week - a container that holds the days of a single week.
            • .smart-calendar-week-number - contains the number of the current week.
            • .smart-calendar-cell - DIV element representing every single day of the week.
      • .smart-calendar-date-view-container - used as a container for the month, year selection when display mode is other than "month". Only available in "default" calendar mode.
        • .smart-calendar-cell - a simple DIV element containing a month name or an year number in the different date views.
      • .smart-calendar-month-separator - a separator between '.smart-months-container' and '.smart-next-months-container. Used only for the animation during navigation.
      • .smart-calendar-next-months-container - a container for the next or previous month after the one in view. Used for the month animation during navigation. Should always have the same style as the '.smart-months-container' !
      • .smart-calendar-list-view - a smartListBox used for year and month selection when display mode is changed from month to year or decade. Used only in "default" calendar mode.
      • .smart-calendar-animation-panel - a container used only for animation purposes. Shouldn't be used for styling.
    • .smart-calendar-footer - the footer section located at the bottom of the calendar. It has the same height as the header.
    • smart-tooltip - a smartToolTip element used for the tooltips of important dates.

Demo

<style>
        #calendar{
                --smart-calendar-default-width: 290px;
                --smart-calendar-default-height: 350px;
        }
</style>