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:

<div class="toolbar">
  <div class="toolbar-inner">
    {{monthPicker}}
    {{yearPicker}}
  </div>
</div> 

<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>    

<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>

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:

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
});

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);
    }
});