styling of calendar view, separating out long events

app/assets/stylesheets/application.scss

@@ -984,3 +984,15 @@ div {
   word-break: break-word;
   display: inline-block
 }
+
+/* Calendar inset numbers */
+td.day {
+  position: relative;
+}
+td.day .day-number {
+  position: absolute;
+  bottom: 0px;
+  right: 6px;
+  font-size: 1.5em;
+  color: rgb(186, 186, 186);
+}

app/controllers/concerns/searchable_index.rb

@@ -4,8 +4,8 @@ module SearchableIndex
 
   included do
     attr_reader :facet_fields, :search_params, :facet_params, :page, :sort_by, :index_resources
-    before_action :set_params, only: [:index, :count]
-    before_action :fetch_resources, only: [:index, :count]
+    before_action :set_params, only: [:index, :count, :calendar]
+    before_action :fetch_resources, only: [:index, :count, :calendar]
 
     helper 'search'
   end

app/controllers/events_controller.rb

@@ -30,9 +30,9 @@ def index
   # GET /events/calendar
   # GET /events/calendar.js
   def calendar
-    set_params
-    fetch_resources
     @bioschemas = @events.flat_map(&:to_bioschemas)
+    # now customize the list by moving all events longer than 3 days into a separate array
+    @long_events, @events = @events.partition { |e| (e.end - e.start) > 3.days }
     respond_to do |format|
       format.js
     end

app/views/events/calendar.js.erb

@@ -1 +1,2 @@
-$("#events_calendar").html("<%= escape_javascript render("events/partials/calendar", events: @events) %>");
+$("#events_calendar").html("<%= escape_javascript render("events/partials/calendar", events: @events) %>");
+$("#events_calendar_long_events").html("<%= escape_javascript render("events/partials/calendar_long_events", events: @long_events) %>");

app/views/events/partials/_calendar.html.erb

@@ -1,7 +1,13 @@
 <%= month_calendar(events: events, attribute: :start, end_attribute: :end) do |date, events| %>
-  <%= date.day %>
+  <div class="day-number">
+    <%= date.day %>
+  </div>
 
-  <% events.each do |event| %>
-    <%= link_to "#{event.title} #{l event.start, format: :time_short} - #{l event.end, format: :time_short}", event, class: 'clear-both' %>
-  <% end %>
+  <ul class="list-unstyled">
+    <% events.each do |event| %>
+      <li>
+        <%= link_to "#{event.title}", event, class: 'clear-both', 'title': "#{l event.start, format: :time_short} - #{l event.end, format: :time_short}" %>
+      </li>
+    <% end %>
+  </ul>
 <% end %>

app/views/events/partials/_calendar_loader.erb

@@ -3,4 +3,6 @@
     <%= image_tag('ajax-loader2.gif') %>
   </div>
 </div>
+<div id="events_calendar_long_events">
+</div>
 

app/views/events/partials/_calendar_long_events.html.erb

@@ -0,0 +1,11 @@
+<h4>Long events</h4>
+<ul>
+  <% events.each do |event| %>
+    <li>
+      <%= link_to event do %>
+        <%= event.title %>
+        <%= l event.start, format: :short %> - <%= l event.end, format: :short %>
+      <% end %>
+    </li>
+  <% end %>
+</ul>