Как добавить всплывающую панель при отображении событий в плагине rails event_calendar?

Question

Я использовал плагин rails event_calendar в своем проекте, и мне нужно внести некоторые изменения в календарь.Когда он показывает события, мне нужно открыть панель, которая показывает детали относительно этого конкретного события.Может, какой-нибудь эксперт объяснит решение этой проблемы?

Answer 1

Прежде всего вы должны изменить ссылку html на ссылку Ajax следующим образом.

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

Вы должны написать свой код контроллера, чтобы показать подробности события.В моем случае я написал следующее ..

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

А также вам нужно создать файл get_events.rjs для загрузки окна pop_up следующим образом.

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') }

});"

Здесь show_event_dialog - это div, куда вы хотите загрузить панель pop_up. Надеюсь, это будет вам полезно ...

Answer 2

Предполагая, что вы используете пример по умолчанию https://github.com/elevation/event_calendar,, вы можете добавить собственное решение со ссылкой, отображаемой для каждого события календаря.В моем случае я сделал что-то вроде этого:

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

Затем незаметно связал все это вместе в jQuery с чем-то вроде:

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

Не мой точный код, но надеюсь, что это дает вамотправная точка.Вы также можете поместить все необходимые элементы в саму ссылку, такие как «data-description» и «data-title», и избежать вставки div, скрытого после каждого элемента, и просто создать его в JS по мере необходимости.