家にある一言入の日めくりカレンダーを見て、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);
},
});
今日あった良いことなどを入れてください。
コメントを残す