feat(QDate): add day slot for content quasarframework#7076, quasarfra…

…mework#7290

docs/src/examples/QDate/DaySlot.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-md">
+      <q-date
+        class="day-slot--example"
+        v-model="date"
+        :events="eventsFn"
+        :event-color="eventDetailsFn"
+      >
+        <template v-slot:day="day">
+          <small v-if="day.fill === true" class="text-grey-4">
+            {{ day.i }}
+          </small>
+          <div v-else-if="day.event" class="day-slot__events--example absolute-full">
+            <div
+              v-for="({ color, label, details }, index) in day.event"
+              :key="index"
+              :class="'bg-' + color"
+            >
+              <q-tooltip
+                :content-class="'day-slot__tooltip--example q-px-md q-py-sm rounded-borders bg-white text-subtitle2 text-' + color"
+                anchor="bottom right"
+                self="top left"
+                :offset="[ 4, 4 ]"
+              >
+                {{ label }}
+              </q-tooltip>
+            </div>
+          </div>
+        </template>
+      </q-date>
+    </div>
+  </div>
+</template>
+
+<style lang="sass">
+.day-slot__events--example
+  border-radius: 50%
+  mix-blend-mode: overlay
+
+  > div
+    position: absolute
+    left: 0
+    right: 0
+    height: 50%
+
+  > div:first-child
+    top: 0
+    border-top-left-radius: 15px
+    border-top-right-radius: 15px
+
+  > div:last-child
+    bottom: 0
+    border-bottom-left-radius: 15px
+    border-bottom-right-radius: 15px
+
+  > div:first-child:last-child
+    height: 100%
+
+.day-slot--example
+  .q-btn--unelevated
+    .day-slot__events--example
+      border: 2px solid transparent
+
+  .q-date__calendar-item--fill
+    visibility: visible
+
+.day-slot__tooltip--example
+  border: 2px solid currentColor
+</style>
+
+<script>
+export default {
+  data () {
+    return {
+      date: '2019/02/01'
+    }
+  },
+
+  methods: {
+    eventsFn (date) {
+      const parts = date.split('/')
+      return [ 1, 3 ].indexOf(parts[2] % 6) > -1
+    },
+
+    eventDetailsFn (date) {
+      const parts = date.split('/')
+      return parts[2] % 6 === 1
+        ? [
+          {
+            color: 'red',
+            label: `Event on ${date}`
+          }
+        ]
+        : [
+          {
+            color: 'orange',
+            label: `Task on ${date}`
+          },
+          {
+            color: 'green',
+            label: `Recurring event on ${date}`
+          }
+        ]
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/date.md

@@ -108,6 +108,12 @@ The first example is using an array and the second example is using a function.
 
 <doc-example title="Event color" file="QDate/EventColor" overflow />
 
+### Day scoped slot
+
+You can use the `day` scoped slot to render custom event markers or tooltips specific to each day.
+
+<doc-example title="Day slot" file="QDate/DaySlot" overflow />
+
 ### Limiting options
 
 * You can use the `options` prop to limit user selection to certain times.

ui/dev/src/pages/form/date.vue

@@ -133,6 +133,35 @@
         />
       </div>
 
+      <div class="text-h6">
+        Day slot
+      </div>
+      <div class="q-gutter-md">
+        <q-date
+          class="day-slot--test"
+          v-model="date"
+          v-bind="props"
+          :events="eventMultiFn"
+          :event-color="eventMultiDetails"
+          :style="style"
+        >
+          <template v-slot:day="day">
+            <small v-if="day.fill === true" class="text-grey-5">
+              {{ day.i }}
+            </small>
+            <div v-else-if="day.event" class="day-slot__events--test absolute-full">
+              <div
+                v-for="({ color, label, details }, index) in day.event"
+                :key="index"
+                :class="'bg-' + color"
+              >
+                <q-tooltip>{{ label }}</q-tooltip>
+              </div>
+            </div>
+          </template>
+        </q-date>
+      </div>
+
       <div class="text-h6">
         Limited options
       </div>
@@ -327,6 +356,39 @@
   </div>
 </template>
 
+<style lang="sass">
+.day-slot__events--test
+  border-radius: 50%
+  mix-blend-mode: overlay
+
+  > div
+    position: absolute
+    left: 0
+    right: 0
+    height: 50%
+
+  > div:first-child
+    top: 0
+    border-top-left-radius: 15px
+    border-top-right-radius: 15px
+
+  > div:last-child
+    bottom: 0
+    border-bottom-left-radius: 15px
+    border-bottom-right-radius: 15px
+
+  > div:first-child:last-child
+    height: 100%
+
+.day-slot--test
+  .q-btn--unelevated
+    .day-slot__events--test
+      border: 2px solid transparent
+
+  .q-date__calendar-item--fill
+    visibility: visible
+</style>
+
 <script>
 import languages from 'quasar/lang/index.json'
 
@@ -430,6 +492,30 @@ export default {
       return date[9] % 2 === 0 ? 'teal' : 'orange'
     },
 
+    eventMultiFn (date) {
+      return [ 1, 3 ].indexOf(date[9] % 6) > -1
+    },
+
+    eventMultiDetails (date) {
+      return date[9] % 6 === 1
+        ? [
+          {
+            color: 'red',
+            label: `Event on ${date}`
+          }
+        ]
+        : [
+          {
+            color: 'orange',
+            label: `Task on ${date}`
+          },
+          {
+            color: 'green',
+            label: `Recurring event on ${date}`
+          }
+        ]
+    },
+
     optionsFn (date) {
       return date[9] % 3 === 0
     },

ui/src/components/date/QDate.js

@@ -362,7 +362,7 @@ export default Vue.extend({
         const range = getRangeClass(rangeFlags)
 
         if (this.options !== void 0 && this.isSelectable(day) !== true) {
-          res.push({ i, range })
+          res.push({ i, day, range })
         }
         else {
           const event = this.events !== void 0 && this.evtFn(day) === true
@@ -373,7 +373,7 @@ export default Vue.extend({
             rangeFlags.outline === true ||
             (rangeFlags.start !== true && rangeFlags.end !== true)
 
-          const config = { i, in: true, flat, event, range }
+          const config = { i, day, in: true, flat, event, range }
 
           if (flat === false) {
             config.unelevated = true
@@ -630,6 +630,15 @@ export default Vue.extend({
     },
 
     __getCalendarView (h) {
+      const dayContentFn = this.$scopedSlots.day !== void 0
+        ? this.$scopedSlots.day
+        : day => (day.event !== false ? [
+          h('div', { staticClass: 'q-date__event bg-' + day.event })
+        ] : null)
+      const dayFillContentFn = this.$scopedSlots.day !== void 0
+        ? this.$scopedSlots.day
+        : day => h('div', [ day.i ])
+
       return [
         h('div', {
           key: 'calendar-view',
@@ -692,10 +701,8 @@ export default Vue.extend({
                       click: () => { this.__setDay(day.i) },
                       mouseenter: () => { this.__selectionEndHover(day.i) }
                     })
-                  }, day.event !== false ? [
-                    h('div', { staticClass: 'q-date__event bg-' + day.event })
-                  ] : null)
-                  : h('div', [ day.i ])
+                  }, dayContentFn(day))
+                  : dayFillContentFn(day)
               ])))
             ])
           ])

ui/src/components/date/QDate.json

@@ -159,6 +159,59 @@
     }
   },
 
+  "scopedSlots": {
+    "day": {
+      "desc": "Override default day content slot; Suggestion: tooltips and / or multiple event markers",
+      "scope": {
+        "i": {
+          "type": "Number",
+          "desc": "The day number in month",
+          "examples": [ 23 ]
+        },
+        "day": {
+          "type": "String",
+          "desc": "Full date in YYYY/MM/DD form",
+          "examples": [ "20/05/2020" ]
+        },
+        "fill": {
+          "type": "Boolean",
+          "desc": "The day does not belong to the currently displayed month / year (no QBtn and hidden by default)"
+        },
+        "in": {
+          "type": "Boolean",
+          "desc": "The day is selectable (QBtn is not disabled)"
+        },
+        "today": {
+          "type": "Boolean",
+          "desc": "The day is today"
+        },
+        "unelevated": {
+          "type": "Boolean",
+          "desc": "The day is selected"
+        },
+        "flat": {
+          "type": "Boolean",
+          "desc": "The day is not selected"
+        },
+        "color": {
+          "type": "String",
+          "desc": "The color of the QBtn used for the day",
+          "examples": [ "primary" ]
+        },
+        "textColor": {
+          "type": "String",
+          "desc": "The text color of the QBtn used for the day",
+          "examples": [ "orange-2" ]
+        },
+        "event": {
+          "type": [ "Boolean", "String", "Any" ],
+          "desc": "Boolean false if there is no event for the day; The event-color or the value returned by the event-color function",
+          "examples": [ "red" ]
+        }
+      }
+    }
+  },
+
   "events": {
     "input": {
       "extends": "input",