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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

7940閲覧

fullCalendar.jsのイベント毎にidを指定する方法

KF_sys67_n

総合スコア20

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/03/04 06:08

編集2016/03/04 07:17

HTML上で高度なカレンダーを実装するjQueryプラグインの一つ・fullCalendar.jsに関して質問です。
イベントを入力した後、table内のイベントを指定したdiv要素(class="fc-content"のものです)に対して一つ一つIDを指定し、:hover疑似クラスに対してCSSを用いてイベントの説明文を表示する、というものを実装したいのですが、イベントに対するID指定の方法が分からず行き詰ってます(events配列内でイベントに対しid指定する(cf.background-events.html-L39)方法では要素ごとにid指定できませんでした)。
イベントごとにid指定する方法をご存知の方、ぜひ教えていただきたいです(もしくはid指定しなくてもこのように実装する方法がありましたらそちらでも構いません)。宜しくお願いします。

[参考:fullCalendar.js内のdemo資料]
// 若干いじくりました

html5

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset='utf-8' /> 5<link href='../fullcalendar.css' rel='stylesheet' /> 6<link href='../fullcalendar.print.css' rel='stylesheet' media='print' /> 7<script src='../lib/moment.min.js'></script> 8<script src='../lib/jquery.min.js'></script> 9<script src='../fullcalendar.min.js'></script> 10<script> 11 12 $(document).ready(function() { 13 $('#calendar').fullCalendar({ 14 header: { 15 left: 'prev,next today', 16 center: 'title', 17 right: 'month,agendaWeek,agendaDay' 18 }, 19 defaultDate: '2016-01-12', 20 businessHours: true, // display business hours 21 editable: true, 22 events: [ 23 { 24 title: 'Business Lunch', 25 start: '2016-01-03T13:00:00', 26 constraint: 'businessHours' 27 }, 28 { 29 title: 'Meeting', 30 start: '2016-01-13T11:00:00', 31 constraint: 'availableForMeeting', // defined below 32 color: '#257e4a' 33 }, 34 { 35 title: 'Conference', 36 start: '2016-01-18', 37 end: '2016-01-20', 38 id:444 39 }, 40 { 41 title: 'Party', 42 start: '2016-01-29T20:00:00' 43 }, 44 45 // areas where "Meeting" must be dropped 46 { 47 id: 'availableForMeeting', 48 start: '2016-01-11T10:00:00', 49 end: '2016-01-11T16:00:00', 50 rendering: 'background' 51 }, 52 { 53 id: 'availableForMeeting', 54 start: '2016-01-13T10:00:00', 55 end: '2016-01-13T16:00:00', 56 rendering: 'background' 57 }, 58 59 // red areas where no events can be dropped 60 { 61 start: '2016-01-24', 62 end: '2016-01-28', 63 overlap: false, 64 rendering: 'background', 65 color: '#ff9f89' 66 }, 67 { 68 start: '2016-01-06', 69 end: '2016-01-08', 70 overlap: false, 71 rendering: 'background', 72 color: '#ff9f89' 73 } 74 ] 75 }); 76 }); 77</script> 78<style> 79 80 body { 81 margin: 40px 10px; 82 padding: 0; 83 font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 84 font-size: 14px; 85 } 86 87 #calendar { 88 max-width: 900px; 89 margin: 0 auto; 90 } 91 92</style> 93</head> 94<body> 95 <div id='calendar'></div> 96</body> 97</html> 98
<div id='calendar'>を記述することでイベントが全部書かれるようになってます。

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

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

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

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

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

guest

回答1

0

ベストアンサー

カレンダーのセル1つ1つにIDをつけるのは避けたほうが良いです。

イベントが発生したらthisで拾えませんか?
thisに対して属性など付与できると思います。

確認したい場所に

console.log(this);

を追記して、Google Chromeで見て見てください。
Google Chromeでコンソールを出すには、Ctrl+Shift+Iキーを押します。

投稿2016/03/04 06:19

ogaaaan

総合スコア765

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

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

KF_sys67_n

2016/03/04 07:02

試してみましたが、一つの関数の中でtableの中身すべてを叙述してしまう形のため、console.log(this);を用いるとdocument全体を呼び出してしまう形になってしまいます。 アドバイスありがとうございます。もう少し試してみます。
ogaaaan

2016/03/04 07:04

fullcalendar.jsのバージョン教えてもらえますか。 あと、呼び出し時にオプションとか書かれてるようなら、そこらへんまとめてソースコードを質問内に貼り付けておいてもらえると調査しやすいっす。
KF_sys67_n

2016/03/04 07:14

バージョンは2.6.1です(数時間前にDLしたのでおそらく最新のはずです)。ソースコードはfullcalendar.js > demos内のbackground-events.htmlと同じものです。一応質問の中に書いておきますね。
ogaaaan

2016/03/04 07:25

お!あざっす! では、 events: の上あたりに、 eventMouseover: function (e, j, v) { console.log(this); } など追記して、セルをマウスオーバーしてみてもらえますか?
KF_sys67_n

2016/03/04 07:35

位置を変えたりもしてみましたが今のところうまくいきません。 eventMouseoverで調べたらそれらしきページがいくつか出てきたので、突っ込んで調べてみます。
ogaaaan

2016/03/04 07:39

なるほど、失礼しました。 今手が空いたので、ダウンロードして実際に自分でやってみました。 eventMouseover: function(e, $e) { console.log(e.title); }, これで予定のタイトルは拾えます。 何かヒントになれば幸いです。 あと、ここにAPIリファレンスがあるのでご参考まで! http://fullcalendar.io/docs/
KF_sys67_n

2016/03/04 07:53

イベント名拾えました! 取りあえずjs駆使して色々と試してみます。ありがとうございます!
ogaaaan

2016/03/04 08:05

こちらこそー!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問