0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

fullcalendarのイベントを特定の条件のイベントだけ表示させる方法

Posted at

Qiita初投稿です。よろしくお願いします。
fullcelndarのイベントをユーザー詳細画面でそのユーザーのみのイベントで表示させる時に、苦戦したので備忘録として投稿させていただきます。

#準備
本記事は特定のイベントの表示を目的にしているため、準備は自分が参考にした記事を貼らせていただきますので、参考にしていただけたらと思います。この記事の通りに実装してもらったらカレンダーは表示できると思います。
参考記事

#目的
では、本来の目的であるユーザーのみのイベントを表示させていきます。

#実装
###ログイン機能の実装

Gemfile
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

コントローラにイベントを取り出す記述をします。

app/controllers/users_controller.rb
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @events = @user.events
  end
end

ユーザー詳細画面にカレンダーの記述をします。

app/views/users/show.html.erb
<div id="calendar"></div>

これで表示されるはず、、ですが恐らくカレンダーだけ表示されてイベントがうまく表示されていないと思います。
原因はjson.jbuilderファイルにあります。

###json.jbuilderはどこを経由してデータを取得しているか
これを理解する必要があります。index画面でカレンダーを表示できたときのターミナルを見てみると

ターミナル
Processing by EventsController#index as JSON

とあります。
こちらから指示していないのにEventsControllerのindexアクションを探しに行っているのはなぜでしょう?
実は参考記事の中で指定していました。

application.js
$(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に移す。

app/views/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の知識が少し必要でした。
ご不明な点があれば、コメントしていただけたらと思います。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?