カレンダー表示を行うカレンダーコンポーネント（その5）「マーカーを付ける」
カレンダーコンポーネントの使い方、第五弾です。今回はカレンダーの日付にマーキングをします。デモはこちらにあります。実際に動いているところは下記の画像で確認できます。
日付を指定しておいて、マーカーを付けるボタンをクリックすると日付のところにマークが付きます。
HTMLの形
HTMLは次のようになります。マーカーをつけるためのボタンを設置します。
JavaScript側の処理
そしてJavaScritp側ではカレンダーコンポーネントの読み込みと、ボタンを押した時の処理を実装します。
ボタンを押した時の処理は次のようになります。calendarController.setMarkerに日付と、マーカーをつけるか否かを二つ目の引数で指定します。日付の選択は複数可能なので、配列を順番に処理しています。
今回のデモはこちらで確認できます。カレンダーの中で特別な日付にマーカーを付けたり、データの有無をフラグで示したいと言った時に使えるでしょう。
コメントする
