Qiita初投稿です。よろしくお願いします。
fullcelndarのイベントをユーザー詳細画面でそのユーザーのみのイベントで表示させる時に、苦戦したので備忘録として投稿させていただきます。
#準備
本記事は特定のイベントの表示を目的にしているため、準備は自分が参考にした記事を貼らせていただきますので、参考にしていただけたらと思います。この記事の通りに実装してもらったらカレンダーは表示できると思います。
参考記事
#目的
では、本来の目的であるユーザーのみのイベントを表示させていきます。
#実装
###ログイン機能の実装
gem 'devise'
$ bundle install
$ rails g devise:install
$ rails g devise User
$ rails db:migrate
$ rails g devise:views
これでユーザーの新規登録ができるようになりました。
###コントローラ
userのコントローラを作ります。
$ rails g controller users show
コントローラにイベントを取り出す記述をします。
class UsersController < ApplicationController
def show
@user = User.find(params[:id])
@events = @user.events
end
end
ユーザー詳細画面にカレンダーの記述をします。
<div id="calendar"></div>
これで表示されるはず、、ですが恐らくカレンダーだけ表示されてイベントがうまく表示されていないと思います。
原因はjson.jbuilderファイルにあります。
###json.jbuilderはどこを経由してデータを取得しているか
これを理解する必要があります。index画面でカレンダーを表示できたときのターミナルを見てみると
Processing by EventsController#index as JSON
とあります。
こちらから指示していないのにEventsControllerのindexアクションを探しに行っているのはなぜでしょう?
実は参考記事の中で指定していました。
$(function(){
・・・
$('#calendar').fullCalendar({
events: '/events.json'
});
events: '/events.json'という記述で上記のターミナルのような結果になっていました。
今はUsersControllerのshowアクションを探して欲しいので、以下の手順が必要になります。
###1. index.json.jbuilderをshow.json.jbuilderに変更し、usersディレクトリ内に移す。
そのまんまです。中身を少し弄ります。
###2. application.jsの記述をusers/show.html.erbに移す。
<div id="calendar"></div>
<script>
$(function () {
function eventCalendar() {
return $('#calendar').fullCalendar({});
};
function clearCalendar() {
$('#calendar').html('');
};
$(document).on('turbolinks:load', function () {
eventCalendar();
});
$(document).on('turbolinks:before-cache', clearCalendar);
$('#calendar').fullCalendar({
events: '/users/<%= @user.id %>',
//カレンダー上部を年月で表示させる
titleFormat: 'YYYY年 M月',
//曜日を日本語表示
dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
buttonText: {
prev: '前月',
next: '次月',
prevYear: '前年',
nextYear: '翌年',
today: '今日',
month: '月',
week: '週',
day: '日'
},
timeFormat: "HH:mm",
//イベントの色を変える
eventColor:'#63ceef',
//イベントの文字色を変える
eventTextColor: '#000000',
});
});
</script>
ユーザー詳細画面で表示させたいため、events: '/users/<%= @user.id %>'と記述しました。これでCustomersControllerのshowアクションを呼ぶことができます。カレンダーの表示はできましたか?
#まとめ
gemの動きだけではうまく表示できないので、jsonの知識が少し必要でした。
ご不明な点があれば、コメントしていただけたらと思います。