datepickerを使ってカレンダーを表示出来た

質問

datepickerを使ってカレンダーを表示出来たのですが、そのカレンダーを付属画像の右側にある
カレンダーのようにしたいです。大まかで構いません。

コードは共有サイトwandleboxで下のURLにあります。

styleタグ内のｃｓｓにて
「/* カレンダーの装飾設定 */」にて曜日の日付などは赤や青で表示されるようにコード書いています。
付属画像のように普通の日にちの数字を四角くして、背景に色を付けたいです。また、＜前次＞という
文字を消去して、その下にある2021年と12月のセレクトボックスに色を付けたいです。

大まかで構いません。どうコードを書いたらよいでしょうか？
回答よろしくお願いいたします。

scriptタグ内で「// カレンダーを日本語化します。以下。」でカレンダーを日本語化しています。

ソースコード共有サイト
https://wandbox.org/permlink/QhIxDZ8RwQ3smiOb

回答No.1

dell_OK · ベストアンサー

日にちの四角については、こちらでスタイルシートを読み込んでみてください。
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
こちらを参考にしました。
https://www.fenet.jp/dotnet/column/engineers/6618/

お礼

ありがとうございました

回答No.2

superside0

細かい調整以前に
そもそも、jquery-ui.cssを読み込んでないので
ベースとなる表示さえできてない状態ですね。

datepickerの導入を参考にしたサイトをよくみて

<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
の下にでも
<link rel="stylesheet" href="{参考にしたサイトに書いているjquery-ui.cssのURL}">
を入れる必要があります。

お礼

ありがとうございました