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 .png I do not understand about json and javascript but I want to learn about it all. anyone can help me?

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

on model/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.
  # /
  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

on controller/school/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

this is popover

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

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 http://i.cubeupload./LuBXjx.png I do not understand about json and javascript but I want to learn about it all. anyone can help me?

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

on model/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./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

on controller/school/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

this is popover

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

• javascript
• ruby-on-rails
• json
• twitter-bootstrap
• fullcalendar

1 Answer 1

What you need is the eventRender callback, which allows you to manipulate each event.

$('#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,
        });
    }
});