first commit

public/assets/js/app-calendar.js

@@ -0,0 +1,205 @@
+$(function(){
+  'use strict'
+
+  // Datepicker found in left sidebar of the page
+  var highlightedDays = ['2018-5-10','2018-5-11','2018-5-12','2018-5-13','2018-5-14','2018-5-15','2018-5-16'];
+  var date = new Date();
+
+  $('.fc-datepicker').datepicker({
+    showOtherMonths: true,
+    selectOtherMonths: true,
+    dateFormat: 'yy-mm-dd',
+    beforeShowDay: function(date) {
+      var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
+      for (var i = 0; i < highlightedDays.length; i++) {
+        if($.inArray(y + '-' + (m+1) + '-' + d,highlightedDays) != -1) {
+          return [true, 'ui-date-highlighted', ''];
+        }
+      }
+      return [true];
+    }
+  });
+
+  var generateTime = function(element) {
+    var n = 0,
+    min = 30,
+    periods = [' AM', ' PM'],
+    times = [],
+    hours = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+    for (var i = 0; i < hours.length; i++) {
+      times.push(hours[i] + ':' + n + n + periods[0]);
+      while (n < 60 - min) {
+        times.push(hours[i] + ':' + ((n += min) < 10 ? 'O' + n : n) + periods[0])
+      }
+      n = 0;
+    }
+
+    times = times.concat(times.slice(0).map(function(time) {
+      return time.replace(periods[0], periods[1])
+    }));
+
+    //console.log(times);
+    $.each(times, function(index, val){
+      $(element).append('<option value="'+val+'">'+val+'</option>');
+    });
+  }
+
+  generateTime('.az-event-time');
+
+  // Initialize fullCalendar
+  $('#calendar').fullCalendar({
+    header: {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'month,agendaWeek,agendaDay,listWeek'
+    },
+    navLinks: true,
+    selectable: true,
+    selectLongPressDelay: 100,
+    editable: true,
+    nowIndicator: true,
+    defaultView: 'listMonth',
+    views: {
+      agenda: {
+        columnHeaderHtml: function(mom) {
+          return '<span>' + mom.format('ddd') + '</span>' +
+                 '<span>' + mom.format('DD') + '</span>';
+        }
+      },
+      day: { columnHeader: false },
+      listMonth: {
+        listDayFormat: 'ddd DD',
+        listDayAltFormat: false
+      },
+      listWeek: {
+        listDayFormat: 'ddd DD',
+        listDayAltFormat: false
+      },
+      agendaThreeDay: {
+        type: 'agenda',
+        duration: { days: 3 },
+        titleFormat: 'MMMM YYYY'
+      }
+    },
+    eventSources: [azCalendarEvents, azBirthdayEvents, azHolidayEvents, azOtherEvents],
+    eventAfterAllRender: function(view) {
+      if(view.name === 'listMonth' || view.name === 'listWeek') {
+        var dates = view.el.find('.fc-list-heading-main');
+        dates.each(function(){
+          var text = $(this).text().split(' ');
+          var now = moment().format('DD');
+
+          $(this).html(text[0]+'<span>'+text[1]+'</span>');
+          if(now === text[1]) { $(this).addClass('now'); }
+        });
+      }
+
+      console.log(view.el);
+    },
+    eventRender: function(event, element) {
+
+      if(event.description) {
+        element.find('.fc-list-item-title').append('<span class="fc-desc">' + event.description + '</span>');
+        element.find('.fc-content').append('<span class="fc-desc">' + event.description + '</span>');
+      }
+
+      var eBorderColor = (event.source.borderColor)? event.source.borderColor : event.borderColor;
+      element.find('.fc-list-item-time').css({
+        color: eBorderColor,
+        borderColor: eBorderColor
+      });
+
+      element.find('.fc-list-item-title').css({
+        borderColor: eBorderColor
+      });
+
+      element.css('borderLeftColor', eBorderColor);
+    },
+  });
+
+  var azCalendar = $('#calendar').fullCalendar('getCalendar');
+
+  // change view to week when in tablet
+  if(window.matchMedia('(min-width: 576px)').matches) {
+    azCalendar.changeView('agendaWeek');
+  }
+
+  // change view to month when in desktop
+  if(window.matchMedia('(min-width: 992px)').matches) {
+    azCalendar.changeView('month');
+  }
+
+  // change view based in viewport width when resize is detected
+  azCalendar.option('windowResize', function(view) {
+    if(view.name === 'listWeek') {
+      if(window.matchMedia('(min-width: 992px)').matches) {
+        azCalendar.changeView('month');
+      } else {
+        azCalendar.changeView('listWeek');
+      }
+    }
+  });
+
+  // display current date
+  var azDateNow = azCalendar.getDate();
+  azCalendar.option('select', function(startDate, endDate){
+    $('#modalSetSchedule').modal('show');
+    $('#azEventStartDate').val(startDate.format('LL'));
+    $('#azEventEndDate').val(endDate.format('LL'));
+
+    $('#azEventStartTime').val(startDate.format('LT')).trigger('change');
+    $('#azEventEndTime').val(endDate.format('LT')).trigger('change');
+  });
+
+  // Display calendar event modal
+  azCalendar.on('eventClick', function(calEvent, jsEvent, view){
+
+    var modal = $('#modalCalendarEvent');
+
+    modal.modal('show');
+    modal.find('.event-title').text(calEvent.title);
+
+    if(calEvent.description) {
+      modal.find('.event-desc').text(calEvent.description);
+      modal.find('.event-desc').prev().removeClass('d-none');
+    } else {
+      modal.find('.event-desc').text('');
+      modal.find('.event-desc').prev().addClass('d-none');
+    }
+
+    modal.find('.event-start-date').text(moment(calEvent.start).format('LLL'));
+    modal.find('.event-end-date').text(moment(calEvent.end).format('LLL'));
+
+    //styling
+    modal.find('.modal-header').css('backgroundColor', (calEvent.source.borderColor)? calEvent.source.borderColor : calEvent.borderColor);
+  });
+
+  // Enable/disable calendar events from displaying in calendar
+  $('.az-nav-calendar-event a').on('click', function(e){
+    e.preventDefault();
+    if($(this).hasClass('exclude')) {
+      $(this).removeClass('exclude');
+
+      $(this).is(':first-child')? azCalendar.addEventSource(azCalendarEvents) : '';
+      $(this).is(':nth-child(2)')? azCalendar.addEventSource(azBirthdayEvents) : '';
+      $(this).is(':nth-child(3)')? azCalendar.addEventSource(azHolidayEvents) : '';
+      $(this).is(':nth-child(4)')? azCalendar.addEventSource(azOtherEvents) : '';
+
+    } else {
+      $(this).addClass('exclude');
+
+      $(this).is(':first-child')? azCalendar.removeEventSource(1) : '';
+      $(this).is(':nth-child(2)')? azCalendar.removeEventSource(2) : '';
+      $(this).is(':nth-child(3)')? azCalendar.removeEventSource(3) : '';
+      $(this).is(':nth-child(4)')? azCalendar.removeEventSource(4) : '';
+    }
+
+    azCalendar.render();
+
+    if(window.matchMedia('(max-width: 575px)').matches) {
+      $('body').removeClass('az-content-left-show');
+    }
+  });
+
+})