osem-fcy/app/views/conference/_schedule.html.erb

<div id="schedule-content">
  <h1 class="text-center"> Schedule for <%= @conference.title %></h1>
  <div class="dropdown schedule-dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <%= @dates.first %>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <% @dates.each do |date| %>
        <li class='li-dropdown-schedule'>
          <%= link_to date, "#" + "#{date}", "data-toggle" => "tab" %>
        </li>
    <% end %>
    </ul>
  </div>

  <div class="tab-content">
    <% @dates.each do |date| %>
      <div class="tab-pane <%= 'active' if @dates.first == date %>" id ="<%= date %>" >

        <div id="carousel-<%= date %>" class="carousel slide" data-ride="carousel" data-wrap='false' data-interval='false'>
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <% start_time = DateTime.parse("#{date} #{@conf_start}:00") %>
            <% (0..@carousel_number-1).each do |number| %>
              <div class="item <%= number == 0 ? 'active first' : ( number == @carousel_number-1 ? 'last' : '') %>">
                <table class="table table-bordered" id="schedule" width="100%" style="margin:0px; padding:0px;">
                  <tr>
                    <th></th>
                    <% td_start_time = start_time %>
                    <% (1..@intervals).each do |i| %>
                        <th style="font-size:12px; padding: 8px 0px 8px 4px;"><%= (td_start_time).strftime("%H:%M") %></th>
                        <% td_start_time += @step_minutes %>
                    <% end %>
                  </tr>

                  <% @rooms.each do |room| %>
                    <% start_room_time = start_time %>
                    <% span = 1 %>
                    <tr>
                      <td width="15%" height= "70px"; style="padding: 5px;max-width:15%;">
                        <div class="room-elipsis break-words", style= "font-size: 11px; height:60px; line-height: 15px; overflow: hidden;">
                          <%= room.name %>
                        </div>
                      </td>
                        <% events = room.events{ |e| e.start_time >= start_time and e.start_time < (start_time + @number_columns.hour)} %>
                        <% (1..@intervals).each do |i| %>
                          <% if  span > 1 %>
                            <% span -= 1 %>
                          <% else %>
                            <% event = events.find{|e| e.start_time <= start_room_time and e.end_time > start_room_time} %>
                            <% if event %>
                              <!-- There is an event, calculate the span and show it -->
                              <% event_span =  (event.end_time.to_i - start_room_time.to_i) / 60 / EventType::LENGTH_STEP %>
                              <% span = ((event_span + i - 1 ) > @intervals ? @intervals  + 1 - i : event_span) %>
                              <%= render partial: 'schedule_item', locals: {event: event, span: span, width: @width} %>
                            <% else %>
                              <!-- span equals 1 show an empty td -->
                              <td width="<%= @width %>%"; height='75px'; style="padding:0px;"></td>
                            <% end %>
                          <% end %>
                          <% start_room_time += @step_minutes %>
                        <% end %>
                    </tr>
                  <% end %>
                  <% start_time += @number_columns.hour %>
                </table>
              </div>
            <% end %>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-<%= date %>" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-<%= date %>" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div> <!-- Carousel -->

      </div> <!-- Tab -->
    <% end %>
  </div>
</div>
<%= javascript_tag do %>
$(function() {
  // add a hash to the URL when the user clicks on a tab
  $('a[data-toggle="tab"]').on('click', function(e) {
    $('.li-dropdown-schedule').removeClass('active');
    $('.schedule-dropdown').find('button').text($(this).text());
    history.pushState(null, null, $(this).attr('href'));
  });
  // navigate to a tab when the history changes
  window.addEventListener("popstate", function(e) {
    var activeTab = $('[href=' + location.hash + ']');
    if (activeTab.length) {
      activeTab.tab('show');
    } else {
      $('.nav-tabs a[href=#<%= j @today %>]').tab('show');
    }
  });
});

$(function() {
    var hash = window.location.hash;
    hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

$('.carousel').on('slid.bs.carousel', '',
function(){
  $(this).children('.left.carousel-control').show();
  $(this).children('.right.carousel-control').show();
  if($(this).find('.first').hasClass('active')) {
    $(this).children('.left.carousel-control').hide();
  } else if($(this).find('.last').hasClass('active')) {
    $(this).children('.right.carousel-control').hide();
  }
});


$(document).ready(function(){
    $('.carousel').children('.left.carousel-control').hide();
});


<% end %>