Fullcalendar Rails上的Popover Bootstrap

Fullcalendar非常漂亮。我尝试一下。我想尝试在每个事件中添加popover作为描述。如果我点击一个事件，那么弹出窗口会显示。如http://i.cubeupload.com/LuBXjx.png 我不明白关于json和javascript，但我想了解一切。任何人都可以帮助我？Fullcalendar Rails上的Popover Bootstrap

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>

来源

2012-12-16 GeekToL

你需要的是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, 
     }); 
    } 
});

来源

2012-12-16 23:56:23 tocallaghan

感谢的为您解答。不是eventRender，而是eventClick。 – GeekToL

我认为eventRender会更好，而不是每次点击事件时都会生成popover – tocallaghan

eventRender不适合我，但是eventAfterRender可以。 –

Fullcalendar Rails上的Popover Bootstrap

回答

相关问题