0

私はJSとJqueryが初めてです。私はスケジューリングアプリを構築しています。「イベント」というモデルに予定を保存しています。ヘルパーを使用して、ユーザーが予定を立てる可能性のある特定の日の「event.time_start」および「event.time_end」という列の値から多次元配列を作成しています。ユーザーがドロップダウン メニューから start_time と end_time を選択すると、既に予定がある時間はグレー表示/「無効」になります。http://jonthornton.github.io/jquery-timepicker/でjquery.timepickerをレールとともに使用して、指定された時間ペアの配列 ([午前 8 時、午後 6 時]、[午後 1 時、午後 2 時]) で特定の時間値をブロックしています。
変数 @other_events を使用して、特定の日の「その他の」イベント (どの時間が取られるかを通知するもの) を見つけています。

これは、event.start_time と event.end_time をペアにするヘルパーです。
events_helper.erb

module EventsHelper

    def taken_times(other_events)
      other_events.map { |event| [event.time_start, event.time_end] }
      @taken_times = taken_times(other_events)
    end
end



ビューで配列を次のように機能させることができます。

<% taken_times(@other_events).each do |taken_time| %>
  <%= taken_time.first.strftime("%l:%M %P")%>
  <%= taken_time.last.strftime("%l:%M %P")%>,
 <% end %>

しかし、JSで動作させることはできません。私は今、Gon Gem を使用しようとしています。出力する必要があるのは次のとおりです。

events/show.html.erb ビュー

 <script>
     $('#jqueryExample .time').timepicker({
         'timeFormat': 'g:ia',
            'disableTimeRanges':   [
      // start dynamic array
    ['10:00am', '10:15am'],
    ['1:00pm', '2:15pm'],
    ['5:00pm', '5:15pm']
]
      //end dynamic array
     });
        $('#jqueryExample').datepair();
        </script>

だから私は試しました

application.html.erb

  <%= Gon::Base.render_data({}) %>

events_controller.erb

def show
 @event = Event.new
 @other_events = Event.where(date_id: params[:id])
 gon.taken_times = @taken_times
end

JSで

 <script>
     $('#jqueryExample .time').timepicker({
         'timeFormat': 'g:ia',
            'disableTimeRanges':   [
      // start dynamic array
     gon.taken_times
      //end dynamic array
     });
        $('#jqueryExample').datepair();
        </script>

しかし、これは機能しません。テキストフィールドのドロップダウン機能を殺すだけです。「'timeFormat': 'g:ia'」や「disableTimeRanges: [....]」などのカンマ区切りのオブジェクトが何と呼ばれているかを知りたいので、SO で JavaScript の回答をより適切に検索できます。私はJSとJQueryが初めてです。

4

2 に答える 2