你好,我有以下用于呈现完整日历的haml javascript代码:
%script(type="text/javascript")
$(document).ready(function (){
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
editable: false,
eventLimit: true,
events: [
- @kid.availabilities.order("availability_date desc").each do |availability|
{
id: "#{availability.id}",
title: "Available",
start: "#{availability.availability_date.to_datetime.strftime("%Y-%m-%dT%H:%M:%S")}",
end: "#{availability.end_availability_date.to_datetime.strftime("%Y-%m-%dT%H:%M:%S")}",
url: "#",
description: 'This is a cool event'
},
],
timeFormat: 'H(:mm)',
});
});
正如你所看到的,我使用ruby代码创建了事件,对于每个事件,我都试图添加一个Id,以捕捉用户点击的事件,但我无法制作完整的日历来显示我的Id。以下是其中一个事件的html示例:
<div class="fc-event-container">
<a class="fc-time-grid-event fc-event fc-start fc-end" href="#" style="top: 379px; bottom: -417px; z-index: 1; left: 0%; right: 0%;">
<div class="fc-content">
<div class="fc-time" data-start="10" data-full="10:00 AM - 11:00 AM">
<span>10 - 11</span>
</div>
<div class="fc-title">Available</div>
</div>
<div class="fc-bg"></div>
</a>
</div>
这是ruby在rails上生成的代码:
$(document).ready(function (){
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
editable: false,
eventLimit: true,
events: [
{
id: "540dc2d320db90214f0003d6",
title: "Available",
start: "2014-09-09T16:00:00",
end: "2014-09-09T17:00:00",
url: "#",
description: 'This is a cool event'
},
{
id: "540dc32c20db90214f0003dc",
title: "Available",
start: "2014-09-09T17:00:00",
end: "2014-09-09T18:00:00",
url: "#",
description: 'This is a cool event'
},
{
id: "540dc33320db90214f0003e0",
title: "Available",
start: "2014-09-09T18:00:00",
end: "2014-09-09T19:00:00",
url: "#",
description: 'This is a cool event'
},
{
id: "540dc38820db90214f0003e5",
title: "Available",
start: "2014-09-09T19:00:00",
end: "2014-09-09T20:00:00",
url: "#",
description: 'This is a cool event'
},
{
id: "540dc39520db90214f0003e9",
title: "Available",
start: "2014-09-09T20:00:00",
end: "2014-09-09T21:00:00",
url: "#",
description: 'This is a cool event'
},
{
id: "540eba1a20db900512000003",
title: "Available",
start: "2014-09-10T10:00:00",
end: "2014-09-10T11:00:00",
url: "#",
description: 'This is a cool event'
},
{
id: "540eba4620db900512000008",
title: "Available",
start: "2014-09-11T10:00:00",
end: "2014-09-11T11:00:00",
url: "#",
description: 'This is a cool event'
},
{
id: "540eba7c20db90051200000d",
title: "Available",
start: "2014-09-10T12:00:00",
end: "2014-09-10T13:00:00",
url: "#",
description: 'This is a cool event'
},
],
timeFormat: 'H(:mm)',
});
});
正如你所看到的,我在html标签上没有Id,但在jquery代码上有它;如果你查看完整的日历文档,我有一个Id属性,但我不知道我做错了什么。
提前感谢您的帮助。
您可以使用侦听器eventClick
并检查事件ID:
eventClick: function(event) {
console.log(event.id);
}
或者使用eventRender
使用事件ID:向元素添加属性
eventRender: function ( event, element ) {
element.attr( 'id', event.id );
}