[fullcalendar]イベントへのオプションの付け方

はじめに

fullcalendarを使用している時に、jsonでのイベントへのオプションの付け方に関する分かりやすい記事がすぐに見つからなかったので、簡潔にまとめておきます。

こんな方にぜひ読んでいただきたい

• fullcalendarを初めて使用した
• fullcalendarを少しカスタマイズしたい
• オプションを付けたいけど、どうしたらいいのだろう？
• json　の使い方がわからない

[結論]公式ページ

以下のfullcalendar公式ページにも記載があります。

書き方は意外と簡単です。

前提

こちらの記事を参考に、fullcalendarの導入を行っています。

オプションの書き方

上記記事に、実は記載がありました。

view/events/index.json.jbuilder

json.array!(@events) do |event|
   json.id event.id
   json.title event.title
   json.start event.start  
   json.end event.end 
  end

 # json.〇〇は送るデータの型
 # event.〇〇はそれに対応するモデルのカルム

ただ、fullcalendar初使用の私には、これからオプションを追加するにはどうしたら良いかわからなかったのです...
これをさらにカスタマイズしていきます。

イベントをクリックした時の遷移先を設定したい時

view/events/index.json.jbuilder

json.array!(@events) do |event|
    json.id event.id
    json.title event.title
    json.start event.start  
    json.end event.end 

### 以下を追加 ###
    json.url event_path(event.id)
   end

必要に応じて、パスは変更できます。

色を変更したい時

view/events/index.json.jbuilder

json.array!(@events) do |event|
    json.id event.id
    json.title event.title
    json.start event.start  
    json.end event.end 

### 以下を追加 ###
    json.color "#2b2b2b"
   end

"#2b2b2b"の部分には希望の色を入力してください。
色は以下のページから検索可能です。

条件分けをしたい時

view/events/index.json.jbuilder

json.array!(@events) do |event|
    json.id event.id
    json.start event.start  
    json.end event.end 

### 以下を追加 ###
    case event.kind
    when "event"
        json.title "[予定] #{event.title}"
    when "todo"
        json.title "[TODO] #{events.title}"
    else
        json.title event.title
   end

上記では、eventテーブルのkindカラムによって条件分けをしていますが、必要に応じて変更してください。
もちろん、if文なども使用できます。

終わりに

できるようになると、とてもとても簡単な内容ですが、調べても調べてもこのような記事が出てきませんでした．．．
調べるのにかなり時間を費やしてしまったので、参考になれば幸いです。

お読みいただきありがとうございました。

参考

全て本記事内ですでに紹介したものですが、まとめておきます。

https://fullcalendar.io/docs/event-source-object
https://qiita.com/rakko1124/items/faa93cb7e81e312b9ae3
https://qiita.com/rakko1124/items/e9c3f8dccde6e2c11869
https://www.colordic.org/search