プログラミングに関する試行錯誤の記録を残します。ScriptPythonJavaScriptPHP【JavaScript】FullCalendarを使う時に設定する3つのこと2020.01.03JavaScriptHOMEJavaScript【JavaScript】FullCalendarを使う時に設定する3つのことJavaScriptでカレンダーを表示する時に非常に便利なライブラリであるFullCalendarですが、ただ導入するだけだと少し物足りない部分があります。物足りない部分とは、主に休日の背景色設定、祝日の設定などなど・・・。祝日の取得、背景色の設定についてシェアします。導入まで設定の前に導入について記載します。導入に関しては基本的に公式のドキュメントを読めば問題なく進めるかと思います。globals.公式ではnpm,yarm等のパッケージマネージャを使う方法と<script>タグを使う方法が記載されています。今回は<script>タグを使用して読み込みます。Startedのページからダウンロードし、展開します。library.展開後、以下のindex.html、calendar.jsを用意し、ライブラリを読み込みます。初期表示時は以下の表示。現在日付のみが背景色設定されていますが、これでは少し寂しい。現状では月、曜日等の表記が英語になっている為、日本語化する。index.html導入時にダウンロードしたzipに日本用のロケールファイルが含まれている為、対象ファイルを読み込む。src='calendar.js'></script>calendar.jsfullcalendarインスタンス生成時にlocaleを設定する。月、曜日等の表示が日本語になりました。通常「カレンダー」といえば、土曜日が青色、日曜日が赤色で表記される事が多いと思います。現状では土曜日、日曜日が平日と同様の表示なので、これを修正していきます。index.htmlカスタマイズ用のCSS、calendar.cssの読み込みを追加します。/>calendar.cssfullcalendarでは各曜日に対してclassが設定される為、このclassを使用して、土曜日のclass、日曜日のclassに対して背景色を設定します。背景色が設定されました。最後に祝日を表示します。使用する方法がヒットしました。同じ内容を書いてもあまり意味が無いので今回はUltraDate.jsを使用します。UltraDate.jsは以下から取得可能。作成者が日本の方なので、ドキュメントも日本語対応です。usersUltraDate.jshttps://hrdaya.github.io/UltraDate.js/index.html前述のUltraDate.jsを読み込みます。日本語化用のファイル(このファイルが重要)も一緒に読み込みます。src='calendar.js'></script>calendar.js各日付セルのレンダリンク時のフックを使用し、祝日の判定を行い、祝日の場合はその祝日名を返すようにします。});calendar.css上記JavaScriptで、祝日の時に祝日を示すclassを追加するように処理を追加したので、そのclassに対して背景色、文字色等を設定して整えます。最終的にこんな感じに表示されました。土日祝の表示がされ、標準的なカレンダーと言えるのではないでしょうか。投稿一覧SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#ができます。現在はVue.js、Python辺りを勉強中です。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。お問い合わせのページからご連絡下さい。2020.02.08Vue.jsの勉強を進めていてslotの考え方がわからなかったのですが、いわゆる「完全に理解した」くらいまでは理解が進んだかなと。2020.02.10探したけど見つからなかったので解説記事が見つからなかったのでシェアします。2019.12.12以前、Handsontableで添付ファイルを表示するカスタマイズを行いましたが、それに引き続きのカスタマイズです。Handsontableを使[...]スポンサーリンクプロフィールNaoki(@nkwtnb)SES→SES→受託開発と経験してきたプログラマです。JavaScript/Java/C#/Vue.js/Python/etc...作曲/編曲もします。勉強のアウトプットが目的のブログですが、誰かの役に立ったら嬉しいです。記事の内容について問い合わせ等ございましたら、お気軽にTwitterのリプかDM、またはお問い合わせのページからご連絡下さい。Ganttプラグインを使ってみた感想。