質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

2460閲覧

【Ruby on Rails + fullcalendar】fullcalendarの初期表示が出来ず、毎回F5で表示できます

pecchan

総合スコア555

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2017/05/10 20:42

Ruby on Railsにgemでfullcalendarを導入しました。

カレンダーを表示する(コントローラのアクションを呼ぶ)と何も表示されません。

毎回、更新(F5クリック)すると描画されます。

Ruby on Railsでfullcalendarを描画する際、皆さんはどのような設定をされているのでしょうか?

どうぞ宜しくお願い致します。

@@@@@@@@@@@@@以下コントローラ@@@@@@@@@@@@@

Topコントローラ

ruby

1class TopController < ApplicationController 2 3 def index 4 end 5 6 7end 8

カレンダーコントローラ

ruby

1class CalController < ApplicationController 2 3 def index 4 5 @datas = []; 6 for num in 1..3 do 7 @datas += [ 8 'title' => 'hoge'+ num.to_s, 9 'start' => '2017-05-0' + num.to_s, 10 'end' => '2017-05-0' + num.to_s, 11 'detail'=> 'aaa', 12 'color' => 'red', 13 'url' => '/cal/hoge' 14 ] 15 end 16 17 end 18 19 20end 21 22

@@@@@@@@@@@@@以下ビュー@@@@@@@@@@@@@

Top

ruby

1 2<a href="/cal/index">カレンダーへ</a> 3

カレンダー

ruby

1 2 <%= javascript_tag do %> 3 window.hoge_datas = <%= raw @datas.to_json %>; 4 <% end %> 5 6 <div id="calendar"></div> 7

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

うーん、もういっそのっこと$('#calendar').fullCalendar({});
をここで呼んじゃう。

ruby

1<%= javascript_tag do %> 2window.hoge_datas = <%= raw @datas.to_json %>; 3$('#calendar').fullCalendar({hoge_datas}); 4 <% end %> 5 <div id="calendar"></div>

もし無理だったら

<div id="calendar"></div>を<%= javascript_tag do %>の上においてください

まあ、turbolinksが原因と言えば原因なんですけど…。
turbolinksのせいというか
javascriptの基礎概念DOMがわかっていれば
こういうコードにはならないのかなぁともお思いますが。

基礎を学ぶか逆に、React.jsというトレンド乗っかって「DOM?ああ仮装DOMのことね」
とかいって私にも教えてくれると嬉しいです。

投稿2017/05/11 06:16

編集2017/05/11 06:19
moke

総合スコア2241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pecchan

2017/05/12 01:10

moke様 いつも有難う御座います。 すいません。こちらの投稿、登録寸前で解決したためキャンセルしたつもりでしたが 登録してしまっておりました。 jsで以下になっていたのを、 $(document).ready -> $('#calendar').fullCalendar events: window.hoge_datas return 以下のようにして解決できました document.addEventListener 'turbolinks:load', (e) -> $('#calendar').fullCalendar events: window.hoge_datas return jsの記載が抜けておりました。すみません。 「React.js」今から勉強します。 moke様に教えられるレベルはすいません、無理です・・・(+_+)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問