Calendar CSS Styling

Smart.Calendar element represents a custom element representing a Calendar by displaying the days of a month of a given year.

Required files

The Smart.Calendar element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

  • smart.element.js — this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.calendar.js — this file defines the functionality of the Smart.Calendar custom element.
  • smart.button.js — this file defines the functionality of the Smart.Calendar custom element.
  • smart.scrollbar.js — this file defines the functionality of the custom elements nested inside Smart.Calendar’s header section.
  • smart.listbox.js — this file defines the functionality of the custom elements nested inside Smart.Calendar’s header section.
  • smart.dropdownlist.js — this file defines the functionality of the custom elements nested inside Smart.Calendar’s header section.
  • smart.tooltip.js — this file defines the functionality of Smart.Calendar’s tooltip custom element.

Smart.Calendar also requires the following style sheets in order to be displayed correctly.

  • smart.base.css — the base style sheet file.

Initialization

To create an instance of a Smart.Calendar custom element, ypu can use one of the following HTML structures:

<smart-calendar><smart-calendar>

Getting and setting properties dynamically

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-calendar');

Properties are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let selectedDates = customElement.selectedDates;

Here is an example showing how to set a property dynamically:

customElement.selectedDates = ["2017-07-2", "2017-09-7"];

Calling methods

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-calendar');

Methods are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.selectDay(12);

Styling (CSS API)

Smart HTML Elements use a pair of css files – smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element’s layout like margin, padding, border-width, position. The second CSS file applies the HTML Element’s colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS variables

Smart.Calendar uses the following CSS variable:

  • –smart-calendar-header-height – a CSS variable used to set the default height for the header and footer section of Smart.Calendar. Default value is 30px.

CSS selectors

The following CSS selectors can be used to style Smart.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-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-year-container – contains the year of the current selected date.
    • .smart-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-previous-month-button – a Smart.RepeatButton used to traverse between months backwards.
      • .smart-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-month-element – a Smart.DropDownList used as a month chooser. Can be styled like a normal Smart.DropDownList.
        • .smart-year-element – an HTML Input element used as an year chooser.
        • .smart-year-elements – a container that holds the additional navigation buttons for the ‘.smart-year-element’.
          • .smart-increment-year-button – a Smart.Button used to increment years.
        • .smart-decrement-year-button – a Smart.Button used to decrement years.
      • .smart-next-month-button – a Smart.RepeatButton used to traverse between months forwards.
    • .smart-content – the content of the calendar. Placed in the middle of the element and takes most of the space. Contains the actual months.
      • .smart-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-month-name – the name of the month.
        • .smart-calendar-week-titles – the names of the days of the week.
        • DIV container – 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-week-number – contains the number of the current week.
          • DIV element – DIV element representing every single day of the week.
      • .smart-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.
        • DIV element – 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-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-list-box – a Smart.ListBox 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-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.

Animations

By default the animations for Smart.Calendar are disabled. They can be enabled by adding the CSS class called “animation” to the element, like so:

<smart-calendar class="animation"></smart-calendar>

Smart.Calendar uses JS animations that can be manipulated using the “animationSettings” property of the element. The property represents an object with the following entries:

  • startSpeed – the speed at which the animation begins until it reaches the threshold where it slows down. Default value is 0.2.
  • easeThreshold – determines the threshold where the animation starts slowing down. Default value is 0.5 (meaning half the way of the animation)
  • step – determines the scroll interval between animation frames or the step at which the animation progresses towards the end. Default value is 0.25.
  • stepEaseSize – determines the easing coefficient used ti slow down the step after the threshold has been passed. Default value is 200.
  • resetThreshold – a second threshold that will determine when the animation should start over or not. Default value is 0.2 ( meaning the animation will be restarted if 20% of it has passed).