title: Popover Bootstrap On Fullcalendar Rails
body: <p>Fullcalendar is awesomely beautiful. i try it.
  I want to try adding popover on every event as a description. If i click an event, then popover will display. such as <a href="http://i.cubeupload.com/LuBXjx.png" rel="nofollow">http://i.cubeupload.com/LuBXjx.png</a>
  I do not understand about json and javascript but I want to learn about it all.
  anyone can help me?</p>
  
  <p><a href="http://twitter.github.com/bootstrap/javascript.html#popovers" rel="nofollow">Popover</a>
  calendars.js.coffee</p>
  
  <pre><code>$(document).ready -&gt;
    $('#test').fullCalendar
      header: 
        left: 'prev,next today',
        center: 'title',
        right: 'month'
      defaultView: 'month',
      height: 500,
  
  
  
      buttonText: {
          month: 'month',
          today: 'today'
      },
  
      eventSources: [{
        url: '/school/calendars',
      }],
  
  
      firstHour: 6,
      slotMinutes: 30,
      defaultEventMinutes: 120,
      axisFormat: 'H', 
      timeFormat: 'H(:mm)',
      dragOpacity: {
          agenda: 0.5
      },
      minTime: 0,
      maxTime: 24
  </code></pre>
  
  <p>on model/event.rb</p>
  
  <pre><code>scope :between, lambda {|start_time, end_time|
      {:conditions =&gt; [
    "starts_at &gt; ? and starts_at &lt; ?",
    Event.format_date(start_time), Event.format_date(end_time)
  ] }
    }
  
    # need to override the json view to return what full_calendar is expecting.
    # http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
    def as_json(options = {})
      {
        :id =&gt; self.id,
        :title =&gt;  self.name ,
        :description =&gt; self.description || "",
        :start =&gt; starts_at.rfc822,
        :end =&gt; ends_at.rfc822,
        :allDay =&gt; self.all_day,
        :recurring =&gt; false,
        #:color =&gt; "red"
      }
  
    end
  
    def self.format_date(date_time)
      Time.at(date_time.to_i).to_formatted_s(:db)
    end
  </code></pre>
  
  <p>on controller/school/calendars_controller.rb</p>
  
  <pre><code>@events = Event.scoped
  @events = Event.between(params['start'], params['end']) if (params['start'] &amp;&amp; params['end'])
      respond_to do |format|
                format.html # index.html.erb
                format.json { render json:  @events }
       end
  </code></pre>
  
  <p>this is popover</p>
  
  <pre><code>&lt;div class="popover right"&gt;
       &lt;div class="arrow"&gt;&lt;/div&gt;
           &lt;h3 class="popover-title"&gt; &lt;%= @event.nama %&gt; &lt;/h3&gt;
              &lt;div class="popover-content"&gt;
                &lt;p&gt;Start at : &lt;%= @event.starts_at %&gt;
                End at : &lt;%= @event.ends_at %&gt;
                Description : &lt;%= @event.description %&gt;
                &lt;br/&gt;
                &lt;/p&gt;
              &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>