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資料]
// 若干いじくりました
<div id='calendar'>を記述することでイベントが全部書かれるようになってます。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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/03/04 07:02
2016/03/04 07:04
2016/03/04 07:14
2016/03/04 07:25
2016/03/04 07:35
2016/03/04 07:39
2016/03/04 07:53
2016/03/04 08:05