Fullcalendar Rails 上的 Popover Bootstrap

Question

Fullcalendar 非常漂亮。我试试看。 我想尝试在每个事件上添加弹出框作为描述。如果我单击一个事件，则会显示弹出框。如http://i.cubeupload.com/LuBXjx.png 我不了解 json 和 javascript，但我想了解这一切。 谁能帮帮我？

Popover calendars.js.coffee

$(document).ready ->
  $('#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

关于模型/event.rb

scope :between, lambda {|start_time, end_time|
    {:conditions => [
  "starts_at > ? and starts_at < ?",
  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 => self.id,
      :title =>  self.name ,
      :description => self.description || "",
      :start => starts_at.rfc822,
      :end => ends_at.rfc822,
      :allDay => self.all_day,
      :recurring => false,
      #:color => "red"
    }

  end

  def self.format_date(date_time)
    Time.at(date_time.to_i).to_formatted_s(:db)
  end

在控制器/学校/calendars_controller.rb

@events = Event.scoped
@events = Event.between(params['start'], params['end']) if (params['start'] && params['end'])
    respond_to do |format|
              format.html # index.html.erb
              format.json { render json:  @events }
     end

这是弹出窗口

<div class="popover right">
     <div class="arrow"></div>
         <h3 class="popover-title"> <%= @event.nama %> </h3>
            <div class="popover-content">
              <p>Start at : <%= @event.starts_at %>
              End at : <%= @event.ends_at %>
              Description : <%= @event.description %>
              <br/>
              </p>
            </div>
</div> 

Answer 1

您需要的是eventRender 回调，它允许您操纵每个事件。

$('#calendar').fullCalendar({
    ...
    eventRender: function (event, element) {
        element.popover({
            title: event.nama,
            placement: 'right',
            content: + '<br />Start: ' + event.starts_at + '<br />End: ' + event.ends_at + '<br />Description: ' + event.description,
        });
    }
});