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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

8824閲覧

fullcalendarのeventRenderが発火しない

icuu0608

総合スコア10

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/02/08 11:24

fullcalendarにて、eventRenderを設定して各イベントの描画を編集したいのですが、
以下のコードではeventRenderが発火されません。

デバッガで追ったところ、以下fullcalendar.js抜粋コード中のcustomの中身が"undefined"であることから発火していないことを確認しました。
分けもわからず、eventRenderをeventAfterRenderに変えて試みてもだめでした。
eventRenderを発火させるためにはどうしたらよいでしょうか?

event.js

lang

1var updateEvent; 2 3$(document).ready(function() { 4 return $('#calendar').fullCalendar({ 5 editable: true, 6 header: { 7 left: 'prev,next today', 8 center: 'title', 9 right: 'month,agendaWeek,agendaDay' 10 }, 11 defaultView: 'month', 12 height: 500, 13 slotMinutes: 30, 14 eventSources: [ 15 { 16 url: '/events' 17 } 18 ], 19 timeFormat: 'h:mm t{ - h:mm t} ', 20 dragOpacity: "0.5", 21 eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) { 22 return updateEvent(event); 23 }, 24 eventResize: function(event, dayDelta, minuteDelta, revertFunc) { 25 return updateEvent(event); 26 }, 27 eventRender: function (event, element) { 28 if ((event.color).toString() == "blue") 29 { 30 element.find(".fc-event").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/blue.png\" width='20px'/>" )); 31 } 32 if ((event.color).toString() == "red") { 33 element.find(".fc-event").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/blue.png\" width='20px'/>")); 34 } 35 if ((event.color).toString() == "green") { 36 element.find(".fc-event").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/blue.png\" width='20px'/>")); 37 } 38 }, 39 }); 40}); 41 42updateEvent = function(the_event) { 43 return $.update("/events/" + the_event.id, { 44 event: { 45 title: the_event.title, 46 starts_at: "" + the_event.start, 47 ends_at: "" + the_event.end, 48 color: the_event.color 49 } 50 }); 51}; 52 53

fullcalendar.js抜粋

lang

1 // Given an event and the default element used for rendering, returns the element that should actually be used. 2 // Basically runs events and elements through the eventRender hook. 3 resolveEventEl: function(event, el) { 4 var custom = this.trigger('eventRender', event, event, el); 5 6 if (custom === false) { // means don't render at all 7 el = null; 8 } 9 else if (custom && custom !== true) { 10 el = $(custom); 11 } 12 13 return el; 14 },

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

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

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

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

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

guest

回答1

0

自己解決

挿入箇所をevents.jsではなく、calendar.jsに記述したところ発火するようになりました。

calendar.js

lang

1var updateEvent; 2 3$(document).ready(function() { 4 $('#calendar').fullCalendar({ 5 eventSources: [ 6 { 7 url: '/events' 8 } 9 ], 10 eventClick: function(event) { 11 if (event.url) { 12 //idの前になぜか"."が入るので"/"に書き換え 13 event.url = event.url.replace(".", "/") 14 window.open(event.url); 15 return false; 16 } 17 }, 18 // 時間の書式 19 timeFormat: 'H(:mm)', 20 eventMouseover: function(event) { 21 $(this).smallipop( { 22 theme: 'black', 23 popupDistance: 0, 24 popupYOffset: -14, 25 popupAnimationSpeed: 100 26 }, 27 event.start.toLocaleString() + "-" + event.title 28 ); 29 }, 30 // 列の書式 31 columnFormat: { 32 month: 'ddd', // 月 33 week: "d'('ddd')'", // 7(月) 34 day: "d'('ddd')'" // 7(月) 35 }, 36 // タイトルの書式 37 titleFormat: { 38 month: 'YYYY年M月' // 2013年9月 39 }, 40 // ボタン文字列 41 buttonText: { 42 today: '今日', 43 month: '月', 44 week: '週', 45 day: '日' 46 }, 47 // 月名称 48 monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 49 // 月略称 50 monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 51 // 曜日名称 52 dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'], 53 // 曜日略称 54 dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'], 55 eventAfterRender: function (event, element) { 56 if ((event.color).toString() == "blue") 57 { 58 element.find(".fc-event").after($("<span class=\"fc-event-icons\"></span>").html("<a>hoge</a><img src=\"/images/cinema.png\" width='20px'/>" )); 59 } 60 if ((event.color).toString() == "red") { 61 element.find(".fc-event").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/music.png\" width='20px'/>")); 62 } 63 if ((event.color).toString() == "green") { 64 element.find(".fc-event").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"/images/ruby.png\" width='20px'/>")); 65 } 66 } 67 }); 68});

投稿2015/02/08 12:08

icuu0608

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問