ダッシュで奪取

レガシーSIer → webエンジニア(見習い) 新しく知ったことのメモを書いています。

【Rails】たのしいFullCalendar(2)カスタマイズ編

前回の続きになります。
カレンダーの色を変えたり、ボタンを変更してみたりします!

タイトルに堂々とRails!!なんて書いていますが、今回いじるのはJavaScriptとcssです…

目標

f:id:kyoruni:20190921224211p:plain こんな感じにします!

目次

  1. デフォルト
  2. ヘッダー項目を変更
  3. ボタンのテキストを変更
  4. 枠線の色を変更
  5. ヘッダー部分の背景色を変更
  6. 土曜日は青文字、日曜日は赤文字で表示
  7. 月曜始まりにする
  8. 参考URL

1. デフォルト

f:id:kyoruni:20190824145311p:plain

app/assets/javascripts/calendar.js
$("#calendar").fullCalendar({});

2. ヘッダー項目を変更

f:id:kyoruni:20190824151921p:plain

app/assets/javascripts/calendar.js
  $("#calendar").fullCalendar({
    header: {
      left: "prevYear,prev",
      center: "title,today,month,agendaWeek,agendaDay,listYear",
      right: "next,nextYear"
    }
  });

header: {〜}の中に下記を記述することで、ヘッダーの左・中央・右に任意のボタンを設置できます。

オプション値 説明
today 今日
prevYear 一年前
nextYear 一年後
prev 前月
next 次月
month 月別カレンダー
agendaWeek 週間カレンダー
listYear 予定リスト

フッターに表示することもできます! f:id:kyoruni:20190824151109p:plain

app/assets/javascripts/calendar.js
  $("#calendar").fullCalendar({
    header: {
      // ヘッダーは省略するとデフォルト項目が表示されるので、
      // 何も表示しないときは空文字を入れておく
      left: "",
      center: "title",
      right: ""
    },
    footer: {
      left: "prev,next"
    }
  });

3. ボタンのテキストを変更

f:id:kyoruni:20190921221320p:plain

app/assets/javascripts/calendar.js
  $("#calendar").fullCalendar({
    buttonText: {
      today: "きょう",
      next: "つぎ",
      prev: "まえ"
    }
  });

buttonTextに値を設定することで、表示文字を変更できます!

4. 枠線の色を変更

f:id:kyoruni:20190921222909p:plain

app/assets/stylesheets/application.css
.fc-unthemed th,
.fc-unthemed td {
  border-color: #b8b5f4;
}

デフォルトのcssを上書きして設定。

5. ヘッダー部分の背景色を変更

f:id:kyoruni:20190921223146p:plain

app/assets/stylesheets/application.css
.fc-day-header {
  background: #efd2f7;
}

これもcssで!

6. 土曜日は青文字、日曜日は赤文字で表示

f:id:kyoruni:20190921223338p:plain

app/assets/stylesheets/application.css
.fc-sat {
  color: blue;
}

.fc-sun {
  color: red;
}

これもcssで設定。
他の曜日にも個別で適用したい場合は、.fc-mon とか .fc-tue のような感じで…

7. 月曜始まりにする

f:id:kyoruni:20190921224211p:plain

app/assets/javascripts/calendar.js
  $("#calendar").fullCalendar({
    firstDay: 1
  });

fitstDay オプションに指定した曜日から、カレンダーが始まるようになります。
0が日曜日・6が土曜日なので、月曜始まりにしたい場合は1を指定。

8. 参考URL

次回は、DBから予定を取得して表示します。