Framework7-カレンダーパラメーター

説明

Framework7は、カレンダーで使用され、次の表に記載されているパラメータのリストを提供します-

以下は、カレンダーで使用されるリストパラメーターです。

S.No

パラメータと説明

Type

デフォルト

一般的なピッカーモーダルコンポーネントパラメータ

1

容器

これは、生成されたカレンダーHTMLが配置される場所です。インラインピッカーにのみ使用されます。

文字列またはHTMLElement

-

2

入力

関連する入力要素を持つ文字列またはHTMLElementです。

文字列またはHTMLElement

-

3

*scrollToInput*

カレンダーを開くときに入力するスクロールビューポートです。

ブール値

true

4

*inputReadOnly*

特定の入力で_readonly_属性を設定するために使用されます。

ブール値

true

5

*convertToPopover*

カレンダーのモーダルを大画面のポップオーバーに変換するために使用されます。

ブール値

true

6

*onlyOnPopover*

有効にすると、カレンダーは常にポップオーバーで開かれます。

ブール値

偽

7

*cssClass*

有効にすると、カレンダーは常にポップオーバーで開かれます。

ひも

-

8

*closeByOutsideClick*

これが有効になっている場合、ピッカーの外側をクリックすると、ピッカーは閉じられます。

ブール値

true

9

ツールバー

カレンダーモーダルツールバーを有効にします。

ブール値

true

10

*toolbarCloseText*

ツールバーの閉じるボタンのテキストです。

ひも

Done

11

*toolbarTemplate*

ツールバーのHTMLテンプレートです。デフォルトでは、HTML文字列で、以下のテンプレートがあります-

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

ひも

-

特定のカレンダーパラメータ

1

値

これは、最初に選択された日付を持つ配列です。

アレイ

-

2

無効

追加の無効化された日付です。

期間

-

3

イベント

これはイベントのある日付であり、暦日に_dot_でマークされます。

期間

-

4

範囲クラス

追加のスタイリングのためにカスタムCSSクラスを追加するために使用されます。

アレイ

-

5

*formatValue*

入力値をフォーマットし、新しい/フォーマットされた文字列値を返す関数です。 _values_は、選択した日付を表すアイテムで構成される配列です。

関数（p、値）

-

6

*monthNames*

これは、完全な月の配列です。

アレイ

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

7

*monthNamesShort*

これは、月名の短い形式の配列です。

アレイ

[「Jan」、「Feb」、「Mar」、「Apr」、「May」、「Jun」、「Jul」、「Aug」、「Sep」、「Oct」、「Nov」、「Dec」 ']

8

*dayNames*

平日の配列です。

アレイ

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

9

*dayNamesShort*

これは、曜日名の短い形式の配列です。

アレイ

[「Sun」、「Mon」、「Tue」、「Wed」、「Thu」、「Fri」、「Sat」]

10

*updateValuesOnTouchmove*

タッチが移動すると、ピッカーと入力値を更新します。

ブール値

true

11

初日

週の最初の日です。デフォルトでは、1-月曜日です。

数

1

12

*weekendDays*

週末のインデックス番号を持つ配列です。デフォルトでは、土曜日と日曜日です。

アレイ

{空} [0、6]

13

*dateFormat*

それはデフォルトの日付形式であり、以下は利用可能な式です-

'yyyy'-4桁の年です。
'yy'-2桁の年です。
'mm'-2桁の月番号、つまり 01から12まで。
'm'-1〜12の月数です。
'MM'-完全な月の名前です。
'M'-これは月の短い形式です。
'dd'-2桁の日番号、つまり 01から31まで。
'd'-1から31までの日数です。
'DD'-完全な曜日名です。
'D'-曜日名の短縮形です。

ひも

「yyyy-mm-dd」

14

複数

複数の日付/値を選択できます。

ブール値

偽

15

*rangePicker*

これを有効にすると、範囲ピッカーが有効になります。

ブール値

偽

16

方向

_horizontal_または_vertical_にできるのは月のレイアウト方向です。

ひも

水平

17

*minDate*

許可される最小の日付です。

Date

null

18

*maxDate*

それは最大許容日です。

Date

null

19

*touchmove*

これを有効にすると、タッチムーブ中にカレンダー月のスライドが指をたどります。

ブール値

true

20

アニメーション

これにより、月間の移行が可能になります。

ブール値

true

21

*closeOnSelect*

有効にすると、ユーザーが日付を選択するとカレンダーが閉じられます。

ブール値

偽

22

*weekHeader*

これは、平日の短い形式の週ヘッダーを表します。

ブール値

true

23

*monthPicker*

有効にした場合、ツールバーに月ピッカーを表示します。

ブール値

true

24

*monthPickerTemplate*

これは、月のピッカーHTMLテンプレートです。デフォルトでは、次のとおりです-

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

ひも

-

25

*yearPicker*

有効にすると、ツールバーに年ピッカーが表示されます。

ブール値

true

26

*yearPickerTemplate*

年ピッカーのHTMLテンプレートです。デフォルトでは、次のとおりです-

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

ひも

-

コールバック

1

*onChange*

ピッカーの値が変更されたときに実行されるのはコールバック関数です。 values_および_displayValues_配列をパラメーターとして受け入れ、各項目は関連列の_value _/ display value_を表します。

関数（p、値、displayValues）

-

2

*onMonthAdd*

新しく生成された月のHTML要素がカレンダーに追加されるときに実行されるのは、コールバック関数です。

関数（p、monthContainer）

-

3

*onDayClick*

ユーザーが日付をクリックすると、このコールバック関数が実行されます。

関数（p、dayContainer、年、月、日）

-

4

*onMonthYearChangeStart*

このコールバック関数は、別の月/年への移行の開始時に実行されます。

関数（p、年、月）

-

5

*onMonthYearChangeEnd*

このコールバック関数は、別の月/年への移行の終わりに実行されます。

関数（p、年、月）

-

6

*onOpen*

このコールバック関数は、ピッカーが開かれたときに実行されます。

関数（p）

-

7

*onClose*

このコールバック関数は、ピッカーが閉じられると実行されます。

関数（p）

-

期間

disabled _、 events 、 rangesClasses_などのカレンダーパラメーターは、いわゆる日付範囲を受け入れます。日付のすべての可能な組み合わせを指定してキャプチャするのは簡単です。次のコードは、日付で配列を使用する方法を示しています-

var myCalendar = myApp.calendar ({
   ...
  //Disabled 1st December 2016 and 10th December 2016:
   disabled: [new Date(2016, 12 , 1), new Date(2016, 12, 10)],
   ...
});

次のコードに示すように、_true_または_false_を返す必要があるカスタム関数を使用できます-

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

また、次のリストされた方法のいずれかを使用することができます-

_from_および_to_プロパティを持つオブジェクト。
_from_または_to_プロパティのみ。
日付とオブジェクトが混在する配列。

var myCalendar = myApp.calendar ({
   ...
  //Disable all dates between 1st December 2016 and 10th December 2016
   disabled: {
      from: new Date(2016, 12, 1),
      to: new Date(2016, 12, 10)
   },
   ...
});

Or

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

Or

var myCalendar = myApp.calendar ({
   ...
   events: [
      new Date(2016, 12, 1),
      new Date(2016, 12, 10),
      {
         from: new Date(2016, 12, 15),
         to: new Date(2016, 12, 20)
      },
      {
         from: new Date(2016, 12, 25),
         to: new Date(2016, 12, 30)
      }
   ],
   ...
});

範囲

次のコードに示すように、日付範囲とクラス名を持つオブジェクトの配列を取ります-

var myCalendar = myApp.calendar ({
   ...
  //Add classes for november and december
   rangesClasses: [
     //Add day-november class for all november dates
      {
        //string CSS class name for this range in cssClass property
         cssClass: 'day-november ',//string CSS class

        //Date Range in range property
         range: function (date) {
            return date.getMonth() === 11
         }
      },

     //Add day-holiday class for 1-10th December 2016
      {
         cssClass: 'day-holiday',
         range: {
            from: new Date(2016, 12, 1),
            to: new Date(2016, 12, 10)
         }
      }
   ],
   ...
});

Framework7-calendar-parameter

Framework7-カレンダーパラメーター

説明

期間

範囲

目次