[1498] Replace availability calendar with FullCalendar [v5.5]

Gemfile

@@ -7,6 +7,7 @@ gem 'rails', '~> 4.1.9'
 gem 'mysql2', '~> 0.3.18'
 gem 'rake', '~> 10.4.2'
 gem 'rdoc', '~> 4.2.0'
+gem 'jbuilder', '~> 2.4.0'
 
 # simulate environment variables
 gem 'dotenv-rails', '~> 2.0.2', :require => 'dotenv/rails-now'
@@ -35,6 +36,8 @@ gem 'nilify_blanks', '~> 1.2.0'
 # ui
 gem 'jquery-rails', '~> 3.1.2'
 gem 'jquery-ui-rails', '~> 5.0.3'
+gem 'fullcalendar-rails', '~> 2.4.0.0'
+gem 'momentjs-rails', '~> 2.10.6'
 gem 'rails4-autocomplete', '~> 1.1.1'
 gem 'select2-rails', '~> 3.5.9.3'
 gem 'kaminari', '~> 0.16.3'

Gemfile.lock

@@ -133,6 +133,9 @@ GEM
     font-awesome-rails (4.4.0.0)
       railties (>= 3.2, < 5.0)
     formatador (0.2.5)
+    fullcalendar-rails (2.4.0.0)
+      jquery-rails (>= 3.1.1, < 5.0.0)
+      momentjs-rails (>= 2.9.0)
     fuubar (2.0.0)
       rspec (~> 3.0)
       ruby-progressbar (~> 1.4)
@@ -165,6 +168,9 @@ GEM
       activesupport (>= 4.1.9)
       loofah (>= 2.0)
       nokogiri (~> 1.6)
+    jbuilder (2.4.1)
+      activesupport (>= 3.0.0, < 5.1)
+      multi_json (~> 1.2)
     jquery-rails (3.1.2)
       railties (>= 3.0, < 5.0)
       thor (>= 0.14, < 2.0)
@@ -197,6 +203,8 @@ GEM
     mime-types (2.4.3)
     mini_portile (0.6.2)
     minitest (5.8.2)
+    momentjs-rails (2.10.6)
+      railties (>= 3.1)
     multi_json (1.10.1)
     multipart-post (2.0.0)
     mysql2 (0.3.18)
@@ -428,16 +436,19 @@ DEPENDENCIES
   factory_girl_rails (~> 4.5.0)
   ffaker (~> 1.32.1)
   font-awesome-rails (~> 4.4.0)
+  fullcalendar-rails (~> 2.4.0.0)
   fuubar (~> 2.0.0)
   guard-livereload (~> 2.4.0)
   guard-rspec (~> 4.5.0)
   highline (~> 1.7.2)
   inline_svg
+  jbuilder (~> 2.4.0)
   jquery-rails (~> 3.1.2)
   jquery-ui-rails (~> 5.0.3)
   kaminari (~> 0.16.3)
   letter_opener (~> 1.3.0)
   letter_opener_web (~> 1.3.0)
+  momentjs-rails (~> 2.10.6)
   mysql2 (~> 0.3.18)
   net-ldap (~> 0.11)
   nilify_blanks (~> 1.2.0)

app/assets/javascripts/application.js

@@ -20,6 +20,8 @@
 //= require select2
 //= require jquery.sticky.js
 //= require jquery.dotdotdot.js
+//= require moment
+//= require fullcalendar
 //= require_tree
 //= require_self
 
@@ -98,6 +100,63 @@ $(document).ready(function() {
   $("#res-history-future").DataTable().order([2, "asc"]).draw();
   $("#res-history-overdue,#res-history-past,#res-history-past_overdue").DataTable().order([4, "desc"]).draw();
 
+  // For availability calendars
+  $('#avail-cal').fullCalendar({
+    // generate event array locally for speed
+    events: function(start, end, timezone, callback) {
+      var events = [];
+      var data = JSON.parse($('#avail-cal').attr('data-src'));
+
+      for(var i=0; i<data.length; i++) {
+        var json_event = data[i];
+        date = moment(json_event.start);
+        if(date >= start) {
+          if(date > end) {
+            break;
+          } else {
+            var event = { start: date, end: date, title: json_event.title, allDay: true, backgroundColor: json_event.color, borderColor: json_event.color };
+            events.push(event);
+          }
+        }
+      }
+
+      callback(events);
+    },
+    viewRender: function(currentView) {
+      // prevent from scrolling beyond boundaries
+      var minDate = moment($('#avail-cal').attr('data-min')),
+      maxDate = moment($('#avail-cal').attr('data-max'));
+
+      // Past
+      if (minDate >= currentView.start && minDate <= currentView.end) {
+        $(".fc-prev-button").prop('disabled', true);
+        $(".fc-prev-button").addClass('fc-state-disabled');
+      }
+      else {
+        $(".fc-prev-button").removeClass('fc-state-disabled');
+        $(".fc-prev-button").prop('disabled', false);
+      }
+
+      // Future
+      if (maxDate >= currentView.start && maxDate <= currentView.end) {
+        $(".fc-next-button").prop('disabled', true);
+        $(".fc-next-button").addClass('fc-state-disabled');
+      } else {
+        $(".fc-next-button").removeClass('fc-state-disabled');
+        $(".fc-next-button").prop('disabled', false);
+      }
+    },
+    eventRender: function(event, element) {
+      element.attr('data-role', 'avail-item');
+      element.css({ 'text-align': 'center', 'font-size': '2em' });
+    },
+    defaultView: 'basicWeek',
+    header: { left: 'prev,next',
+              center: '',
+              right: '' },
+    aspectRatio: 4.4
+  });
+
 
   // ### REPORTS JS ### //
 

app/assets/stylesheets/application.css.scss

@@ -27,6 +27,9 @@
 @import "jquery-ui-1.10.3.theme";
 @import "jquery_overrides";
 
+// Calendar assets
+@import "fullcalendar";
+
 // Autocomplete CSS
 // ============================
 @import "autocomplete";

app/assets/stylesheets/equipment_models/_show.css.scss

@@ -4,76 +4,13 @@ $border-att: 1px solid darken($body-bg, 20%);
   text-align:center;
 }
 
-.reservation_calendar {
-  overflow: hidden;
-}
-
-#calendar-ul {
-  margin-left: 0;
-  margin-bottom: 3px;
-  margin-top: 3px;
-  padding-left: 0;
-}
-
-.calendar_cell {
-  border: $border-att;
-  border-radius: 3px;
-  width: 13%;
-  display: inline-block;
-  vertical-align:top;
-  background-color: rgba(0,255,0,0.5);
-  // opacity: 0.9;
-  padding-top: 3px;
-  padding-bottom: 5px;
-  box-sizing: border-box;
- }
-
-.month {
-  margin-top:3px;
-}
-
-.calendar_cell:hover{
-  // opacity:  1.0;
-  // cursor: pointer;
-  cursor: default;
-}
-
-.c-left {
-  float: left;
-}
-
-.c-right {
-  float: right;
-}
-
-.control {
-  cursor:pointer;
-  margin-left:3px;
-  margin-right: 3px;
-  opacity: 0.8;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.control:not(.disabled-control):hover{
-  opacity: 1.0;
-}
-
-.control:active{
-  color: black;
-}
-
-.lite {
-  opacity: 0.7;
+.fc-day-header {
+  border-style: none !important;
+  padding: 0 1.2em !important;
 }
 
-.disabled-control {
-  opacity:0.2;
-  cursor:default;
+.fc-widget-header, .fc-widget-content, .fc-event-container, .fc-content-skeleton {
+  border-style: none !important;
 }
 
 .btn-large {