Fullcalendar is absolutely stunning. I recently tried it out and now I would like to add a popover to provide event descriptions when clicked. Here's an example of what I'm aiming for: Although I'm not well-versed in json and javascript, I am eager to learn more about them. Can anyone offer assistance?
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)
] }
}
# overriding the json view is necessary to meet full_calendar's expectations.
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>