Calendar / Datepicker

Calendar is a touch optimized component that provides an easy way to handle dates.

Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad).

Create Calendar Instance

Calendar can be created and initialized only using JavaScript. We need to use related App's method:

myApp.calendar(parameters) - initialize Calendar with parameters

  • parameters - object - object with Calendar parameters. Required.
  • Method returns initialized Calendar instance

For example:

var myCalendar = app.calendar({
    input: '#calendar-input'
});   

Calendar Parameters

Let's look on list of all available parameters:

Parameter Type Default Description
Common Picker Modal Component Parameters
container string or HTMLElement String with CSS selector or HTMLElement where to place generated Calendar HTML. Use only for inline pickers
input string or HTMLElement String with CSS selector or HTMLElement with related input element
scrollToInput boolean true Scroll viewport (page-content) to input when calendar opened
inputReadOnly boolean true Sets "readonly" attribute on specified input
convertToPopover boolean true Converts calendar modal to Popover on large screens (on iPad)
onlyOnPopover boolean false Enable it and Calendar will be always opened in Popover
cssClass string Additional CSS class name to be set on calendar modal
closeByOutsideClick boolean true If enabled, picker will be closed by clicking outside of picker or related input element
toolbar boolean true Enables calendar modal toolbar
toolbarCloseText string 'Done' Text for Done/Close toolbar button
toolbarTemplate string Toolbar HTML Template. By default it is HTML string with following template:
<div class="toolbar">
  <div class="toolbar-inner">
    {{monthPicker}}
    {{yearPicker}}
  </div>
</div> 
Specific Calendar Parameters
value array Array with initial selected dates. Each array item represents selected date
disabled Date Range Additonal disabled dates. Parameter accepts so called Date Range (look below for details)
events Date Range Dates with events. Will be marked with additonal "dot" on calendar day. Parameter accepts so called Date Ranges (look below for details)
rangesClasses array Date ranges you want to add custom CSS class for additional styling. Look below for accepted format
formatValue function (p, values) Function to format input value, should return new/formatted string value. values is array where each item represents selected date
monthNames array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'] Array with full month names
monthNamesShort array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Array with short month names
dayNames array ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] Array with week day names
dayNamesShort array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Array with week day short names
updateValuesOnTouchmove boolean true Updates picker and input values during touch move
firstDay number 1 First day of the week. By default 1 - Monday
weekendDays array [0, 6] Array with index numeber of weekend days, by default it is Saturday and Sunday
dateFormat string 'yyyy-mm-dd' Default date format, available expressions:
  • 'yyyy' - 4 digits year
  • 'yy' - 2 digits year
  • 'mm' - 2 digits month number, from 01 to 12
  • 'm' - month number, from 1 to 12
  • 'MM' - full month name
  • 'M' - short month name
  • 'dd' - 2 digits day number, from 01 to 31
  • 'd' - day number, from 1 to 31
  • 'DD' - full week day name
  • 'D' - short week day name
multiple boolean false Enable to allows select multiple dates/values
rangePicker boolean false Enable to enable range picker. Not compatible with multiple
direction string 'horizontal' Months layout direction, could be 'horizontal' or 'vertical'
minDate Date null Minimum allowed date
maxDate Date null Maximum allowed date
touchmove boolean true If enabled then calendar months slides follow finger during touch move
animate boolean true Enables transition between months
closeOnSelect boolean false Enable and calendar will be closed when user pick a date
weekHeader boolean true Enable week header with short name week days
monthPicker boolean true Enable month picker in toolbar
monthPickerTemplate string Month picker HTML template. By default it is:
<div class="picker-calendar-month-picker">
    <a href="#" class="link icon-only picker-calendar-prev-month">
        <i class="icon icon-prev"></i>
    </a>
    <span class="current-month-value"></span>
    <a href="#" class="link icon-only picker-calendar-next-month">
        <i class="icon icon-next"></i>
    </a>
</div>    
yearPicker boolean true Enable year picker in toolbar
yearPickerTemplate string Year picker HTML template. By default it is:
<div class="picker-calendar-year-picker">
    <a href="#" class="link icon-only picker-calendar-prev-year">
        <i class="icon icon-prev"></i>
    </a>
    <span class="current-year-value"></span>
    <a href="#" class="link icon-only picker-calendar-next-year">
        <i class="icon icon-next"></i>
    </a>
</div>
Callbacks
onChange function (p, values, displayValues) Callback function that will be executed when picker value changed. values and displayValues are arrays where each item represents value/display value of related column
onMonthAdd function (p, monthContainer) Callback function that will be executed when newly generated month HTML element will be added to calendar.
onDayClick function (p, dayContainer, year, month, day) Callback function that will be executed when user clicks/select any date
onMonthYearChangeStart function (p, year, month) Callback function that will be executed in the beginning of transition to another month/year
onMonthYearChangeEnd function (p, year, month) Callback function that will be executed in the end of transition to another month/year
onOpen function (p) Callback function that will be executed when picker is opened
onClose function (p) Callback function that will be executed when picker is closed

Date Range

Some of Calendar parameters (disabled, events and rangesClasses) accept so called Date Range. It is a simple way to specify and cover all possible dates combination.

It can be array with dates, for example:

var myCalendar = myApp.calendar({
    ...
    //Disabled 10th November 2015 and 11th November 2015:
    disabled: [new Date(2015, 10, 10), new Date(2015, 10, 11)],
    ...
});

It can be custom function where you need to return true or false

var myCalendar = myApp.calendar({
    ...
    //Disabled all dates in November 2015
    disabled: function (date) {
        if (date.getFullYear() === 2015 && date.getMonth() === 10) {
            return true;
        }
        else {
            return false;
        }
    },
    ...
});

Or object with from and to properties

var myCalendar = myApp.calendar({
    ...
    //Disable all dates between 1st October 2015 and 31 December 2015
    disabled: {
        from: new Date(2015, 9, 1),
        to: new Date(2015, 11, 31)
    },
    ...
});  

Or object with just from or to properties

var myCalendar = myApp.calendar({
    ...
    //Disable everyting since December 2015
    disabled: {
        from: new Date(2015, 11, 1)
    },
    ...
}); 

Or array with mixed dates and objects:

var myCalendar = myApp.calendar({
    ...
    events: [
        new Date(2015, 9, 1),
        new Date(2015, 9, 5),
        {
            from: new Date(2015, 9, 10),
            to: new Date(2015, 9, 15)
        },
        {
            from: new Date(2015, 9, 20),
            to: new Date(2015, 9, 31)
        }
    ],
    ...
});

rangesClasses

rangesClasses accepts array of objects with Date Range and class names for this range:

var myCalendar = myApp.calendar({
    ...
    //Add classes for november and october
    rangesClasses: [
        //Add "day-october' class for all october dates
        {
            // string CSS class name for this range in "cssClass" property
            cssClass: 'day-october', //string CSS class
            // Date Range in "range" property
            range: function (date) {
                return date.getMonth() === 9
            }
        },
        //Add "day-holiday" class for 1-10th January 2015
        {
            cssClass: 'day-holiday',
            range: {
                from: new Date(2016, 0, 1),
                to: new Date(2016, 0, 10)
            }
        }
    ],
    ...
});            

Calendar Methods & Properties

After we initialize Calendar we have its initialized instance in variable (like myCalendar variable in example above) with helpful methods and properties:

Properties
myCalendar.params Object with passed initialization parameters
myCalendar.value Array where each item represents selected date
myCalendar.opened true if Calendar is currently opened
myCalendar.inline true if Calendar is inline Calendar
myCalendar.cols Array with specified Calendar columns. Each column also has its own methods and properties (look below)
myCalendar.container Dom7 instance with Calendar HTML container
Methods
myCalendar.setValue(values) Set new selected dates. values is array where each item represents selected date
myCalendar.nextMonth(duration) Calendar transition to next month for specified duration in ms
myCalendar.prevMonth(duration) Calendar transition to previous month for specified duration in ms
myCalendar.nextYear() Calendar transition to next year
myCalendar.prevYear() Calendar transition to previous year
myCalendar.setYearMonth(year, month, duration) Calendar transition to specified year, month for specified duration in ms
myCalendar.open() Open Calendar
myCalendar.close() Close Calendar
myCalendar.destroy() Destroy Calendar instance and remove all events

Access to Calendar's Instance

If you initialize Calendar as inline Calendar it is possible to access to Calendar's instance from its HTML container

var myCalendar = $$('.calenadr-inline')[0].f7Calendar;

Examples

Default Setup

<div class="content-block-title">Default setup</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Your birth date" readonly id="calendar-default">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>          
var calendarDefault = myApp.calendar({
    input: '#calendar-default',
});          

Custom Date Format

<div class="content-block-title">Custom date format</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Select date" readonly id="calendar-date-format">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>          
var calendarDateFormat = myApp.calendar({
    input: '#calendar-date-format',
    dateFormat: 'DD, MM dd, yyyy'
});          

Multiple Values

<div class="content-block-title">Multiple Values</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Select multiple dates" readonly id="calendar-multiple">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>          
var calendarMultiple = myApp.calendar({
    input: '#calendar-multiple',
    dateFormat: 'M dd yyyy',
    multiple: true
});

Range Picker

<div class="content-block-title">Range Picker</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Select date range" readonly id="calendar-range">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
var calendarRange = myApp.calendar({
    input: '#calendar-range',
    dateFormat: 'M dd yyyy',
    rangePicker: true
});

With Events

<div class="content-block-title">With Events</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Select dates" readonly id="calendar-events">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>          
var today = new Date();
var weekLater = new Date().setDate(today.getDate() + 7);
 
var calendarEvents = myApp.calendar({
    input: '#calendar-events',
    dateFormat: 'M dd yyyy',
    events: {
      from: today,
      to: weekLater
    }
});

Disabled Dates

<div class="content-block-title">Disabled Dates</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Select dates" readonly id="calendar-disabled">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>          
var today = new Date();
var weekLater = new Date().setDate(today.getDate() + 7);
 
var calendarDisabled = myApp.calendar({
    input: '#calendar-disabled',
    dateFormat: 'M dd yyyy',
    disabled: {
      from: today,
      to: weekLater
    }
});

Inline With Custom Toolbar

<div class="content-block-title">Inline with custom toolbar</div>
<div class="content-block">
  <div style="padding:0; margin-right:-15px; width:auto" class="content-block-inner">
    <div id="calendar-inline-container"></div>
  </div>
</div>          
var $$ = Dom7;
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'];
 
var calendarInline = myApp.calendar({
    container: '#calendar-inline-container',
    value: [new Date()],
    weekHeader: false,
    toolbarTemplate: 
        '<div class="toolbar calendar-custom-toolbar">' +
            '<div class="toolbar-inner">' +
                '<div class="left">' +
                    '<a href="#" class="link icon-only"><i class="icon icon-back"></i></a>' +
                '</div>' +
                '<div class="center"></div>' +
                '<div class="right">' +
                    '<a href="#" class="link icon-only"><i class="icon icon-forward"></i></a>' +
                '</div>' +
            '</div>' +
        '</div>',
    onOpen: function (p) {
        $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
        $$('.calendar-custom-toolbar .left .link').on('click', function () {
            calendarInline.prevMonth();
        });
        $$('.calendar-custom-toolbar .right .link').on('click', function () {
            calendarInline.nextMonth();
        });
    },
    onMonthYearChangeStart: function (p) {
        $$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
    }
});