jQuery UI Datepickerプラグインのサイズ変更

jQuery UI Datepickerファイルの確認

jQueryのカレンダーをWebサイトやブログ等に設置したい場合,カレンダーのサイズがデフォルトのままではどうも少し大きい、あるいは小さいなどと、ページに合うサイズに変えたいことがあると思います。

そこで、カレンダーのサイズを自分好みに簡単に変える方法について、ご紹介したいと思います（備忘録）。
なお、当サイトはホームページ製作初級者用です、ご参考にして下さい。

本稿で行うことは、CSSプロパティに変更を少々加えるだけの簡単なものです。それではまず始めに、jQuery UI Datepickerファイルはダウンロード済で、htmlページのheadタグには以下のように設定されているものとします。

              <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.css">
              <script src="jquery-ui-1.12.1.custom/jquery-3.2.1.min.js"></script>
              <script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
              <script src="jquery-ui-1.12.1.custom/datepicker-ja.js"></script>

プロパティ値を変更

・その１
上記の「jquery-ui.css」ファイルのプロパティ値を変更します。
402行あたり

							.ui-datepicker {
							  width: 17em;
							  padding: .2em .2em 0;
							  display: none;
							}

ここは、カレンダーのヘッダーの幅（width）を決めているCSSです。
デフォルトでは17emに設定されています。この値を変えることでヘッダー部の幅を調整することができます。

・その２
もう一か所、473行あたりに

							.ui-datepicker td span,
							.ui-datepicker td a {
							  display: block;
							  padding: .2em;
							  text-align: right;
							  text-decoration: none; 
							}

ここは日付部のCSSです。

paddingの値の変更と、「font-size」を追加し適当な値を設定することで
日付部のサイズ（幅）を調整することができます。

							.ui-datepicker td span,
							.ui-datepicker td a {
							  display: block;
							  font-size: 0.9rem; /*任意な値を追加して調整*/
							  padding: .2em;
							  text-align: right;
							  text-decoration: none; 
							}

以上、2か所のCSSの編集でOkです。
又、ダウンロードファイルに手を付けたくなければ、上記のCSSをhtmlページのhead内に貼り付けて
下さい。

この方法が手っ取り早いかもしれません。