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

3
SL_User 29 Авг 2011 в 15:03

2 ответа

Лучший ответ

Прежде всего вам нужно изменить ссылку 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 для загрузки всплывающего окна следующим образом.

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, в который вы хотите загрузить всплывающую панель .. Надеюсь, это будет вам полезно ...

2
Rosh 19 Окт 2011 в 09:05

Предполагая, что вы используете пример по умолчанию на 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 по мере необходимости.

1
Kristian PD 29 Авг 2011 в 11:24