scheduler-component.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/utils/flush.html">
<link rel="import" href="categories-element.html">
<script src="../jquery/dist/jquery.min.js"></script>
<script src="../moment/min/moment.min.js"></script>
<script src="../fullcalendar/dist/fullcalendar.min.js"></script>


<dom-module id="scheduler-component">
  <link rel="import" type="css" href="../fullcalendar/dist/fullcalendar.min.css">
  <template>
    <style>
       :host {
        display: block;
      }

      .hide {
        display: none !important;
      }

      .show {
        display: block !important;
      }
      
      .fc-scroller {
        height: auto !important;
        overflow-y: hidden !important;
      }
    </style>
    <div id="calendar"></div>
    <template is="dom-if" if="{{_showCategoriesContainer}}">
      <categories-element
        id="categories"
        items="{{categories}}"
        on-category-click="_categoryClicked"
      ></categories-element>
    </template>
  </template>

  <script>
    /**
       * `scheduler-component`
       * A Web Component wrapper for FullCalendar library that uses Polymer version 2.0 and ES6.
       *
       * @customElement
       * @polymer
       * @demo demo/index.html
       */
    class SchedulerComponent extends Polymer.Element {
      static get is() { return 'scheduler-component'; }
      static get properties() {
        return {
          header: {
            type: Object,
            observer: '_headerChanged'
          },
          showCategories: {
            type: Boolean,
            value: false
          },
          events: {
            type: Array,
            value: [],
            observer: '_eventsChanged'
          },
          weekends: Boolean,
          rtl: {
            type: Boolean,
            value: false
          },
          hiddenDays: Array,
          disableFixedWeekCount: {
            type: Boolean,
            value: false
          },
          weekNumbers: {
            type: Boolean,
            value: false
          },
          businessHours: Object,
          height: Number,
          defaultDate: Object,
          editable: {
            type: Boolean,
            value: false
          },
          selectable: {
            type: Boolean,
            value: false
          },
          selectHelper: {
            type: Boolean,
            value: false
          },
          droppable: {
            type: Boolean,
            value: false
          },
          aspectRatio: {
            type: Number,
            value: 1.35
          },
          eventStartEditable: Boolean,
          eventDurationEditable: Boolean,
          defaultView: {
            type: String,
            value: 'month',
            observer: '_viewChanged'
          },
          allDaySlot: {
            type: Boolean,
            value: false
          },
          allDayText: {
            type: String,
            value: 'all-day'
          },
          slotDuration: {
            type: String,
            value: '00:30:00'
          },
          slotLabelInterval: Object,
          snapDuration: Object,
          scrollTime: {
            type: String,
            value: '06:00:00'
          },
          minTime: {
            type: String,
            value: '00:00:00'
          },
          maxTime: {
            type: String,
            value: '24:00:00'
          },
          slotEventOverlap: {
            type: Boolean,
            value: false
          },
          nowIndicator: Boolean,
          dragRevertDuration: {
            type: Number,
            value: 500
          },
          dragOpacity: {
            type: Number,
            value: .75
          },
          dragScroll: {
            type: Boolean,
            value: false
          },
          eventOverlap: Object,
          eventConstraint: Object,
          locale: String,
          timezone: Boolean,
          timeFormat: String,
          dayNames: Array,
          eventColor: String,
          textColor: String,
          eventRender: {
            type: Object,
            value: () => { }
          },
          dayRender: {
            type: Object,
            value: () => { }
          },
          options: Object,
          categories: {
            type: Array,
            value: []
          },
          _config: Object,
          _scheduler: Object,
          _showCategoriesContainer: {
            type: Boolean,
            computed: '_computeShowCategories(showCategories,categories)'
          }
        };
      }
      static get availabeViews() {
        return ["month", "basicDay", "basicWeek", "agendaWeek", "agendaDay", "listYear", "listMonth", "listWeek", "listDay"];
      }
      static get defaultColors() {
        return ["#1abc9c", "#3498db", "#f1c40f", "#8e44ad", "#e74c3c", "#d35400", "#2c3e50", "#7f8c8d"];
      }
      /**
      * ready callback
      */
      ready() {
        super.ready();
        // Construct calendar's config object
        this._config = {
          theme: false,
          header: this.header,
          isRTL: this.rtl,
          weekends: this.weekends,
          hiddenDays: this.hiddenDays,
          fixedWeekCount: !this.disableFixedWeekCount,
          weekNumbers: this.weekNumbers,
          businessHours: this.businessHours,
          height: this.height,
          contentHeight: this.contentHeight,
          aspectRatio: this.aspectRatio,
          eventLimit: this.eventLimit,
          defaultDate: this.defaultDate,
          locale: this.locale,
          timezone: this.timezone,
          timeFormat: this.timeFormat,
          editable: this.editable,
          droppable: this.droppable,
          eventStartEditable: this.eventStartEditable,
          eventDurationEditable: this.eventDurationEditable,
          defaultView: this.defaultView,
          allDaySlot: this.allDaySlot,
          allDayText: this.allDayText,
          slotDuration: this.slotDuration,
          slotLabelInterval: this.slotLabelInterval,
          snapDuration: this.snapDuration,
          scrollTime: this.scrollTime,
          minTime: this.minTime,
          maxTime: this.maxTime,
          slotEventOverlap: this.slotEventOverlap,
          nowIndicator: this.nowIndicator,
          dragRevertDuration: this.dragRevertDuration,
          dragOpacity: this.dragOpacity,
          dragScroll: this.dragScroll,
          eventOverlap: this.eventOverlap,
          eventConstraint: this.eventConstraint,
          eventRender: this.eventRender,
          dayRender: this.dayRender,
          dayNames: this.dayNames,
          selectable: this.selectable,
          selectHelper: this.selectHelper,
          select: (start, end, jsEvent, view) => {
            this.dispatchEvent(new CustomEvent('select', { detail: { start, end, jsEvent, view } }));
          },
          dayClick: (date, jsEvent, view) => {
            // shorthand object is used to construct the detail of the dispatched event
            this.dispatchEvent(new CustomEvent('day-click', { detail: { date, jsEvent, view } }));
          },
          drop: (date, jsEvent, ui, resourceId) => {
            this.dispatchEvent(new CustomEvent('drop', { detail: { date, jsEvent, ui, resourceId } }));
          },
          eventClick: (calEvent, jsEvent, view) => {
            this.dispatchEvent(new CustomEvent('event-click', { detail: { calEvent, jsEvent, view } }));
          },
          eventMouseover: (calEvent, jsEvent, view) => {
            this.dispatchEvent(new CustomEvent('event-mouse-over', { detail: { calEvent, jsEvent, view } }));
          },
          eventMouseout: (calEvent, jsEvent, view) => {
            this.dispatchEvent(new CustomEvent('event-mouse-out', { detail: { calEvent, jsEvent, view } }));

          },
          eventDragStart: (event, jsEvent, ui, view) => {
            this.dispatchEvent(new CustomEvent('event-drag-start', { detail: { event, jsEvent, ui, view } }));

          },
          eventDragStop: (event, jsEvent, ui, view) => {
            this.dispatchEvent(new CustomEvent('event-drag-end', { detail: { event, jsEvent, ui, view } }));

          },
          eventDrop: (event, delta, revertFunc, jsEvent, ui, view) => {
            this.dispatchEvent(new CustomEvent('event-drop', { detail: { event, delta, revertFunc, jsEvent, ui, view } }));

          },
          eventResizeStart: (event, jsEvent, ui, view) => {
            this.dispatchEvent(new CustomEvent('event-resize-start', { detail: { event, jsEvent, ui, view } }));

          },
          eventResizeStop: (event, jsEvent, ui, view) => {
            this.dispatchEvent(new CustomEvent('event-resize-stop', { detail: { event, jsEvent, ui, view } }));

          },
          eventResize: (event, delta, revertFunc, jsEvent, ui, view) => {
            this.dispatchEvent(new CustomEvent('event-resize', { detail: { event, delta, revertFunc, jsEvent, ui, view } }));

          },
          viewRender: (view, element) => {
            this.dispatchEvent(new CustomEvent('view-render', { detail: { view, element } }));
            if (view.activeRange == null) return;

            const start = view.activeRange.start.toISOString();
            const end = view.activeRange.end.toISOString();
            this.dispatchEvent(new CustomEvent('date-range-changed', { detail: { start, end } }));
          },
          viewDestroy: (view, element) => {
            this.dispatchEvent(new CustomEvent('view-destroy', { detail: { view, element } }));

          }

        }
        this._initialize();
      }

      connectedCallback() {
        super.connectedCallback();


      }

      /**
      * This will initialize the calendar component
      */
      _initialize() {
        Polymer.flush();
        let calendar = this.$.calendar;
        //initialize fullCalendar component
        this._scheduler = jQuery(calendar);
        this._scheduler.fullCalendar(this._config);
        //add events
        this._refetchEvents();
      }

      /**
      * Interates over each event from the events property
      * in order to update its structure and data.
      *
      */
      _updateEvents(events) {
        let updatedEvents = [...events];
        updatedEvents.forEach(event => {
          if (event.category) {
            let eventCategory = this.categories.find(category => event.category.toUpperCase() === category.label.toUpperCase());
            if (eventCategory) {
              event.backgroundColor = eventCategory.color || event.backgroundColor;
              event.borderColor = eventCategory.color || event.borderColor;
              if (eventCategory.hidden === true) {
                event.className = ['hide'];
              }
            }

          }
        });
        return updatedEvents;
      }

      /**
      * Adds events to the scheduler.
      *
      **/
      _refetchEvents() {
        let schedulerEvents = this._updateEvents(this.events);
        this._scheduler.fullCalendar('addEventSource', { events: schedulerEvents, color: this.eventColor, textColor: this.textColor });
      }

      /**
      * Removes events from the scheduler
      *
      **/
      _removeEvents() {
        this._scheduler.fullCalendar('removeEvents');
      }

      /**
      * Event color is calculated based on category property.
      *
      */
      _getEventColor() {

      }

      /**
      * Returns the current view of the scheduler.
      *
      * @return {string} the current view
      */
      getView() {
        return this._scheduler.fullCalendar('getView');
      }

      /**
      * Changes the scheduler view.
      *
      * @param {string} viewname the view name
      * @return {void}
      */
      changeView(viewName) {
        this._scheduler.fullCalendar('changeView', viewName);
      }

      /**
      * Get the current date of the scheduler.
      *
      * @return {string} a string representation of the current date
      */
      getDate() {
        return this._scheduler.fullCalendar('getDate');
      }

      /**
      * Navigates to the given date
      *
      * @param {string} target date
      * @return {void}
      */
      goToDate(date) {
        this._scheduler.fullCalendar('gotoDate', date);
      }

      /**
      * Navigates to the previous date based on the current view.
      *
      * @return {void}
      */
      prev() {
        this._scheduler.fullCalendar('prev');
      }

      /**
      * Navigates to the next date based on the current view.
      *
      * @return {void}
      */
      next() {
        this._scheduler.fullCalendar('next');
      }

      /**
      * Navigates to the previous year.
      *
      * @return {void}
      */
      prevYear() {
        this._scheduler.fullCalendar('prevYear');
      }

      /**
      * Navigates to the next year.
      *
      * @return {void}
      */
      nextYear() {
        this._scheduler.fullCalendar('nextYear');
      }


      /**
      * Navigates to current date
      *
      * @return {void}
      */
      today() {
        this._scheduler.fullCalendar('today');
      }

      /**
      * Increments the date displayed on the scheduler by the given duration
      *
      * @param {string} duration in milliseconds
      * @return {void}
      */
      incrementDate(duration) {
        this.schedule.fullCalendar('incrementDate', duration);
      }

      /*
      * Observer method for the defaultView attribute.
      *
      */
      _viewChanged(newValue, oldValue) {
        if (SchedulerComponent.availabeViews.indexOf(newValue) < 0) {
          throw new Error("Inavlid value for the attribute defaultView - Available views are " + SchedulerComponent.availabeViews.join());
        }
      }

      /*
     * Observer method for the header attribute.
     * The aim of this method is to validate the value of the header.
     *
     */
      _headerChanged(newValue, oldValue) {


      }

      /**
      * Observer method for events property.
      * re-render events on the scheduler when the events property changes.
      */
      _eventsChanged(newValue, oldValue) {
        // make sure that the oldValue is not undefined.
        // For thr first call, the newValue will have the currentValue of the property
        // oldValue will be undefined
        if (oldValue) {
          this._removeEvents();
          this._refetchEvents();
        }
      }

      /**
      * Fired when a category is clicked
      *
      */
      _categoryClicked(e) {
        e = e.detail;
        let isCategoryDisabled = e.disabled;
        if (isCategoryDisabled) {
          this._hideEvents(e.category.label);
        }
        else {
          this._showEvents(e.category.label);
        }

      }

      /**
      * Shows Events that belongs to the given category
      *
      */
      _showEvents(categoryName) {
        let clientEvents = this._scheduler.fullCalendar('clientEvents');
        clientEvents.filter(event => event.category === categoryName)
          .forEach(event => {
            event.className.pop('hide');
            event.className.push('show');
            this._scheduler.fullCalendar('updateEvent', event);
          });
      }

      /**
      * Hides Events that belongs to the given category
      *
      */
      _hideEvents(categoryName) {
        let clientEvents = this._scheduler.fullCalendar('clientEvents');
        clientEvents.filter(event => event.category === categoryName)
          .forEach(event => {
            event.className.pop('show');
            event.className.push('hide');
            this._scheduler.fullCalendar('updateEvent', event);
          });
      }

      /**
      * Compute the value of _showCategoriesContainer proerty
      *
      */
      _computeShowCategories(showCategories, schedulerCategories) {
        return showCategories && schedulerCategories.length > 0;
      }
    }

    window.customElements.define(SchedulerComponent.is, SchedulerComponent);
  </script>
</dom-module>