完整日历 设置一个 ID 它不起作用



你好,我有以下用于呈现完整日历的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 );
}

相关内容

  • 没有找到相关文章

最新更新