How to add popup pannel in showing events in rails event_calendar plugin?

Question

I used rails event_calendar plug-in on my project and I need to do some modification in to calendar. When It shows events I need to pop-up a panel that shows details regarding that particular event. Please can some expert explain a solution for this problem ?

Answer 1

First of all you have to change html link into Ajax link as follow..

link_to_remote event.name, :url => {:controller => 'events', :action => 'get_events',:id=>event.id } 

you have to write your controller code to show event's details. In my case I wrote as follows..

def get_events
@event = Event.find(params[:id]) 
end

And also you have to create get_events.rjs file to load pop_up box as follows.

page.replace_html 'show_event', :partial => 'show_event'

page<< "$ ('#show_event_dialog').dialog({
    title: 'Event',
    modal: true,
    width: 500,
    close: function(event, ui) { $('#show_event_dialog').dialog('destroy') }

});"

Here show_event_dialog is the div where you want to load your pop_up panel.. Hope this will be helpful to you...

Answer 2

Assuming you're using the default example at https://github.com/elevation/event_calendar, you can put in your own custom solution with the link you render for each calendar event. In my case, I did something like this:

def event_calendar
  calendar event_calendar_opts do |args|
    event, day = args[:event], args[:day]
    html = link_to display_event_time(event, day) + h(event.name), [event.calendar, event], :class => "calendar-event", "data-id" => event.id
    html += event_tooltip(event)
  end
end

def event_tooltip(event)
   raw "<div id="event_#{event.id}" class='event-tooltip' style="display:none">#{event.description}</div>"
end

Then tied it all together unobtrusively in jQuery with something like:

jQuery(document).ready(function() {
   jQuery('.calendar-event').click(function() {
      // show your dialog here, you can use
      // jQuery("#"+jQuery(this).attr('data-id')) to find your appropriate
      // pop up then show it however you'd like.
   }
}

Not my exact code, but hope that gives you a starting point. You could also put all the elements you need in the link itself, such as "data-description" and "data-title" and avoid the div inserted hidden after each element and simply build one in JS as you need it.