カレンダー／日付ピッカー

カレンダーは、タッチ操作に最適化されたコンポーネントであり、日付を簡単に処理できます。

カレンダーは、インラインコンポーネントまたはオーバーレイとして使用できます。オーバーレイカレンダーは、タブレット（iPad）では自動的にポップオーバーに変換されます。

カレンダーアプリメソッド

カレンダーを操作するための関連するアプリメソッドを見てみましょう。

例

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

カレンダーパラメーター

利用可能なすべてカレンダーパラメーターのリストを見てみましょう。

[
  {
    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',
  },
]

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

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

日付範囲

カレンダーのパラメーターの一部（disabled、events、rangesClasses）は、いわゆる日付範囲を受け入れます。これは、考えられるすべての日付の組み合わせを指定してカバーするための簡単な方法です。

日付を含む配列にすることができます。例:

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

trueまたは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;
        }
    },
    ...
});

または、fromとtoプロパティを持つオブジェクトにすることができます。

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

または、fromまたはtoプロパティのみを持つオブジェクトにすることができます。

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

または、dateプロパティを持つオブジェクトにすることができます。

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

または、日付とオブジェクトを混ぜた配列にすることができます。

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パラメーターは、日付範囲と、その範囲のクラス名を含むオブジェクトの配列を受け入れます。

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変数のように、便利なメソッドとプロパティを持つ初期化されたインスタンスが変数に格納されます。

カレンダーイベント

カレンダーは、カレンダー要素で以下のDOMイベント、およびアプリとカレンダーインスタンスでイベントを発生させます。

DOMイベント

アプリとカレンダーインスタンスのイベント

カレンダーインスタンスは、自身インスタンスとアプリインスタンスの両方でイベントを発生させます。アプリインスタンスイベントは、calendarというプレフィックスが付いた同じ名前を持ちます。

CSS変数

関連するCSS変数（CSSカスタムプロパティ）のリストを以下に示します。

:root {
  --f7-calendar-height: 340px;
  --f7-calendar-sheet-landscape-height: 220px;
  --f7-calendar-popover-width: 320px;
  --f7-calendar-popover-height: 320px;
  --f7-calendar-modal-height: 420px;
  --f7-calendar-modal-max-width: 380px;
  /*
  --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: transparent;
  --f7-calendar-footer-padding: 0 8px;
  --f7-calendar-week-header-font-size: 11px;
  /*
  --f7-calendar-selected-bg-color:  var(--f7-theme-color);
  */
  --f7-calendar-disabled-text-color: #d4d4d4;
  --f7-calendar-event-dot-size: 4px;
  /*
  --f7-calendar-event-bg-color: var(--f7-theme-color);
  */
  /*
  --f7-calendar-picker-selected-text-color: var(--f7-theme-color);
  */
  --f7-calendar-time-selector-height: 28px;
  --f7-calendar-picker-pressed-bg-color: rgba(0, 0, 0, 0.1);
  --f7-calendar-picker-hover-bg-color: rgba(0, 0, 0, 0.03);
  --f7-calendar-time-selector-bg-color: rgba(0, 0, 0, 0.05);
}
:root .dark,
:root.dark {
  --f7-calendar-picker-pressed-bg-color: rgba(255, 255, 255, 0.08);
  --f7-calendar-picker-hover-bg-color: rgba(255, 255, 255, 0.03);
  --f7-calendar-time-selector-bg-color: rgba(255, 255, 255, 0.1);
}
.ios {
  --f7-calendar-selected-text-color: #fff;
  --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-day-font-size: 15px;
  --f7-calendar-day-size: 30px;
  --f7-calendar-picker-font-size: 17px;
  --f7-calendar-time-selector-font-size: 17px;
  --f7-calendar-modal-border-radius: 4px;
  --f7-calendar-modal-box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
                                  0px 24px 38px 3px rgba(0, 0, 0, 0.14),
                                  0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --f7-calendar-prev-next-text-color: #c8c8c8;
  --f7-calendar-sheet-border-color: #929499;
  --f7-calendar-sheet-bg-color: #fff;
  --f7-calendar-week-header-text-color: #5e5e5e;
  --f7-calendar-modal-bg-color: #fff;
  --f7-calendar-day-text-color: #000;
  --f7-calendar-today-text-color: #000;
  --f7-calendar-today-bg-color: #e3e3e3;
}
.ios .dark,
.ios.dark {
  --f7-calendar-prev-next-text-color: #5e5e5e;
  --f7-calendar-sheet-border-color: var(--f7-bars-border-color);
  --f7-calendar-sheet-bg-color: #121212;
  --f7-calendar-week-header-text-color: #aaa;
  --f7-calendar-modal-bg-color: #121212;
  --f7-calendar-day-text-color: #fff;
  --f7-calendar-today-text-color: #fff;
  --f7-calendar-today-bg-color: #333;
}
.md {
  --f7-calendar-sheet-border-color: transparent;
  --f7-calendar-header-height: 64px;
  --f7-calendar-header-font-size: 24px;
  --f7-calendar-header-font-weight: 400;
  --f7-calendar-header-padding: 0 24px;
  --f7-calendar-footer-height: 56px;
  --f7-calendar-footer-font-size: 14px;
  --f7-calendar-week-header-height: 24px;
  --f7-calendar-day-font-size: 14px;
  --f7-calendar-today-bg-color: none;
  --f7-calendar-day-size: 32px;
  --f7-calendar-picker-font-size: 14px;
  --f7-calendar-time-selector-font-size: 14px;
  --f7-calendar-modal-border-radius: 28px;
  --f7-calendar-modal-box-shadow: none;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-calendar-sheet-bg-color: var(--f7-md-surface-1);
  --f7-calendar-selected-text-color: var(--f7-md-on-primary);
  --f7-calendar-week-header-text-color: var(--f7-md-on-surface-variant);
  --f7-calendar-day-text-color: var(--f7-md-on-surface);
  --f7-calendar-prev-next-text-color: rgba(var(--f7-md-on-surface-variant-rgb), 0.55);
  --f7-calendar-today-text-color: var(--f7-theme-color);
  --f7-calendar-modal-bg-color: var(--f7-md-surface-1);
}

例

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Calendar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Calendar is a touch optimized component that provides an easy way to handle dates.</p>
        <p>Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to
          Popover on tablets (iPad).</p>
      </div>
      <div class="block-title">Default setup</div>
      <div class="list list-strong-ios list-outline-ios">
        <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>
      <div class="block-title">Custom date format</div>
      <div class="list list-strong-ios list-outline-ios">
        <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>
      <div class="block-title">Date + Time</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date and time" readonly="readonly"
                    id="demo-calendar-date-time" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Multiple Values</div>
      <div class="list list-strong-ios list-outline-ios">
        <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>
      <div class="block-title">Range Picker</div>
      <div class="list list-strong-ios list-outline-ios">
        <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>
      <div class="block-title">Open in Modal</div>
      <div class="list list-strong-ios list-outline-ios">
        <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>
      <div class="block-title">Calendar Page</div>
      <div class="list list-strong list-outline-ios">
        <ul>
          <li>
            <a href="/calendar-page/" class="item-content item-link">
              <div class="item-inner">
                <div class="item-title">Open Calendar Page</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title">Inline with custom toolbar</div>
      <div class="block block-strong no-padding">
        <div id="demo-calendar-inline-container"></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $, $on }) => {
    let calendarDefault
    let calendarDateFormat;
    let calendarDateTime;
    let calendarMultiple;
    let calendarRange;
    let calendarModal;
    let calendarInline;
    $on('pageInit', () => {
      // Default
      calendarDefault = $f7.calendar.create({
        inputEl: '#demo-calendar-default',
      });

      // With custom date format
      calendarDateFormat = $f7.calendar.create({
        inputEl: '#demo-calendar-date-format',
        dateFormat: { weekday: 'long', month: 'long', day: '2-digit', year: 'numeric' },
      });

      // Date + Time
      calendarDateTime = $f7.calendar.create({
        inputEl: '#demo-calendar-date-time',
        timePicker: true,
        dateFormat: { month: 'numeric', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric' },
      });

      // With multiple values
      calendarMultiple = $f7.calendar.create({
        inputEl: '#demo-calendar-multiple',
        dateFormat: { month: 'short', day: 'numeric' },
        multiple: true
      });
      // Range Picker
      calendarRange = $f7.calendar.create({
        inputEl: '#demo-calendar-range',
        rangePicker: true
      });
      // Custom modal
      calendarModal = $f7.calendar.create({
        inputEl: '#demo-calendar-modal',
        openIn: 'customModal',
        header: true,
        footer: true,
      });
      // Inline with custom toolbar
      var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      calendarInline = $f7.calendar.create({
        containerEl: '#demo-calendar-inline-container',
        value: [new Date()],
        renderToolbar: function () {
          return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
            '<div class="toolbar-inner">' +
            '<div class="left">' +
            '<a  class="link icon-only"><i class="icon icon-back"></i></a>' +
            '</div>' +
            '<div class="center"></div>' +
            '<div class="right">' +
            '<a  class="link icon-only"><i class="icon icon-forward"></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);
          }
        }
      });
    });
    $on('pageBeforeRemove', () => {
      calendarDefault.destroy();
      calendarDateFormat.destroy();
      calendarDateTime.destroy();
      calendarMultiple.destroy();
      calendarRange.destroy();
      calendarModal.destroy();
      calendarInline.destroy();
    });

    return $render;
  };
</script>