Change allowing for the scale of the multi-day view to be changed. Mo…

…re changes towards v1.0. Affects #50 and #11.

package.json

@@ -36,7 +36,7 @@
     "@quasar/extras": "^1.1.0",
     "lodash.has": "^4.5.2",
     "luxon": "^1.10.0",
-    "quasar": "^1.0.0-beta.7"
+    "quasar": "^1.0.0-beta.8"
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0-beta.9",

readme.md

@@ -200,6 +200,9 @@ In addition, each individual components have the following properties:
 | `num-days` | Number | The number of days the multi-day calendar. A value of `1` will change the header to be more appropriate for a single day. |
 | `nav-days` | Number | This is how many days the previous / next navigation buttons will jump. |
 | `force-start-of-week` | Boolean | Default is `false`. This is appropriate if you have a week display (7 days) that you want to always start on the first day of the week. |
+| `day-cell-height` | Number | Default is `5`. How high in units (units defined below) an hour should be. |
+| `day-cell-height-unit` | String | Default is `rem`. When combined with the `day-cell-height` above, this will determine the CSS-based height of an hour in a day. |
+| `show-half-hours` | Boolean | Default is `false`. Show ticks and labels for half hour segments. |
 
 ### CalendarAgenda
 

src/components/calendar/Calendar.vue

@@ -219,7 +219,7 @@
       },
       switchToSingleDay: function (params) {
         this.setTimePeriod(params)
-        this.$refs.fullCalendarTabs.selectTab('tab-single-day-component')
+        this.currentTab = 'tab-single-day-component'
       },
       doUpdate: function () {
         this.mountSetDate()

src/components/calendar/CalendarDayColumn.vue

@@ -1,14 +1,24 @@
 <template>
   <div :class="columnCss">
     <!-- underlying cells -->
-    <div
+    <template
       v-for="thisHour in 24"
-      :key="thisHour"
-      :style="getCellStyle"
-      :id="getDayHourId(eventRef, workingDate, thisHour - 1)"
     >
-      <div class="calendar-day-time-content"></div>
-    </div>
+      <div
+        :key="thisHour"
+        :style="getCellStyle"
+        :id="getDayHourId(eventRef, workingDate, thisHour - 1)"
+      >
+        <div class="calendar-day-time-content"></div>
+      </div>
+      <div
+        v-if="showHalfHours"
+        :style="getCellStyle"
+        :key="thisHour"
+      >
+        <div class="calendar-day-time-content-half"></div>
+      </div>
+    </template>
 
     <!-- events -->
     <template v-if="dateEvents.length > 0">
@@ -86,6 +96,10 @@
       allowEditing: {
         type: Boolean,
         default: false
+      },
+      showHalfHours: {
+        type: Boolean,
+        default: false
       }
     },
     components: {
@@ -118,6 +132,9 @@
       },
       getCellStyle: function () {
         let thisHeight = this.dayCellHeight + this.dayCellHeightUnit
+        if (this.showHalfHours) {
+          thisHeight = (this.dayCellHeight / 2) + this.dayCellHeightUnit
+        }
         return {
           height: thisHeight,
           'max-height': thisHeight
@@ -185,14 +202,6 @@
         return style
       },
       calculateDayEventPosition: function (startDateObject, endDateObject) {
-        // let startMidnight = date.adjustDate(startDateObject, {
-        //   hours: 0,
-        //   minutes: 0,
-        //   seconds: 0,
-        //   milliseconds: 0
-        // })
-        // let topMinuteCount = date.getDateDiff(startDateObject, startMidnight, 'minutes')
-        // let heightMinuteCount = date.getDateDiff(endDateObject, startDateObject, 'minutes')
         let startMidnight = startDateObject.set({
           hours: 0,
           minutes: 0,
@@ -202,6 +211,14 @@
         let topMinuteCount = startDateObject.diff(startMidnight).as('minutes')
         let heightMinuteCount = endDateObject.diff(startDateObject).as('minutes')
         let sizePerMinute = this.dayCellHeight / 60
+        console.debug('dayEventPosition = ', {
+          start: startDateObject.toISO(),
+          topMinuteCount: topMinuteCount,
+          heightMinuteCount: heightMinuteCount,
+          sizePerMinute: sizePerMinute,
+          top: (topMinuteCount * sizePerMinute) + this.dayCellHeightUnit,
+          height: (heightMinuteCount * sizePerMinute) + this.dayCellHeightUnit
+        })
         return {
           top: (topMinuteCount * sizePerMinute) + this.dayCellHeightUnit,
           height: (heightMinuteCount * sizePerMinute) + this.dayCellHeightUnit
@@ -267,6 +284,8 @@
       border-right $borderOuter
     .calendar-day-time-content
       border-top $borderThin
+    .calendar-day-time-content-half
+      border-top $borderThinner
     .calendar-day-event-overlap
       margin-left 1px
       ::after

src/components/calendar/CalendarEventDetail.vue

@@ -333,17 +333,19 @@
         >
           <div>
             <q-btn
-              color="warning"
+              :color="eventColor"
               icon="cancel"
               label="Cancel"
+              flat
               @click="__close()"
             />
           </div>
           <div>
             <q-btn
-              color="positive"
+              :color="eventColor"
               icon="check"
               label="Save"
+              flat
               @click="__save()"
             />
           </div>
@@ -439,7 +441,6 @@
     },
     computed: {
       countAttendees: function () {
-        console.debug('countAttendees called')
         if (!dashHas(this.eventObject, 'attendees')) {
           return 0
         }

src/components/calendar/CalendarMultiDay.vue

@@ -56,6 +56,9 @@
         <div class="calendar-day row">
           <calendar-time-label-column
             :calendar-locale="calendarLocale"
+            :day-cell-height="dayCellHeight"
+            :day-cell-height-unit="dayCellHeightUnit"
+            :show-half-hours="showHalfHours"
           />
           <div class="calendar-multiple-days col row">
             <calendar-day-column
@@ -70,6 +73,9 @@
               :calendar-locale="calendarLocale"
               :calendar-timezone="calendarTimezone"
               :allow-editing="allowEditing"
+              :day-cell-height="dayCellHeight"
+              :day-cell-height-unit="dayCellHeightUnit"
+              :show-half-hours="showHalfHours"
             />
           </div>
         </div>
@@ -141,6 +147,10 @@
       scrollHeight: {
         type: String,
         default: 'auto'
+      },
+      showHalfHours: {
+        type: Boolean,
+        default: false
       }
     },
     components: {
@@ -299,6 +309,7 @@
         font-size 1.25em
         font-weight bold
     .calendar-day
+      margin-top 10px
       .calendar-day-column-label
         width $dayTimeLabelWidth
       .calendar-day-column-content

src/components/calendar/CalendarTimeLabelColumn.vue

@@ -1,13 +1,28 @@
 <template>
   <div class="calendar-day-column-label col-auto">
-    <div
-      class="calendar-day-time"
+    <template
       v-for="thisHour in 24"
-      :key="thisHour"
-      :style="{ 'height': dayCellHeight, 'max-height': dayCellHeight }"
     >
-      {{ formatTimeFromNumber(thisHour - 1) }}
-    </div>
+      <div
+        class="relative-position calendar-day-time"
+        :key="thisHour"
+        :style="{ 'height': calcDayCellHeight, 'max-height': calcDayCellHeight }"
+      >
+        <div class="time-label">
+          {{ formatTimeFromNumber(thisHour - 1) }}
+        </div>
+      </div>
+      <div
+        v-if="showHalfHours"
+        :key="thisHour"
+        class="calendar-day-time cdcl-half-hour"
+        :style="{ 'height': calcDayCellHeight, 'max-height': calcDayCellHeight }"
+      >
+        <div class="time-label">
+          :30
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -20,24 +35,54 @@
     name: 'CalendarTimeLabelColumn',
     props: {
       dayCellHeight: {
+        type: Number,
+        default: 5
+      },
+      dayCellHeightUnit: {
         type: String,
-        default: '5rem'
+        default: 'rem'
       },
       calendarLocale: {
         type: String,
         default: () => { return DateTime.local().locale }
+      },
+      showHalfHours: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      calcDayCellHeight: function () {
+        if (this.showHalfHours) {
+          return (this.dayCellHeight / 2) + this.dayCellHeightUnit
+        }
+        else {
+          return this.dayCellHeight + this.dayCellHeightUnit
+        }
       }
     },
     components: {},
     mixins: [CalendarMixin],
     data () {
       return {}
     },
-    computed: {},
     methods: {},
     mounted () {}
   }
 </script>
 
 <style lang="stylus">
+  .calendar-day-column-label
+    .calendar-day-time
+      position relative
+      .time-label
+        position absolute
+        top -10px
+        right 20px
+    .cdcl-half-hour
+      font-size 0.75em
+      text-align right
+      .time-label
+        top -6px
+        right 20px
 </style>

src/components/calendar/calendar.vars.styl

@@ -3,8 +3,10 @@
 $sevenCellWidth = 14.285%
 $cellHeight = 8em
 $borderColor = $grey-5
+$borderThinColor = $grey-3
 $borderOuter = 1px solid $borderColor
-$borderThin = 1px dotted $borderColor
+$borderThin = 1px solid $borderThinColor
+$borderThinner = 1px dotted $borderThinColor
 $dayTimeLabelWidth = 4em
 $currentDayBackgroundColor = $grey-3
 $weekendDayBackgroundColor = lighten($currentDayBackgroundColor, 50%)

src/components/calendar/mixins/CalendarMixin.js

@@ -180,12 +180,14 @@ export default {
       }
       return returnArray
     },
-    formatTimeFromNumber: function (hourNumber) {
+    formatTimeFromNumber: function (hourNumber, minuteNumber = 0) {
       // TODO: this should be able to handle 24 hour and alternate time formats
-      let tempDate = this.makeDT(DateTime.fromObject({ hour: hourNumber }))
+      let tempDate = this.makeDT(DateTime.fromObject({ hour: hourNumber, minute: minuteNumber }))
       let localeFormattedHour = tempDate.toLocaleString(DateTime.TIME_SIMPLE)
+      if (minuteNumber === 0 && localeFormattedHour.includes('M')) {
+        localeFormattedHour = localeFormattedHour.replace(/:[0-9][0-9]/, '')
+      }
       return localeFormattedHour
-        .replace(/:[0-9][0-9]/, '')
         .replace(' ', '')
         .toLowerCase()
     },

src/pages/index.vue

@@ -59,6 +59,9 @@
               <calendar-multi-day
                   :event-array="eventArray"
                   scrollHeight="400px"
+                  day-cell-height="7"
+                  day-cell-height-unit="rem"
+                  :show-half-hours="true"
               />
           </q-card-section>
       </q-card>
@@ -117,7 +120,7 @@
         showCards: {
           fullCalendar: true,
           month: false,
-          week: false,
+          week: true,
           agenda: false
         }
       }