fullcalendar set an id it's not working

Question

Hello I have the following haml javascript code to render a 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)',
  });
  });

as you can see I created the events using a ruby code and for every event I'm trying to add an Id in order to catch what event does the user makes click, but I can't make the fullcalendar to show my id. Here is a html example of one of the events:

<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>

this is the code generate by 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)',
      });
      });

as you can see I don't have an Id on the html tag, but I have it on the jquery code; also if you check the fullcalendar documentation I have an Id property, but I don't know what I'm doing wrong.

Thanks in advance for your help.

in your first block of code replace `%script(type="text/javascript")` with `:javascript` — Gagan Gami, Sep 09 '14 at 08:58
@Gagan If I change to the :javascript tag, my ruby code stop working, I know this is weird but this is the reason why I use %script(type="text/javascript") instead :javascript — Jean, Sep 09 '14 at 09:39

score 3 · Accepted Answer · answered Sep 09 '14 at 09:27

You can use the listener eventClick and check for the Event ID:

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

Or use eventRender to add an attribute to the Element using the Event ID:

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

fullcalendar set an id it's not working

1 Answers1