カレンダーライブラリ flatpickr の onDayCreateイベントについて

JavaScriptでカレンダーUIのライブラリである flatpickrを用いてカレンダーを作成しています。

そこで flatpickrのイベントに　下記のような onDayCreateイベントがありました。

javascript
1onDayCreate: function (dObj, dStr, fp, dayElem) {
2 // dummy logic
3 if (Math.random() < 0.15)
4   dayElem.innerHTML += "<span class='event'></span>";
5   else if (Math.random() > 0.85)
6   dayElem.innerHTML += "<span class='event busy'></span>";
7}

このイベントのやっていることを想像するに dayElemというのがカレンダーの日付DOMだと想定ができます。
そして、それらにclassを付与することで色をつけているのだと思います。

そこで質問です。
例えば、2018年10月1日の日付（カレンダー上の）のみを赤色背景にしたいします。

そのような時にどのようなコードを書けば良いのでしょうか？

行動規範の内容に同意します

回答2件

それらにclassを付与することで色をつけているのだと思います。

いえ、日付のDOMの内側に新たなDOM（span）を追加することで色付け（というより下の小さい丸）をつけています。

例えば、2018年10月1日の日付（カレンダー上の）のみを赤色背景にしたいします。

そのような時にどのようなコードを書けば良いのでしょうか？　

試しながらやっていただきたいので、とりあえず方向性＋ヒントを。
ご希望の動作を行う場合、以下のように処理を分けて考えます。

2018年10月1日の日付だけ扱うにはどうするか
日付の背景色を変えるにはどうするのか

2018年10月1日の日付だけ抽出するにはどうするか

onDayCreate()には4つ引数があります。

dObj
dStr
fp
dayElem

この中から日付の比較に適しているものを探し、分岐させればよいでしょう。

それぞれ何を表しているかは公式ページなどを参考にするか、
onDayCreate()が呼ばれたタイミングでconsole.log()やconsole.dir()などで
出力を確認してみるとわかりやすいですね。

例：

javascript
1console.log(dObJ);
2console.dir(dayElem);

日付の背景色を変えるにはどうするのか

こちらは取得した日付のDOMにbackground-colorのstyleを当てればよいですね。
DOMにstyleを与える方法はいくつかありますが、代表的なのをあげておきます。

JavaScriptでDOMにstyleを追加（参考）
あらかじめCSSで特定のクラスを追加しておき、JavaScriptでDOMにクラスを追加する（参考）

お好きな方を、もしくは調べてみて合ったものをやってみるとよいでしょう。

わからない点は聞いていただきたく思いますが、とりあえずやってみることをお勧めします。
（やらずに「方法を教えてくれ」は丸投げととらえられてしまいますのでご注意を。）

投稿2018/09/29 15:46

dice142

総合スコア5158

ベストアンサー

こんにちは。

onDayCreate の引数 dayElem の dateObjプロパティに Dateオブジェクトが入ってますので、これを指定の日付と等しいかを判定し、等しければスタイルを変更します。以下、コード例を示します。

javascript
1const config = {
2  onDayCreate: function(dObj, dStr, fp, dayElem){    
3    if (moment(dayElem.dateObj).isSame('2018-10-01')) {
4      dayElem.style.backgroundColor = 'red';
5    }
6  }
7};
8
9flatpickr('.flatpickr', config);