Calendar / Datepicker

• Calendar App Methods
• Calendar Parameters
• Date Range
• rangesClasses
• Calendar Methods & Properties
• Calendar Events
• DOM Events
• App and Calendar Instance Events
• CSS Variables
• Examples

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

Calendar App Methods

Let's look at related App methods to work with Calendar:

For example:

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

Calendar Parameters

Let's look on list of all available Calendar parameters:

[
  {
    date: new Date(2018, 4, 11),
    color: '#2196f3',
  },
  // same date but different color, one more dot will be added to this day
  {
    date: new Date(2018, 4, 11),
    color: '#4caf50',
  },
]

['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December']

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

{
  monthNames: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
  monthNamesShort: ['فَر', 'اُر', 'خُر', 'تیر', 'مُر', 'شَه', 'مهر', 'آب', 'آذر', 'دی', 'بَه', 'اِس'],
  dayNames: ['یک‌شنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه', 'شنبه'],
  dayNamesShort: ['1ش', '۲ش', '۳ش', '۴ش', '۵ش', 'ج', 'ش'],
  firstDay: 6, // Saturday
  weekendDays: [5], // Friday
  ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند']
}

var calendar = app.calendar.create({
  ...
  on: {
    opened: function () {
      console.log('Calendar opened')
    }
  }
})

var app = new Framework7({
  calendar: {
    url: 'calendar/',
    dateFormat: 'dd.mm.yyyy',
  }
});

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 calendar = app.calendar.create({
    ...
    // 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 calendar = app.calendar.create({
    ...
    //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 calendar = app.calendar.create({
    ...
    //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 calendar = app.calendar.create({
    ...
    //Disable everyting since December 2015
    disabled: {
        from: new Date(2015, 11, 1)
    },
    ...
});

Or object with date property:

var calendar = app.calendar.create({
    ...
    // Disabled 1th December 2015
    disabled: {
        date: new Date(2015, 11, 1)
    },
    ...
});

Or array with mixed dates and objects:

var calendar = app.calendar.create({
    ...
    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)
        },
        {
            date: new Date(2015, 11, 1),
            color: '#ff0000'
        },
        // same date but one more color dot will be added
        {
            date: new Date(2015, 11, 1),
            color: '#00ff00'
        },
    ],
    ...
});

rangesClasses

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

var calendar = app.calendar.create({
    ...
    //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 2016
        {
            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 calendar variable in examples above) with helpful methods and properties:

Calendar Events

Calendar will fire the following DOM events on calendar element and events on app and calendar instance:

DOM Events

App and Calendar Instance Events

Calendar instance emits events on both self instance and app instance. App instance events has same names prefixed with calendar.

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-calendar-height: 320px;
  --f7-calendar-sheet-landscape-height: 220px;
  --f7-calendar-sheet-bg-color: #fff;
  --f7-calendar-popover-width: 320px;
  --f7-calendar-popover-height: 320px;
  --f7-calendar-modal-height: 420px;
  --f7-calendar-modal-max-width: 380px;
  --f7-calendar-modal-border-radius: 4px;
  --f7-calendar-modal-bg-color: #fff;
  /*
  --f7-calendar-header-bg-color: var(--f7-bars-bg-color);
  --f7-calendar-header-link-color: var(--f7-bars-link-color);
  --f7-calendar-header-text-color: var(--f7-bars-text-color);
  --f7-calendar-footer-bg-color: var(--f7-bars-bg-color);
  --f7-calendar-footer-border-color: var(--f7-bars-border-color);
  --f7-calendar-footer-link-color: var(--f7-bars-link-color);
  --f7-calendar-footer-text-color: var(--f7-bars-text-color);
  --f7-calendar-week-header-bg-color: var(--f7-bars-bg-color);
  --f7-calendar-week-header-text-color: var(--f7-bars-text-color);
  */
  --f7-calendar-footer-padding: 0 8px;
  --f7-calendar-week-header-font-size: 11px;
  --f7-calendar-day-text-color: #000;
  --f7-calendar-selected-text-color: #fff;
  /*
  --f7-calendar-selected-bg-color:  var(--f7-theme-color);
  */
  --f7-calendar-prev-next-text-color: #b8b8b8;
  --f7-calendar-disabled-text-color: #d4d4d4;
  --f7-calendar-event-dot-size: 4px;
  /*
  --f7-calendar-event-bg-color: var(--f7-theme-color);
  */
}
:root .theme-dark,
:root.theme-dark {
  --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
  --f7-calendar-modal-bg-color: #171717;
  --f7-calendar-sheet-bg-color: #171717;
}
.ios {
  --f7-calendar-sheet-border-color: #929499;
  --f7-calendar-header-height: 44px;
  --f7-calendar-header-font-size: 17px;
  --f7-calendar-header-font-weight: 600;
  --f7-calendar-header-padding: 0 8px;
  --f7-calendar-footer-height: 44px;
  --f7-calendar-footer-font-size: 17px;
  --f7-calendar-week-header-height: 18px;
  --f7-calendar-row-border-color: #c4c4c4;
  --f7-calendar-day-font-size: 15px;
  --f7-calendar-today-text-color: #000;
  --f7-calendar-today-bg-color: #e3e3e3;
  --f7-calendar-day-size: 30px;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-calendar-row-border-color: var(--f7-bars-border-color);
  --f7-calendar-day-text-color: #fff;
  --f7-calendar-today-text-color: #fff;
  --f7-calendar-today-bg-color: #333;
}
.md {
  --f7-calendar-sheet-border-color: #ccc;
  --f7-calendar-header-height: 56px;
  --f7-calendar-header-font-size: 20px;
  --f7-calendar-header-font-weight: 400;
  --f7-calendar-header-padding: 0 24px;
  --f7-calendar-footer-height: 48px;
  --f7-calendar-footer-font-size: 14px;
  --f7-calendar-week-header-height: 24px;
  --f7-calendar-row-border-color: transparent;
  --f7-calendar-day-font-size: 14px;
  /*
  --f7-calendar-today-text-color: var(--f7-theme-color);
  */
  --f7-calendar-today-bg-color: none;
  --f7-calendar-day-size: 32px;
}
.md .theme-dark,
.md.theme-dark {
  --f7-calendar-day-text-color: rgba(255, 255, 255, 0.87);
}
.aurora {
  --f7-calendar-sheet-border-color: #ccc;
  --f7-calendar-header-height: 38px;
  --f7-calendar-header-font-size: 14px;
  --f7-calendar-header-font-weight: 600;
  --f7-calendar-header-padding: 0 8px;
  --f7-calendar-footer-height: 38px;
  --f7-calendar-footer-font-size: 14px;
  --f7-calendar-week-header-height: 18px;
  --f7-calendar-row-border-color: #e3e3e3;
  --f7-calendar-day-font-size: 13px;
  --f7-calendar-today-text-color: #000;
  --f7-calendar-today-bg-color: #e3e3e3;
  --f7-calendar-day-size: 30px;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-calendar-row-border-color: var(--f7-bars-border-color);
  --f7-calendar-day-text-color: #fff;
  --f7-calendar-today-text-color: #fff;
  --f7-calendar-today-bg-color: #333;
}

<div class="block-title">Default setup</div>
<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Your birth date" readonly="readonly" id="demo-calendar-default"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var calendarDefault = app.calendar.create({
  inputEl: '#demo-calendar-default',
});

<div class="block-title">Custom date format</div>
<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-date-format"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var calendarDateFormat = app.calendar.create({
  inputEl: '#demo-calendar-date-format',
  dateFormat: 'DD, MM dd, yyyy'
});

<div class="block-title">Multiple Values</div>
<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Select multiple dates" readonly="readonly" id="demo-calendar-multiple"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var calendarMultiple = app.calendar.create({
  inputEl: '#demo-calendar-multiple',
  dateFormat: 'M dd yyyy',
  multiple: true
});

<div class="block-title">Range Picker</div>
<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Select date range" readonly="readonly" id="demo-calendar-range"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var calendarRange = app.calendar.create({
  inputEl: '#demo-calendar-range',
  dateFormat: 'M dd yyyy',
  rangePicker: true
});

<div class="block-title">Open in Modal</div>
<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-modal"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var calendarModal = app.calendar.create({
  inputEl: '#demo-calendar-modal',
  openIn: 'customModal',
  header: true,
  footer: true,
  dateFormat: 'MM dd yyyy',
});

<div class="block-title">With Events</div>
<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-events"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var now = new Date();
var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
var weekLater = new Date().setDate(today.getDate() + 7);
var calendarEvents = app.calendar.create({
    inputEl: '#demo-calendar-events',
    dateFormat: 'M dd yyyy',
    events: [
      {
        from: today,
        to: weekLater
      },
      //- more events this day
      {
        date: today,
        color: '#ff0000'
      },
      {
        date: today,
        color: '#00ff00'
      },
    ]
});

<div class="block-title">Disabled Dates</div>
<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-disabled"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var today = new Date();
var weekLater = new Date().setDate(today.getDate() + 7);
var calendarDisabled = app.calendar.create({
    inputEl: '#demo-calendar-disabled',
    dateFormat: 'M dd yyyy',
    disabled: {
      from: today,
      to: weekLater
    }
});

<div class="block-title">Inline with custom toolbar</div>
<div class="block block-strong no-padding">
  <div id="demo-calendar-inline-container"></div>
</div>

var $$ = Dom7;
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'];
var calendarInline = app.calendar.create({
  containerEl: '#demo-calendar-inline-container',
  value: [new Date()],
  weekHeader: false,
  renderToolbar: function () {
    return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
      '<div class="toolbar-inner">' +
        '<div class="left">' +
          '<a href="#" class="link icon-only"><i class="icon icon-back ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
        '</div>' +
        '<div class="center"></div>' +
        '<div class="right">' +
          '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
        '</div>' +
      '</div>' +
    '</div>';
  },
  on: {
    init: function (c) {
      $$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] +', ' + c.currentYear);
      $$('.calendar-custom-toolbar .left .link').on('click', function () {
        calendarInline.prevMonth();
      });
      $$('.calendar-custom-toolbar .right .link').on('click', function () {
        calendarInline.nextMonth();
      });
    },
    monthYearChangeStart: function (c) {
      $$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] +', ' + c.currentYear);
    }
  }
});