Datepickerライブラリ「Flatpickr」を使って日めくり不要カレンダーを作りました

Pocket

家にある一言入の日めくりカレンダーを見て、SVGを使い一言入りカレンダーを作ってみました。

日めくらないカレンダー

ページ表示時に現在日付を設定しているので、日めくり不要の仕様となってます。

デザインは中央で二分割して左に日付、右に一言入れられます。日めくりカレンダーの様に日を大きくし、右のテキストは入力する文字数毎に大きさが変化します。

色は青いグラデーションを使用し、スライダーで色相を変更できるようにしました。

日付の選択は軽量datepickerライブラリの「Flatpickr」を使用し、日付の変更が簡単にできます。

FlatPickrの設定方法

CDNを読み込みます

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

日本語化

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

テーマをダークに

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css">

テーマの種類はこちらから確認できます

https://flatpickr.js.org/themes/

CDNを読み込んだら入力フォームを設置し

<input type="text" id="flatpickr">

以下の様に呼び出すと動作します。

<script>
flatpickr('#flatpickr',{
  locale:'ja'  //日本語化
});
</script>

その他のオプションは以下のサンプルが参考になります。

https://flatpickr.js.org/options/

SVG要素への日付の設定方法

readyイベントとchangeイベントでSVGテキスト要素に月日を設定しています。

//月の英語表記を返す
 function getEnMonth(month) {
    const monthList = ['January','February','March','April','May','June','July','August','September','October','November','December'];
    return monthList[month];
 }
 flatpickr('#flatpickr', {
            locale:'ja',　        //日本語化
            dateFormat: 'Y/m/d',  //日付フォーマット 
            defaultDate: 'today', //デフォルトに現在日付を設定
            onReady: function(selectedDates, dateStr, instance) {
                let month=selectedDates[0].getMonth();
                let day=selectedDates[0].getDate();

                //SVGテキスト要素に設定
                $('#s-text-1').text(getEnMonth(month));
                $('#s-text-2').text(day);
            },
            onChange: function(selectedDates, dateStr, instance) {
                let month=selectedDates[0].getMonth();
                let day=selectedDates[0].getDate();

                //SVGテキスト要素に設定
                $('#s-text-1').text(getEnMonth(month));
                $('#s-text-2').text(day);
            },

        });

今日あった良いことなどを入れてください。

日めくらないカレンダー

Pocket