Merge branch 'dev'

readme.md

@@ -42,7 +42,7 @@ Or you can pass in parameters to customize
 ```html
 <calendar-month
   :start-date="Date('2019-01-01')"
-  :events="someEventObject"
+  :event-array="someEventObject"
   :sunday-first-day-of-week="true"
   calendar-locale="fr"
   calendar-timezone="Europe/Paris"
@@ -110,7 +110,7 @@ Each object needs to have a unique ID. The date time should be in [ISO 8601](htt
 
 ## Calendar event referencing
 
-Each calendar is given a random reference string so that we can distinguish between multiple calendars on a page. You can override this and pass in a string so that you can listen for events from that calendar. In this case, if we pass in the string `MYCALENDAR`, the Vue.js event `click-event-MYCALENDAR` would fire on the [global event bus](http://quasar-framework.org/components/global-event-bus.html) when a calendar event is clicked on. 
+Each calendar is given a random reference string so that we can distinguish between multiple calendars on a page. You can override this and pass in a string so that you can listen for events from that calendar. In this case, if we pass in the string `MYCALENDAR`, the Vue.js event `click-event-MYCALENDAR` would fire on the [global event bus](http://quasar-framework.org/components/global-event-bus.html) when a calendar event is clicked on.
 
 ## Custom event detail handling
 
@@ -126,7 +126,7 @@ So to implement, be sure to have `prevent-event-detail` and `event-ref` set when
 <calendar
   event-ref="MYCALENDAR"
   :prevent-event-detail="true"
-  :events="someEventObject"
+  :event-array="someEventObject"
 />
 ```
 
@@ -145,7 +145,7 @@ this.$root.$on(
 
 Starting with v0.3 we are setting up the framework to allow for editing individual events. By default this functionality is turned off, but you can pass a value of `true` into the `allow-editing` parameter on one of the main calendar components. The functionality if very limited to start but we expect to be adding more features in the near future.
 
-When an event is edited, a global event bus message in the format of `update-event-MYCALENDAR` is sent with the updated event information as the payload. You can listen for this to trigger a call to whatever API you are using for calendar communication. Right now when an an update is detected the passed in `events` array is updated and the array is parsed again.
+When an event is edited, a global event bus message in the format of `update-event-MYCALENDAR` is sent with the updated event information as the payload. You can listen for this to trigger a call to whatever API you are using for calendar communication. Right now when an an update is detected the passed in `eventArray` array is updated and the array is parsed again.
 
 Only a subset of fields are currently editable:
 
@@ -167,6 +167,7 @@ The usable components of `Calendar`, `CalendarMonth`, `CalendarMultiDay` and `Ca
 | `event-ref` | String | Give the calendar component a custom name so that events triggered on the global event bus can be watched. |
 | `prevent-event-detail` | Boolean | Prevent the default event detail popup from appearing when an event is clicked in a calendar. |
 | `allow-editing` | Boolean | Allows for individual events to be edited. See the editing section. |
+| `day-display-start-hour` | Number| Will scroll to a defined start hour when a day / multi-day component is rendered. Pass in the hour of the day from 0-23, the default being `7`. Current has no effect on the `CalendarAgenda` component. |
 
 In addition, each individual components have the following properties:
 
@@ -190,11 +191,3 @@ In addition, each individual components have the following properties:
 | `num-days` | Number | The number of days to initially display and also the number of additional days to load up when the user scrolls to the bottom of the agenda. |
 | `agenda-style` | String | Defaults to "dot". You can also set this as "block" to use an infinite scroll design that is meant for mobile use. |
 | `scroll-height` | String | Defaults to `200px`, this is meant to define the size of the "block" style. |
-
-## Roadmap
-
-Our near-term roadmap is as follows:
-
-| Version | Description |
-| --- | --- |
-| v0.3.x | Have some basic editing abilities such as changing the data for an event and drag and drop editing. |

src/components/calendar/Calendar.vue

@@ -62,6 +62,7 @@
           :calendar-timezone="calendarTimezone"
           :prevent-event-detail="preventEventDetail"
           :allow-editing="allowEditing"
+          :day-display-start-hour="dayDisplayStartHour"
         />
       </q-tab-pane>
       <q-tab-pane name="tab-days-component" class="calendar-tab-pane-week">
@@ -79,6 +80,7 @@
           :calendar-timezone="calendarTimezone"
           :prevent-event-detail="preventEventDetail"
           :allow-editing="allowEditing"
+          :day-display-start-hour="dayDisplayStartHour"
         />
       </q-tab-pane>
       <q-tab-pane name="tab-single-day-component" class="calendar-tab-pane-week">
@@ -96,6 +98,7 @@
           :calendar-timezone="calendarTimezone"
           :prevent-event-detail="preventEventDetail"
           :allow-editing="allowEditing"
+          :day-display-start-hour="dayDisplayStartHour"
         />
       </q-tab-pane>
       <q-tab-pane name="tab-agenda" class="calendar-tab-pane-agenda">

src/components/calendar/CalendarDayColumn.vue

@@ -5,6 +5,7 @@
       v-for="thisHour in 24"
       :key="thisHour"
       :style="getCellStyle"
+      :id="getDayHourId(eventRef, workingDate, thisHour - 1)"
     >
       <div class="calendar-day-time-content"></div>
     </div>
@@ -28,6 +29,12 @@
       />
     </div>
 
+    <!-- current time -->
+    <div
+      class="current-time-line"
+      :style="timePosition"
+    ></div>
+
   </div>
 </template>
 
@@ -84,7 +91,11 @@
     data () {
       return {
         workingDate: new Date(),
-        eventDetailEventObject: {}
+        eventDetailEventObject: {},
+        timePosition: {
+          display: 'none'
+        },
+        timePositionInterval: {}
       }
     },
     watch: {
@@ -102,9 +113,10 @@
         return returnVal
       },
       getCellStyle: function () {
+        let thisHeight = this.dayCellHeight + this.dayCellHeightUnit
         return {
-          height: this.dayCellHeight + this.dayCellHeightUnit,
-          'max-height': this.dayCellHeight + this.dayCellHeightUnit
+          height: thisHeight,
+          'max-height': thisHeight
         }
       }
     },
@@ -164,10 +176,42 @@
           top: (topMinuteCount * sizePerMinute) + this.dayCellHeightUnit,
           height: (heightMinuteCount * sizePerMinute) + this.dayCellHeightUnit
         }
+      },
+      calculateTimePosition: function () {
+        let pos = {}
+        let thisDateObject = this.makeDT(DateTime.local())
+        if (
+          thisDateObject.hasSame(this.workingDate, 'day') &&
+          thisDateObject.hasSame(this.workingDate, 'month') &&
+          thisDateObject.hasSame(this.workingDate, 'year')
+        ) {
+          pos = this.calculateDayEventPosition(thisDateObject, thisDateObject)
+          pos.height = pos.top + 1
+        }
+        else {
+          pos = {
+            display: 'none'
+          }
+        }
+        this.timePosition = pos
+      },
+      startTimePositionInterval: function () {
+        this.calculateTimePosition()
+        this.timePositionInterval = setInterval(
+          this.calculateTimePosition,
+          60000 // one minute
+        )
+      },
+      endTimePositionInterval: function () {
+        clearInterval(this.timePositionInterval)
       }
     },
     mounted () {
       this.mountSetDate()
+      this.startTimePositionInterval()
+    },
+    beforeDestroy () {
+      this.endTimePositionInterval()
     }
   }
 </script>
@@ -197,6 +241,10 @@
       margin-left 1px
     .calendar-day-event-overlap-first
       margin-left 0
+    .current-time-line
+      position absolute
+      border 1px solid red
+      width 100%
 
 
 </style>

src/components/calendar/CalendarMonth.vue

@@ -42,7 +42,10 @@
         >
           <div
             v-if="isCurrentDate(thisDay.dateObject)"
-            :class="{ 'cursor-pointer': calendarDaysAreClickable }"
+            :class="{
+              'calendar-day-number': true,
+              'cursor-pointer': calendarDaysAreClickable
+            }"
             @click="handleDayClick(thisDay.dateObject)"
           >
             <quantity-bubble

src/components/calendar/CalendarMultiDay.vue

@@ -103,8 +103,10 @@
   import {
     QBtn,
     QTooltip,
-    QScrollArea
+    QScrollArea,
+    scroll
   } from 'quasar'
+  const { getScrollTarget, setScrollPosition } = scroll
   export default {
     name: 'CalendarMultiDay',
     mixins: [CalendarParentComponentMixin, CalendarMixin, CalendarEventMixin],
@@ -210,6 +212,9 @@
       doUpdate: function () {
         this.mountSetDate()
         this.buildWeekDateArray(this.numDays, this.sundayFirstDayOfWeek)
+        this.$nextTick(() => {
+          this.scrollToFirstDay()
+        })
       },
       handleNavMove: function (unitType, amount) {
         this.moveTimePeriod(unitType, amount)
@@ -221,6 +226,21 @@
           }
         )
         this.buildWeekDateArray()
+      },
+      scrollToElement: function (el) {
+        let target = getScrollTarget(el)
+        let offset = el.offsetTop - el.scrollHeight
+        let duration = 0
+        setScrollPosition(target, offset, duration)
+      },
+      scrollToFirstDay: function () {
+        let thisId = this.getDayHourId(
+          this.eventRef,
+          this.weekDateArray[0],
+          (this.dayDisplayStartHour + 1)
+        )
+        let thisEl = document.getElementById(thisId)
+        this.scrollToElement(thisEl)
       }
     },
     mounted () {

src/components/calendar/QuantityBubble.vue

@@ -71,8 +71,8 @@
       height 2em
       width 2em
       position absolute
-      top 0
-      left 0
+      top 2px
+      left 2px
       .quantity-value
         vertical-align middle
     .quantity-bubble-offset

src/components/calendar/mixins/CalendarMixin.js

@@ -258,6 +258,13 @@ export default {
       else {
         return 'NOID' + this.createRandomString()
       }
+    },
+    getDayHourId: function (eventRef, workingDate, thisHour) {
+      return eventRef +
+        '-' +
+        this.makeDT(workingDate).toISODate() +
+        '-hour-' +
+        thisHour
     }
   },
   mounted () {}

src/components/calendar/mixins/CalendarParentComponentMixin.js

@@ -36,6 +36,10 @@ export default {
     allowEditing: {
       type: Boolean,
       default: false
+    },
+    dayDisplayStartHour: {
+      type: Number,
+      default: 7
     }
   },
   mounted () {}