Question

您好我有以下haml javascript代码来呈现fullcalendar：

%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以便捕获用户点击的事件，但我无法进行fullcalendar显示我的身份。以下是其中一个事件的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 on 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代码上有它;如果你检查fullcalendar documentation我有一个Id属性，但我也不知道我做错了什么。

提前感谢您的帮助。

Answer 1

您可以使用侦听器eventClick并检查事件ID：

eventClick: function(event) {
    console.log(event.id);
}

或使用eventRender使用事件ID向元素添加属性：

eventRender: function ( event, element ) {
    element.attr( 'id', event.id );
}

fullcalendar设置一个id不起作用

1 个答案: