Overview

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

To initialize a calendar element the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for element
  • smart.element.js – the base class
  • smart.button.js – the JS file containing the definition for the buttons used for month navigation.
  • smart.scrollbar.js – the JS file containing the definition for the scrollbars inside the listBox that’s part of the month picker.
  • smart.listbox.js – the JS file containing the definition for the list box element used in the month picker.
  • smart.dropdownlist.js – the JS file containing the definition for the drop down list element used as a month picker.
  • smart.tooltip.js – the JS file containing the definition for the tooltip element used for the important dates.
  • smart.calendar.js – the JS file containing the element definition

Here’s how to initialize a Smart.Calendar:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="./../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.calendar.js"></script> </head> <body> <smart-calendar></smart-calendar> </body> </html>

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Demo

selectedDates property determines the selected dates of the Calendar. It represents an array of Date objects but the user can pass in an array of strings representing valid dates as well:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="./../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.calendar.js"></script> </head> <body> <smart-calendar selected-dates='["2017-12-24", "2017-12-25", "2017-12-26"]'></smart-calendar> </body> </html>

Demo

The user can also select new dates using javascript:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="./../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.calendar.js"></script> <script> window.onload = function () { document.querySelector('smart-calendar').selectedDates = ["2018-1-1", new Date(2018,0,2)]; } </script> </head> <body> <smart-calendar></smart-calendar> </body> </html>

Demo

Notice how the array can contain valid dates as string and javascript Date objects at the same time.

Appearance

Smart.Calendar offers two different views – landscape and portrait:

<smart-calendar view="portrait"></smart-calendar>

Demo

Different sections of the calendar can be hidden or shown depending on the viewSection property:

<smart-calendar view-sections='["title", "header"]'></smart-calendar>

Demo

The element has three sections: title, header and footer. By default the footer is hidden and empty. Users can change the content of the three sections using HTML Template elements. This can be accomplished in the following way:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="./../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.calendar.js"></script> </head> <body> <template id="titleTemplate"> <div>Selected date: {{date}}</div> </template> <template id="headerTemplate"> <div>Month:</div> <div>{{date}}</div> </template> <template id="footerTemplate"> <div>Footer text</div> </template> <smart-calendar view-sections='["title","header","footer"]' title-template="titleTemplate" header-template="headerTemplate"
footer-template="footerTemplate"></smart-calendar> </body> </html>

Demo

The bindings in the templates are not necessary. They can be removed and the template can contain any arbitrary HTML.


The tooltips for the important dates of the Calendar can also be modified using HTML Templates in a similar fashion:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="./../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.calendar.js"></script> </head> <body> <template id="tooltipTemplate"> <div>Michael's Birthday {{date}}</div> </template> <smart-calendar view-sections='["header"]' tooltip tooltip-template="tooltipTemplate" important-dates='["2018-02-18", "2018-02-1"]'></smart-calendar> </body> </html>

Demo

If the template contains a binding it will be replaced with the appropriate date string.


Month names are shown when more than one month is visible. The number of months is contorlled by the months property. The value can vary from 1 to 12. When applying a different number the user has to set the appropriate size of the calendar for the months to be visualized properly.

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="./../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.calendar.js"></script> <script> window.onload = function () { document.querySelector('smart-calendar').dateFormatFunction = function (date) { return date.getMonth() + ' - ' + date.getFullYear(); } } </script> <style> smart-calendar { width: 500px; height: 650px; font-size: 150%; } </style> </head> <body> <smart-calendar months="6"></smart-calendar> </body> </html>

The calendar offers a date format function that allows the user to customize the format of the month names. The property is called dateFormatFunction. It represents a format function and accepts a single argument, a javascript Date object and expects a string to be returned. Here’s an example usage:

Demo

Behavior

By default the Calendar allows single date selection using mouse interaction and multiple date selection using keyboard key combinatons.

  • Pressing Shift + Arrow Left/Right/Top/Bottom or Shift + mouse click on a date will select the dates from the first to the current selection.
  • Pressing Ctrl + Arrow Left/Right/Top/Bottom or Ctrl + mouse click on a date will select the current date by preserving the previous selection.

Smart.Calendar has the a variaty of selection modes:

  • none – no selection allowed
  • default – single date selection using keyboard and mouse interaction, multiple date selection using specific keyboard keys.
  • one – single date selection
  • many – multiple date selection using mouse interaction.
  • zeroOrMany – multiple item selection
  • oneOrMany – multiple item selection. Doesn’t allow empty selection.
  • zeroOrOne – single item selection. Allows empty selection.

Selection modes can be changed using the selectionMode property through javascript or during initialization of the elemnet in the HTML:

<smart-calendar selection-mode="zeroOrOne"></smart-calendar>

Demo


Smart.Calendar can operate in two modes: classic or default. The calendarMode property determines that behavior.

Classic mode offers month and year navigation trough the header of the element.

Default mode allows month and year navigation through separate panels that can be accessed by clicking on the month name, located in the header.

<smart-calendar calendar-mode="classic"></smart-calendar>

Demo

Keyboard Support

Smart.Calendar implements the following key actions:

Key Action
Arrow Up / Arrow Down Navigate to previous/next week of the month.
Arrow Left / Arrow Right Navigate to the previous/next date.
Home Navigate to the first date of the month.
End Navigate to the last date of the month.
Page Up Navigate to the current date from the next month.
Page Down Navigate to the current date from the previous month.
Space / Enter Selects / Deselects a date.