見出し画像

Simple Calendar をカスタマイズする

https://github.com/excid3/simple_calendar
ほぼほぼここに書いてあることなのですが、備忘録として書いていきます。

■曜日を並び替える

日曜日を始まり(一番左)にしたい場合
Controllerに記載する


before_action :set_beginning_of_week

private
def set_beginning_of_week
  Date.beginning_of_week = :sunday
end

■背景を消す

デフォルトだと背景が週ごとにストライプになっていて、それを白一色にしたいとき

<table class="table table-striped">
からtable-stripedをとる

■当月以外の日付を非表示

.prev-month a {
  display: none;
}
.next-month a {
  display: none;
}

※aタグではなく、prev-month自体をdisplay: none;すると、前月のカレンダー自体が消え、当月のカレンダーの日付もずれます。

■曜日ごとに日付の色を変える

日曜を赤に、土曜日を青にする

.wday-0 a {
  color: red;
}
.wday-6 a {
   color: blue;
} 

■過去の日付だけ色を変えたい

.past a {
  color: gray;
}

■明日、明後日の日付のデザインを変更する

.today + .future a {
   color: #ffffff;
   background-color: orange;
 + .future a {
     color: #ffffff;
     background-color: orange;
 }
} 

この記事が気に入ったらサポートをしてみませんか?