@quasar/quasar-ui-qcalendar - npm Package Compare versions

Comparing version 2.5.0 to 3.0.0

dist/vetur/attributes.json

@@ -50,14 +50,2 @@ {
   },
-  "q-calendar/color": {
-    "type": "string",
-    "description": "This is the color used current day (now) highlighting. It can be from the from the [Quasar Color Palette](https://quasar.dev/style/color-palette), CSS named color or a CSS color (#, rgb, rgba, hls, etc)"
-  },
-  "q-calendar/enable-theme": {
-    "type": "boolean",
-    "description": "Turns on theme support"
-  },
-  "q-calendar/theme": {
-    "type": "object",
-    "description": "Object containing keys and values that overrides the calendar's color properties. See online demo for format of a theme"
-  },
   "q-calendar/hide-header": {
@@ -223,2 +211,6 @@ "type": "boolean",
   },
+  "q-calendar/hover": {
+    "type": "boolean",
+    "description": "Changes the style `selected-start-end-dates` selection when in `mini-mode`. Typically, set this to `true` on `mousedown` and `false` on `mouseup`"
+  },
   "q-calendar/selected-dates": {
@@ -225,0 +217,0 @@ "type": "array",

dist/vetur/tags.json

@@ -16,5 +16,2 @@ {
       "max-days",
-      "color",
-      "enable-theme",
-      "theme",
       "hide-header",
@@ -60,2 +57,3 @@ "short-weekday-label",
       "selected-start-end-dates",
+      "hover",
       "selected-dates",
@@ -62,0 +60,0 @@ "mini-mode",

package.json

 {
   "name": "@quasar/quasar-ui-qcalendar",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "author": "Jeff Galbraith <[e-mail]>",
@@ -60,5 +60,4 @@ "description": "QCalendar - Day/Month/Week Calendars, Popups, Date Pickers, Schedules, Agendas and Planners for your Quasar Apps",
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
     "@vue/eslint-config-standard": "^5.1.2",
@@ -68,3 +67,3 @@ "autoprefixer": "^9.8.6",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.1",
+    "babel-jest": "^26.6.3",
     "babel-plugin-transform-relative-paths": "^0.1.0",
@@ -74,3 +73,3 @@ "chalk": "^4.1.0",
     "dotenv": "^8.2.0",
-    "eslint": "^7.12.0",
+    "eslint": "^7.13.0",
     "eslint-loader": "^4.0.2",
@@ -84,6 +83,5 @@ "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-vue": "^7.1.0",
-    "jest": "^26.6.1",
+    "jest": "^26.6.3",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
-    "node-sass": "^4.14.1",
     "open": "^7.3.0",
@@ -93,7 +91,8 @@ "postcss": "^7.0.35",
     "promise": "^8.1.0",
-    "quasar": "^1.14.2",
-    "quasar-json-api": "^1.0.1",
+    "quasar": "^1.14.3",
+    "quasar-json-api": "^1.1.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.32.1",
+    "rollup": "^2.33.1",
     "rollup-plugin-vue": "=5.1.9",
+    "sass": "^1.29.0",
     "uglify-es": "^3.3.9",
@@ -106,7 +105,3 @@ "vue-jest": "^3.0.7",
     "last 1 version, not dead, ie >= 11"
-  ],
-  "dependencies": {
-    "q-colorize-mixin": "^1.0.9",
-    "q-theme-mixin": "^1.0.1"
-  }
+  ]
 }

README.md

 QCalendar
 ===
 
-[![npm](https://img.shields.io/npm/v/@quasar/quasar-ui-qcalendar.svg?label=@quasar/qcalendar)](https://www.npmjs.com/package/@quasar/quasar-ui-qcalendar)
+[![npm](https://img.shields.io/npm/v/@quasar/quasar-ui-qcalendar.svg?label=@quasar/quasar-ui-qcalendar)](https://www.npmjs.com/package/@quasar/quasar-ui-qcalendar)
 [![npm](https://img.shields.io/npm/dt/@quasar/quasar-ui-qcalendar.svg)](https://www.npmjs.com/package/@quasar/quasar-ui-qcalendar)
@@ -15,5 +15,20 @@
 
+**v3.0.0**: As QCalendar strives to be the most exstensible calendar available, to be consistent with this ideology, we had to make a LOT of changes.
+
+Among other updates, several things have become "native" for QCalendar:
+1. The largest overhaul was introducing css vars to allow users the ability to customize QCalendar
+2. QCalendar was compared to dozens of other calendars and the look was optimized to be more modern
+3. The original theming has been removed. The css vars are 25% faster than the previous theming code
+4. You no longer need to provide a .q-active-date class. You can now change the active date colors via css vars
+5. You no longer need to hook into the styles properties (ie: interval-style) to change the way disabled days look. You can now change the disable date colors via css vars
+6. 'activeDate' is now included in a lot of the scoped slots and events
+7. On interval-based calendars, when using the property "interval-minutes", those parts of the calendar are now called "interval sections" and can be changed via css vars. The default is to now have a "dashed" look, while at the main interval time, the lines are solid. Again, all changeable via css vars
+8. All deprecated slots and events were removed
+
+Also, check out the new [Theme Builder](https://quasarframework.github.io/quasar-ui-qcalendar/theme-builder) in the docs.
+
+You can find out more information [here](https://github.com/quasarframework/quasar-ui-qcalendar/releases/tag/v3.0.0).
+
 **v2.4.0**: New slots and events added. Current event system is deprecated, but still available until the next major version is released. To see the deprecated events in the **QCalendar API** (at bottom of the page [here](https://quasarframework.github.io/quasar-ui-qcalendar/docs)), select the hamburger menu, then select **Show deprecated**. You can find out more information [here](https://github.com/quasarframework/quasar-ui-qcalendar/releases/tag/v2.4.0).
 
-
 **v2.2.0**: Please be aware of breaking changes in events and scoped slotted data. You can find out more information [here](https://github.com/quasarframework/quasar-ui-qcalendar/releases/tag/v2.2.0).
@@ -20,0 +35,0 @@

src/components/QCalendar.js

@@ -379,16 +379,2 @@ // Mixins
         ...this.$listeners,
-        // DEPRECATED in v2.4.0
-        'click:date': (timestamp) => {
-          if (this.$listeners.input !== undefined) {
-            if (timestamp.date !== undefined && this.emittedValue !== timestamp.date) {
-              this.emittedValue = timestamp.date
-            }
-          }
-          // Because we highjack this event for input, pass it on to parent
-          if (this.$listeners['click:date']) {
-            /* eslint-disable-next-line */
-            this.$emit('click:date', timestamp)
-          }
-        },
-        // ---
         'click:date2': ({ scope, event }) => {
@@ -395,0 +381,0 @@ if (this.$listeners.input !== undefined) {

src/components/QCalendarAgenda.js

@@ -101,20 +101,3 @@ // Mixins
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-      //   if (day.past === true) {
-      //     color = 'colorHeaderPast'
-      //     backgroundColor = 'backgroundHeaderPast'
-      //   } else if (day.current === true) {
-      //     color = 'colorHeaderCurrent'
-      //     backgroundColor = 'backgroundHeaderCurrent'
-      //   } else if (day.future === true) {
-      //     color = 'colorHeaderFuture'
-      //     backgroundColor = 'backgroundHeaderFuture'
-      //   }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: (this.columnOptionsId !== undefined ? column[this.columnOptionsId] : undefined),
@@ -141,13 +124,6 @@ staticClass: 'q-calendar-daily__head-day',
         },
-        // :column:head DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':column:head', ':column:header2', (event, eventName) => {
-          if (eventName.indexOf('2') > -1) {
-            return { scope: { column, index: idx }, event }
-          }
-          else {
-            return { scope, event }
-          }
+        on: this.getDefaultMouseEventHandlers(':column:header2', (event, eventName) => {
+          return { scope: { column, index: idx }, event }
         })
-        // ---
-      }), [
+      }, [
         this.noDefaultHeaderText !== true && this.__renderHeadColumn(h, column),
@@ -161,24 +137,6 @@ slot && slot(scope)
       const scope = column
-      // const colorCurrent = day.current === true ? this.color : undefined
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-      //   if (day.past === true) {
-      //     color = 'colorDayLabelPast'
-      //     backgroundColor = 'backgroundDayLabelPast'
-      //   } else if (day.current === true) {
-      //     color = 'colorDayLabelCurrent'
-      //     backgroundColor = 'backgroundDayLabelCurrent'
-      //   } else if (day.future === true) {
-      //     color = 'colorDayLabelFuture'
-      //     backgroundColor = 'backgroundDayLabelFuture'
-      //   }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         staticClass: 'ellipsis q-calendar-daily__head-weekday'
-      }), [
+      }, [
         slot && slot(scope),
@@ -218,20 +176,3 @@ !slot && this.__renderHeadColumnLabel(h, (this.columnOptionsLabel !== undefined ? column[this.columnOptionsLabel] : column.label))
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-      //   if (day.past === true) {
-      //     color = 'colorBodyPast'
-      //     backgroundColor = 'backgroundBodyPast'
-      //   } else if (day.current === true) {
-      //     color = 'colorBodyCurrent'
-      //     backgroundColor = 'backgroundBodyCurrent'
-      //   } else if (day.future === true) {
-      //     color = 'colorBodyFuture'
-      //     backgroundColor = 'backgroundBodyFuture'
-      //   }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: (this.columnOptionsId !== undefined ? column[this.columnOptionsId] : undefined),
@@ -258,4 +199,3 @@ staticClass: 'q-calendar-daily__day',
         },
-        // :column DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':column', ':column2', (event, eventName) => {
+        on: this.getDefaultMouseEventHandlers(':column2', (event, eventName) => {
           if (eventName.indexOf('2') > -1) {
@@ -268,4 +208,3 @@ return { scope: scope, event }
         })
-        // ---
-      }), [
+      }, [
         slot && slot(scope)
@@ -281,22 +220,3 @@ ])
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (day.past === true) {
-          color = 'colorBodyPast'
-          backgroundColor = 'backgroundBodyPast'
-        }
-        else if (day.current === true) {
-          color = 'colorBodyCurrent'
-          backgroundColor = 'backgroundBodyCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorBodyFuture'
-          backgroundColor = 'backgroundBodyFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: day.date + (idx !== undefined ? ':' + idx : ''),
@@ -323,15 +243,8 @@ staticClass: 'q-calendar-daily__day',
         },
-        // :time DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':time', ':time2', (event, eventName) => {
+        on: this.getDefaultMouseEventHandlers(':time2', (event, eventName) => {
           const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), idx)
-          if (eventName.indexOf('2') > -1) {
-            scope.index = idx
-            return { scope, event }
-          }
-          else {
-            return { scope, event }
-          }
+          scope.index = idx
+          return { scope, event }
         })
-        // ---
-      }), [
+      }, [
         slot && slot(scope)
@@ -344,4 +257,3 @@ ])
     return h('div', {
-      staticClass: 'q-calendar-agenda',
-      class: this.classes
+      class: 'q-calendar-agenda'
     }, [
@@ -348,0 +260,0 @@ !this.hideHeader && this.__renderHead(h),

src/components/QCalendarDaily.js

@@ -101,12 +101,3 @@ // Quasar
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorIntervalHeader'
-        backgroundColor = 'backgroundIntervalHeader'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         staticClass: 'q-calendar-daily__intervals-head q-calendar-daily__intervals-head--text',
@@ -116,3 +107,3 @@ on: this.getDefaultMouseEventHandlers(':interval:header2', event => {
         })
-      }), [
+      }, [
         slot && slot(this.days)
@@ -137,26 +128,9 @@ ])
       const dayHeaderSlot = this.$scopedSlots['day-header']
+      const activeDate = this.noActiveDate !== true && this.value === day.date
       const scope = this.getScopeForSlot(day, idx)
+      scope.activeDate = activeDate
       const width = this.computedWidth
       let dragOver
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (day.past === true) {
-          color = 'colorHeaderPast'
-          backgroundColor = 'backgroundHeaderPast'
-        }
-        else if (day.current === true) {
-          color = 'colorHeaderCurrent'
-          backgroundColor = 'backgroundHeaderCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorHeaderFuture'
-          backgroundColor = 'backgroundHeaderFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: day.date + (idx !== undefined ? '-' + idx : ''),
@@ -166,2 +140,3 @@ staticClass: 'q-calendar-daily__head-day',
           ...this.getRelativeClasses(day),
+          'q-active-date': activeDate,
           'q-calendar-daily__head-day--droppable': dragOver
@@ -185,9 +160,7 @@ },
         on: {
-          // :day DEPRECATED in v2.4.0
-          ...this.getDefaultMouseEventHandlers2(':day', ':day:header2', event => {
+          ...this.getDefaultMouseEventHandlers(':day:header2', event => {
             return { scope, event }
           })
-          // ---
         }
-      }), [
+      }, [
         headDaySlot !== undefined && headDaySlot(scope),
@@ -206,26 +179,6 @@ headDaySlot === undefined && this.columnHeaderBefore === true && this.__renderColumnHeaderBefore(h, day, idx),
       scope.shortWeekdayLabel = this.shortWeekdayLabel
-      const colorCurrent = day.current === true ? this.color : undefined
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (day.past === true) {
-          color = 'colorDayLabelPast'
-          backgroundColor = 'backgroundDayLabelPast'
-        }
-        else if (day.current === true) {
-          color = 'colorDayLabelCurrent'
-          backgroundColor = 'backgroundDayLabelCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorDayLabelFuture'
-          backgroundColor = 'backgroundDayLabelFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         staticClass: 'ellipsis q-calendar-daily__head-weekday'
-      }), [
+      }, [
         (slot && slot(scope)) || this.__renderHeadDayLabel(h, day, this.shortWeekdayLabel)
@@ -242,4 +195,3 @@ ])
     __renderHeadDayBtn (h, day) {
-      const colorCurrent = day.current === true ? this.color : undefined
-      const activeDate = this.value === day.date
+      const activeDate = this.noActiveDate !== true && this.value === day.date
       const dayLabel = this.dayFormatter(day, false)
@@ -250,31 +202,4 @@ const dayLabelSlot = this.$scopedSlots['day-label']
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (day.past === true) {
-          color = 'colorDayLabelPast'
-          backgroundColor = 'backgroundDayLabelPast'
-        }
-        else if (day.current === true) {
-          color = 'colorDayLabelCurrent'
-          backgroundColor = 'backgroundDayLabelCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorDayLabelFuture'
-          backgroundColor = 'backgroundDayLabelFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return dayBtnSlot ? dayBtnSlot(scope) : h(QBtn, updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
+      return dayBtnSlot ? dayBtnSlot(scope) : h(QBtn, {
         staticClass: 'q-calendar-daily__head-day-label',
-        class: [
-          {
-            'q-active-date': this.noActiveDate !== true && activeDate
-          }
-        ],
-        style: {
-          color: day.current === true ? colorCurrent : undefined
-        },
         props: {
@@ -289,21 +214,10 @@ unelevated: true,
         on: {
-          // DEPRECATED in v2.4.0
           ...this.getMouseEventHandlers({
-            'click:date': { event: 'click', stop: true },
-            'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
-            // ---
             'click:date2': { event: 'click', stop: true },
             'contextmenu:date2': { event: 'contextmenu', stop: true, prevent: true, result: false }
           }, (event, eventName) => {
-            if (eventName.indexOf('2') > -1) {
-              return { scope: { timestamp: day }, event }
-            }
-            // DEPRECATED in v2.4.0
-            else {
-              return day
-            }
-            // ---
+            return { scope: { timestamp: day }, event }
           })
         }
-      }), [
+      }, [
         dayLabelSlot ? dayLabelSlot(scope) : dayLabel
@@ -410,22 +324,3 @@ ])
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (day.past === true) {
-          color = 'colorBodyPast'
-          backgroundColor = 'backgroundBodyPast'
-        }
-        else if (day.current === true) {
-          color = 'colorBodyCurrent'
-          backgroundColor = 'backgroundBodyCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorBodyFuture'
-          backgroundColor = 'backgroundBodyFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: day.date + (idx !== undefined ? ':' + idx : ''),
@@ -438,10 +333,8 @@ staticClass: 'q-calendar-daily__day',
         on: {
-          // :time DEPRECATED in v2.4.0
-          ...this.getDefaultMouseEventHandlers2(':time', ':time2', event => {
+          ...this.getDefaultMouseEventHandlers(':time2', event => {
             const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), idx)
             return { scope, event }
           })
-          // ---
         }
-      }), [
+      }, [
         ...this.__renderDayIntervals(h, dayIndex, idx),
@@ -465,3 +358,3 @@ slot && slot(scope)
         key: interval.time,
-        staticClass: 'q-calendar-daily__day-interval',
+        staticClass: interval.minute === 0 ? 'q-calendar-daily__day-interval' : 'q-calendar-daily__day-interval--section',
         class: {
@@ -494,29 +387,13 @@ 'q-calendar-daily__day-interval--droppable': dragOver
     __renderBodyIntervals (h) {
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorIntervalBody'
-        backgroundColor = 'backgroundIntervalBody'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
       const data = {
         staticClass: 'q-calendar-daily__intervals-body',
         on: {
-          // :interval DEPRECATED in v2.4.0
-          ...this.getDefaultMouseEventHandlers2(':interval', ':interval2', (event, eventName) => {
+          ...this.getDefaultMouseEventHandlers(':interval2', (event, eventName) => {
             const timestamp = this.getTimestampAtEvent(event, this.parsedStart)
-            if (eventName.indexOf('2') > -1) {
-              return { scope: { timestamp }, event }
-            }
-            else {
-              return timestamp
-            }
+            return { scope: { timestamp }, event }
           })
-          // ---
         }
       }
 
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), data), this.__renderIntervalLabels(h))
+      return h('div', data, this.__renderIntervalLabels(h))
     },
@@ -535,11 +412,2 @@
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorIntervalText'
-        backgroundColor = 'backgroundIntervalText'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
       return h('div', {
@@ -552,5 +420,5 @@ key: interval.time,
       }, [
-        h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+        h('div', {
           staticClass: 'q-calendar-daily__interval-text'
-        }), label)
+        }, label)
       ])
@@ -562,3 +430,3 @@ }
     return h('div', {
-      staticClass: 'q-calendar-daily',
+      class: 'q-calendar-daily',
       directives: [{
@@ -565,0 +433,0 @@ modifiers: { quiet: true },

src/components/QCalendarResource.js

@@ -13,3 +13,3 @@ // Quasar
 const mdiMenuRight = 'M10,17L15,12L10,7V17Z'
-const mdiMenuUp = 'M7,15L12,10L17,15H7Z'
+const mdiMenuDown = 'M7,10L12,15L17,10H7Z'
 
@@ -41,3 +41,3 @@ /* @vue/component */
     this.mdiMenuRight = mdiMenuRight
-    this.mdiMenuUp = mdiMenuUp
+    this.mdiMenuDown = mdiMenuDown
   },
@@ -77,11 +77,2 @@
     __renderHeadInterval (h, interval, index) {
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorIntervalBody'
-        backgroundColor = 'backgroundIntervalBody'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
       const width = convertToUnit(this.parsedIntervalWidth)
@@ -99,3 +90,3 @@ const height = convertToUnit(this.parsedIntervalHeight)
 
-      return slot ? slot(scope) : h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return slot ? slot(scope) : h('div', {
         staticClass: 'q-calendar-resource__head-label',
@@ -122,13 +113,6 @@ class: {
         },
-        // :interval DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':interval', ':interval2', (event, eventName) => {
-          if (eventName.indexOf('2') > -1) {
-            return { scope: { timestamp: interval, index, label }, event }
-          }
-          else {
-            return { interval, index, label, event }
-          }
+        on: this.getDefaultMouseEventHandlers(':interval2', (event, eventName) => {
+          return { scope: { timestamp: interval, index, label }, event }
         })
-        // ---
-      }), label)
+      }, label)
     },
@@ -167,10 +151,2 @@
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorResourceText'
-        backgroundColor = 'backgroundResourceText'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
       const scope = {
@@ -183,3 +159,3 @@ timestamp: this.days[0],
 
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         staticClass: 'q-calendar-resource__head-resource' + (this.sticky === true ? ' q-calendar__sticky' : ''),
@@ -194,3 +170,3 @@ style: {
         })
-      }), [
+      }, [
         slot && slot({ date: this.value, intervals })
@@ -224,11 +200,2 @@ ])
     __renderBodyResources (h) {
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorResourceBody'
-        backgroundColor = 'backgroundResourceBody'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
       const data = {
@@ -238,4 +205,3 @@ staticClass: 'q-calendar-resource__resources-body'
 
-      // return h('div', updateColors(colors.get(color), colors.get(backgroundColor), data), this.__renderResourceLabels(h))
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), data), this.__renderResources(h))
+      return h('div', data, this.__renderResources(h))
     },
@@ -277,12 +243,3 @@
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorResourceText'
-        backgroundColor = 'backgroundResourceText'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: resource[this.resourceKey] + '-' + idx,
@@ -295,13 +252,6 @@ staticClass: 'q-calendar-resource__resource' + (this.sticky === true ? ' q-calendar__sticky' : ''),
         },
-        // :resource DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':resource', ':resource2', (event, eventName) => {
-          if (eventName.indexOf('2') > -1) {
-            return { scope: { resource, index: idx, intervals: this.intervals }, event }
-          }
-          else {
-            return { resource, index: idx, event }
-          }
+        on: this.getDefaultMouseEventHandlers(':resource2', (event, eventName) => {
+          return { scope: { resource, index: idx, intervals: this.intervals }, event }
         })
-        // ---
-      }), [
+      }, [
         slot ? slot(scope) : this.__renderResourceText(h, resource, idx, indentLevel)
@@ -326,8 +276,10 @@ ])
           props: {
-            name: (resource.expanded === true ? this.mdiMenuUp : this.mdiMenuRight),
-            size: 'sm'
+            name: (resource.expanded === true ? this.mdiMenuDown : this.mdiMenuRight),
+            size: 'md'
           },
           on: {
-            click: () => {
+            click: (e) => {
               resource.expanded = !resource.expanded
+              e.stopPropagation()
+              this.$emit('expanded', resource)
             }
@@ -384,15 +336,8 @@ }
         },
-        // :time DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':time', ':time2', (event, eventName) => {
+        on: this.getDefaultMouseEventHandlers(':time2', (event, eventName) => {
           const scope = this.getScopeForSlotX(this.getTimestampAtEventX(event, interval))
-          if (eventName.indexOf('2') > -1) {
-            scope.resource = resource
-            scope.index = idx
-            return { scope, event }
-          }
-          else {
-            return { scope, resource, event }
-          }
+          scope.resource = resource
+          scope.index = idx
+          return { scope, event }
         })
-        // ---
       }, [
@@ -410,3 +355,3 @@ slot && slot(slotData)
     return h('div', {
-      staticClass: 'q-calendar-resource'
+      class: 'q-calendar-resource'
     }, [
@@ -413,0 +358,0 @@ this.__renderBody(h)

src/components/QCalendarScheduler.js

@@ -15,3 +15,3 @@ // Quasar
 const mdiMenuRight = 'M10,17L15,12L10,7V17Z'
-const mdiMenuUp = 'M7,15L12,10L17,15H7Z'
+const mdiMenuDown = 'M7,10L12,15L17,10H7Z'
 
@@ -43,3 +43,3 @@ /* @vue/component */
     this.mdiMenuRight = mdiMenuRight
-    this.mdiMenuUp = mdiMenuUp
+    this.mdiMenuDown = mdiMenuDown
   },
@@ -123,10 +123,2 @@
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorSchedulerHeader'
-        backgroundColor = 'backgroundSchedulerHeader'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
       const scope = {
@@ -137,3 +129,3 @@ days: this.days,
 
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         staticClass: 'q-calendar-scheduler__resources-head q-calendar-scheduler__resources-head--text',
@@ -146,3 +138,3 @@ style: {
         })
-      }), [
+      }, [
         slot && slot(this.days)
@@ -174,26 +166,9 @@ ])
       const dayHeaderSlot = this.$scopedSlots['scheduler-day-header']
+      const activeDate = this.noActiveDate !== true && this.value === day.date
       const scope = this.getScopeForSlot(day, idx)
+      scope.activeDate = activeDate
       const width = 100 / this.days.length
       let dragOver
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (day.past === true) {
-          color = 'colorHeaderPast'
-          backgroundColor = 'backgroundHeaderPast'
-        }
-        else if (day.current === true) {
-          color = 'colorHeaderCurrent'
-          backgroundColor = 'backgroundHeaderCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorHeaderFuture'
-          backgroundColor = 'backgroundHeaderFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: day.date + (idx !== undefined ? '-' + idx : ''),
@@ -203,2 +178,3 @@ staticClass: 'q-calendar-scheduler__head-day',
           ...this.getRelativeClasses(day),
+          'q-active-date': activeDate,
           'q-calendar-scheduler__head-day--droppable': dragOver
@@ -222,8 +198,6 @@ },
         },
-        // :day DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':day', ':day:header2', event => {
+        on: this.getDefaultMouseEventHandlers(':day:header2', event => {
           return { scope, event }
         })
-        // ---
-      }), [
+      }, [
         headDaySlot !== undefined && headDaySlot(scope),
@@ -239,26 +213,5 @@ headDaySlot === undefined && this.columnHeaderBefore === true && this.__renderColumnHeaderBefore(h, day, idx),
     __renderHeadWeekday (h, day) {
-      const colorCurrent = day.current === true ? this.color : undefined
-
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (day.past === true) {
-          color = 'colorDayLabelPast'
-          backgroundColor = 'backgroundDayLabelPast'
-        }
-        else if (day.current === true) {
-          color = 'colorDayLabelCurrent'
-          backgroundColor = 'backgroundDayLabelCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorDayLabelFuture'
-          backgroundColor = 'backgroundDayLabelFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         staticClass: 'ellipsis q-calendar-scheduler__head-weekday'
-      }), [
+      }, [
         this.__renderHeadDayLabel(h, day, this.shortWeekdayLabel)
@@ -275,4 +228,3 @@ ])
     __renderHeadDayBtn (h, day, idx) {
-      const colorCurrent = day.current === true ? this.color : undefined
-      const activeDate = this.value === day.date
+      const activeDate = this.noActiveDate !== true && this.value === day.date
       const dayLabel = this.dayFormatter(day, false)
@@ -283,31 +235,4 @@ const dayLabelSlot = this.$scopedSlots['day-label']
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (day.past === true) {
-          color = 'colorDayLabelPast'
-          backgroundColor = 'backgroundDayLabelPast'
-        }
-        else if (day.current === true) {
-          color = 'colorDayLabelCurrent'
-          backgroundColor = 'backgroundDayLabelCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorDayLabelFuture'
-          backgroundColor = 'backgroundDayLabelFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return dayBtnSlot ? dayBtnSlot(scope) : h(QBtn, updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
+      return dayBtnSlot ? dayBtnSlot(scope) : h(QBtn, {
         staticClass: 'q-calendar-scheduler__head-day-label',
-        class: [
-          {
-            'q-active-date': this.noActiveDate !== true && activeDate
-          }
-        ],
-        style: {
-          color: day.current === true ? colorCurrent : undefined
-        },
         props: {
@@ -323,20 +248,9 @@ unelevated: true,
           ...this.getMouseEventHandlers({
-            // DEPRECATED in v2.4.0
-            'click:date': { event: 'click', stop: true },
-            'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
-            // ---
             'click:date2': { event: 'click', stop: true },
             'contextmenu:date2': { event: 'contextmenu', stop: true, prevent: true, result: false }
           }, (event, eventName) => {
-            if (eventName.indexOf('2') > -1) {
-              return { scope, event }
-            }
-            // DEPRECATED in v2.4.0
-            else {
-              return scope
-            }
-            // ---
+            return { scope, event }
           })
         }
-      }), [
+      }, [
         dayLabelSlot ? dayLabelSlot(scope) : dayLabel
@@ -455,10 +369,2 @@ ])
       const width = convertToUnit(this.parsedResourceWidth)
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorSchedulerBody'
-        backgroundColor = 'backgroundSchedulerBody'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
 
@@ -472,3 +378,3 @@ const data = {
 
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), data),
+      return h('div', data,
         [
@@ -492,22 +398,4 @@ ...this.__renderDays(h, resource, idx)
       const width = 100 / this.days.length
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (day.past === true) {
-          color = 'colorBodyPast'
-          backgroundColor = 'backgroundBodyPast'
-        }
-        else if (day.current === true) {
-          color = 'colorBodyCurrent'
-          backgroundColor = 'backgroundBodyCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorBodyFuture'
-          backgroundColor = 'backgroundBodyFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
 
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: day.date + (idx !== undefined ? ':' + idx : ''),
@@ -520,3 +408,3 @@ staticClass: 'q-calendar-scheduler__day',
         }
-      }), [
+      }, [
         this.__renderDayResource(h, resource, day, idx, resourceIndex)
@@ -553,8 +441,6 @@ ])
         },
-        // :resource:day DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':resource:day', ':resource:day2', event => {
+        on: this.getDefaultMouseEventHandlers(':resource:day2', event => {
           const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), resourceIndex, resource)
           return { scope, event }
         })
-        // ---
       }
@@ -581,11 +467,2 @@
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorSchedulerText'
-        backgroundColor = 'backgroundSchedulerText'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
       return h('div', {
@@ -600,19 +477,19 @@ key: label + (idx !== undefined ? '-' + idx : ''),
         },
-        // :resource DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':resource', ':resource2', event => {
+        on: this.getDefaultMouseEventHandlers(':resource2', event => {
           return { scope, event }
         })
-        // ---
       }, [
-        slot ? slot(scope) : h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+        slot ? slot(scope) : h('div', {
           staticClass: 'q-calendar-scheduler__resource-text'
-        }), [
+        }, [
           resource.children && resource.children.length > 0 && h(QIcon, {
             props: {
-              name: (resource.expanded === true ? this.mdiMenuUp : this.mdiMenuRight),
-              size: 'sm'
+              name: (resource.expanded === true ? this.mdiMenuDown : this.mdiMenuRight),
+              size: 'md'
             },
             on: {
-              click: () => {
+              click: (e) => {
                 resource.expanded = !resource.expanded
+                e.stopPropagation()
+                this.$emit('expanded', resource)
               }
@@ -633,3 +510,3 @@ }
     return h('div', {
-      staticClass: 'q-calendar-scheduler',
+      class: 'q-calendar-scheduler',
       directives: [{
@@ -636,0 +513,0 @@ modifiers: { quiet: true },

src/components/QCalendarWeekly.js

@@ -97,6 +97,11 @@ // Quasar
       }
-      style.width = 100 / this.weekdays.length + '%'
+      style.minWidth = this.cellWidth + '%'
+      style.maxWidth = style.minWidth
       return style
     },
 
+    cellWidth () {
+      return 100 / this.weekdays.length
+    },
+
     isMiniMode () {
@@ -151,4 +156,8 @@ return this.miniMode === true ||
       }, [
-        this.showWorkWeeks === true && this.__renderWorkWeekHead(h),
-        this.__renderHeadDays(h)
+        h('div', {
+          staticClass: 'q-calendar-weekly__head--wrapper'
+        }, [
+          this.showWorkWeeks === true && this.__renderWorkWeekHead(h),
+          this.__renderHeadDays(h)
+        ])
       ])
@@ -165,12 +174,3 @@ },
 
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorHeader'
-        backgroundColor = 'backgroundHeader'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         staticClass: 'q-calendar-weekly__head-workweek',
@@ -180,28 +180,29 @@ on: this.getDefaultMouseEventHandlers(':workweek:header2', event => {
         })
-      }), (slot ? slot({ scope }) : '#'))
+      }, (slot ? slot({ scope }) : '#'))
     },
 
     __renderHeadDays (h) {
-      return this.todayWeek.map((day, index) => this.__renderHeadDay(h, day, index))
+      return h('div', {
+        staticClass: 'q-calendar-weekly__head-weekdays',
+        style: {
+          width: this.isMiniMode === true ? 'calc(100% - var(--calendar-mini-work-week-width))' : 'calc(100% - var(--calendar-work-week-width))'
+        }
+      }, [
+        ...this.todayWeek.map((day, index) => this.__renderHeadDay(h, day, index))
+      ])
     },
 
     __renderHeadDay (h, day, index) {
-      const width = 100 / this.weekdays.length + '%'
+      const width = this.cellWidth + '%'
       const headDaySlot = this.$scopedSlots['head-day']
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        color = 'colorHeader'
-        backgroundColor = 'backgroundHeader'
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
+      const disabled = (this.disabledWeekdays ? this.disabledWeekdays.includes(day.weekday) : false)
       const days = this.days.filter(day2 => day2.weekday === day.weekday)
       const scope = { timestamp: day, days, index, miniMode: this.isMiniMode }
 
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: day.date,
-        staticClass: 'q-calendar-weekly__head-weekday',
+        staticClass: 'q-calendar-weekly__head-weekday' + (disabled === true ? ' q-disabled-day' : ''),
         style: {
-          width
+          minWidth: width,
+          maxWidth: width
         },
@@ -211,3 +212,3 @@ on: this.getDefaultMouseEventHandlers(':day:header2', event => {
         })
-      }), [
+      }, [
         headDaySlot === undefined && this.__renderHeadDayLabel(h, day, this.shortWeekdayLabel || this.isMiniMode),
@@ -240,9 +241,5 @@ headDaySlot !== undefined && headDaySlot(scope)
       const slotData = { week, weekdays, miniMode: this.isMiniMode }
-      const height = convertToUnit(this.dayHeight)
       return h('div', {
         key: week[0].date,
-        staticClass: 'q-calendar-weekly__week--wrapper',
-        style: {
-          height: this.dayHeight && this.dayHeight > 0 ? height : (this.isMiniMode ? 'auto' : 'auto')
-        }
+        staticClass: 'q-calendar-weekly__week--wrapper'
       }, [
@@ -252,3 +249,6 @@ this.showWorkWeeks === true && this.__renderWorkWeekGutter(h, week),
           key: week[0].date,
-          staticClass: 'q-calendar-weekly__week'
+          staticClass: 'q-calendar-weekly__week',
+          style: {
+            width: this.isMiniMode === true ? 'calc(100% - var(--calendar-mini-work-week-width))' : 'calc(100% - var(--calendar-work-week-width))'
+          }
         }, [
@@ -272,36 +272,11 @@ h('div', {
       const scope = { workweekLabel, week, miniMode: this.isMiniMode }
-      const colorCurrent = timestamp && timestamp.current === true ? this.color : undefined
-      const height = convertToUnit(this.dayHeight)
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if ((timestamp && timestamp.current === true) || day.current === true) {
-          color = 'colorWorkWeekCurrent'
-          backgroundColor = 'backgroundWorkWeekCurrent'
-        }
-        else if ((timestamp && timestamp.past === true) || day.past === true) {
-          color = 'colorWorkWeekPast'
-          backgroundColor = 'backgroundWorkWeekPast'
-        }
-        else if ((timestamp && timestamp.future === true) || day.future === true) {
-          color = 'colorWorkWeekFuture'
-          backgroundColor = 'backgroundWorkWeekFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
 
-      return h('div', updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: day.workweek,
         staticClass: 'q-calendar-weekly__workweek',
         class: this.getRelativeClasses(timestamp !== false ? timestamp : day, false),
-        style: {
-          height: this.dayHeight && this.dayHeight > 0 ? height : 'auto'
-        },
-        // :workweek DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':workweek', ':workweek2', event => {
+        on: this.getDefaultMouseEventHandlers(':workweek2', event => {
           return { scope, event }
         })
-        // ---
-      }), slot ? slot(scope) : workweekLabel)
+      }, slot ? slot(scope) : workweekLabel)
     },
@@ -311,45 +286,21 @@
       const styler = this.dayStyle || this.dayStyleDefault
-      const outside = this.isOutside(day)
+      const outside = this.hideOutsideDays !== true && this.isOutside(day)
+      const activeDate = this.noActiveDate !== true && this.value === day.date
       const slot = this.$scopedSlots.day
-      const scope = { outside, timestamp: day, miniMode: this.isMiniMode }
+      const scope = { outside, timestamp: day, miniMode: this.isMiniMode, activeDate }
       const hasMonth = (outside === false && this.days.find(d => d.month === day.month).day === day.day && this.showMonthLabel === true)
 
       let dragOver
-
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-      if (this.enableTheme === true) {
-        if (outside === true) {
-          color = 'colorBodyOutside'
-          backgroundColor = 'backgroundBodyOutside'
-        }
-        else if (day.past === true) {
-          color = 'colorBodyPast'
-          backgroundColor = 'backgroundBodyPast'
-        }
-        else if (day.current === true) {
-          color = 'colorBodyCurrent'
-          backgroundColor = 'backgroundBodyCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorBodyFuture'
-          backgroundColor = 'backgroundBodyFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
       const style = Object.assign({ ...this.styles }, styler(day))
       const dayClass = typeof this.dayClass === 'function' ? this.dayClass(day) : null
 
-      return h('div', updateColors(colors.get(color), colors.get(backgroundColor), {
+      return h('div', {
         key: day.date,
         staticClass: 'q-calendar-weekly__day',
-        class: [
+        class: {
           dayClass,
-          {
-            ...this.getRelativeClasses(day, outside, this.isMiniMode ? undefined : this.selectedDates),
-            'q-calendar-weekly__day--droppable': dragOver
-          }
-        ],
+          ...this.getRelativeClasses(day, outside, this.selectedDates, this.selectedStartEndDates, this.hover),
+          'q-active-date': activeDate === true,
+          'q-calendar-weekly__day--droppable': dragOver
+        },
         style,
@@ -368,8 +319,6 @@ domProps: {
         },
-        // :day DEPRECATED in v2.4.0
-        on: this.getDefaultMouseEventHandlers2(':day', ':day2', event => {
+        on: this.getDefaultMouseEventHandlers(':day2', event => {
           return { scope, event }
         })
-        // ---
-      }), [
+      }, [
         this.__renderDayLabel(h, day),
@@ -386,3 +335,8 @@ this.isMiniMode !== true && this.showDayOfYearLabel && !hasMonth ? this.__renderDayOfYearLabel(h, day) : '',
       const outside = this.isOutside(day)
-      const colorCurrent = day.current === true ? this.color : undefined
+
+      // return if outside days are hidden
+      if (outside === true && this.hideOutsideDays === true) {
+        return
+      }
+
       const dayLabel = this.dayFormatter(day, false)
@@ -392,9 +346,4 @@ const dayLabelSlot = this.$scopedSlots['day-label']
 
-      // return if outside days are hidden
-      if (outside && this.hideOutsideDays === true) {
-        return ''
-      }
-
       const selectedDate = (
-        this.isMiniMode &&
+        // this.isMiniMode &&
         this.selectedDates &&
@@ -405,38 +354,7 @@ this.selectedDates.length > 0 &&
 
-      const activeDate = this.value === day.date
+      const activeDate = this.noActiveDate !== true && this.value === day.date
+      const slotData = { dayLabel, timestamp: day, outside, activeDate, selectedDate, miniMode: this.isMiniMode }
 
-      const slotData = { dayLabel, timestamp: day, outside, selectedDate, activeDate, miniMode: this.isMiniMode }
-
-      let colors = new Map(), color, backgroundColor
-      let updateColors = this.useDefaultTheme
-
-      if (this.enableTheme === true) {
-        if (outside === true) {
-          color = 'colorDayLabelOutside'
-          backgroundColor = 'backgroundDayLabelOutside'
-        }
-        else if (day.past === true) {
-          color = 'colorDayLabelPast'
-          backgroundColor = 'backgroundDayLabelPast'
-        }
-        else if (day.current === true) {
-          color = 'colorDayLabelCurrent'
-          backgroundColor = 'backgroundDayLabelCurrent'
-        }
-        else if (day.future === true) {
-          color = 'colorDayLabelFuture'
-          backgroundColor = 'backgroundDayLabelFuture'
-        }
-        colors = this.getThemeColors([color, backgroundColor])
-        updateColors = this.setBothColors
-      }
-
-      return dayBtnSlot ? dayBtnSlot(slotData) : h(QBtn, updateColors(colorCurrent !== undefined ? colorCurrent : colors.get(color), colors.get(backgroundColor), {
+      return dayBtnSlot ? dayBtnSlot(slotData) : h(QBtn, {
         staticClass: 'q-calendar-weekly__day-label',
-        class: [
-          {
-            'q-selected-date': selectedDate,
-            'q-active-date': this.noActiveDate !== true && activeDate
-          }
-        ],
         props: {
@@ -453,20 +371,9 @@ size: this.isMiniMode ? 'sm' : this.monthLabelSize,
           ...this.getMouseEventHandlers({
-            // DEPRECATED in v2.4.0
-            'click:date': { event: 'click', stop: true },
-            'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
-            // ---
             'click:date2': { event: 'click', stop: true },
             'contextmenu:date2': { event: 'contextmenu', stop: true, prevent: true, result: false }
           }, (event, eventName) => {
-            if (eventName.indexOf('2') > -1) {
-              return { scope: { timestamp: day }, event }
-            }
-            // DEPRECATED in v2.4.0
-            else {
-              return day
-            }
-            // ---
+            return { scope: { timestamp: day }, event }
           })
         }
-      }), [
+      }, [
         dayLabelSlot ? dayLabelSlot(slotData) : dayLabel
@@ -477,13 +384,25 @@ ])
     __renderDayOfYearLabel (h, day) {
-      const color = day.current === true ? this.color : undefined
+      const outside = this.isOutside(day)
+
+      // return if outside days are hidden
+      if (outside === true && this.hideOutsideDays === true) {
+        return
+      }
+
       const slot = this.$scopedSlots['day-of-year']
       const slotData = { timestamp: day }
 
-      return h('div', this.setTextColor(color, {
+      return h('div', {
         staticClass: 'q-calendar-weekly__day-month--day-of-year'
-      }), slot ? slot(slotData) : day.doy)
+      }, slot ? slot(slotData) : day.doy)
     },
 
     __renderDayMonth (h, day) {
-      const color = day.current === true ? this.color : undefined
+      const outside = this.isOutside(day)
+
+      // return if outside days are hidden
+      if (outside === true && this.hideOutsideDays === true) {
+        return
+      }
+
       const slot = this.$scopedSlots['month-label']
@@ -493,5 +412,7 @@ const monthLabel = this.monthFormatter(day, this.shortMonthLabel)
 
-      return h('div', this.setTextColor(color, {
-        staticClass: 'q-calendar-weekly__day-month'
-      }), slot ? slot(slotData) : this.isMiniMode !== true ? monthLabel : '')
+      return h('div', {
+        staticClass: 'q-calendar-weekly__day-month ellipsis'
+      }, [
+        slot ? slot(slotData) : this.isMiniMode !== true ? monthLabel : ''
+      ])
     }
@@ -498,0 +419,0 @@ },

src/mixins/calendar-base.js

 // Mixins
 import Times from './times'
 import Mouse from './mouse'
-import { QColorizeMixin } from 'q-colorize-mixin'
-import { QThemeMixin } from 'q-theme-mixin'
 
@@ -13,2 +11,3 @@ // Util
   parseDate,
+  parsed,
   getWeekdaySkips,
@@ -18,3 +17,4 @@ createDayList,
   getStartOfWeek,
-  getEndOfWeek
+  getEndOfWeek,
+  getDayIdentifier
 } from '../utils/timestamp'
@@ -26,4 +26,2 @@
   mixins: [
-    QColorizeMixin,
-    QThemeMixin,
     Mouse,
@@ -104,9 +102,36 @@ Times
 
-    getRelativeClasses (timestamp, outside = false, selectedDays) {
+    checkDays (arr, timestamp) {
+      const days = {
+        firstDay: false,
+        betweenDays: false,
+        lastDay: false
+      }
+
+      // array must have two dates ('YYYY-MM-DD') in it
+      if (arr && arr.length === 2) {
+        const current = getDayIdentifier(timestamp)
+        const first = getDayIdentifier(parsed(arr[0]))
+        const last = getDayIdentifier(parsed(arr[1]))
+        days.firstDay = first === current
+        days.lastDay = last === current
+        days.betweenDays = first < current && last > current
+      }
+      return days
+    },
+
+    getRelativeClasses (timestamp, outside = false, selectedDays = [], startEndDays = [], hover = false) {
+      const isSelected = this.arrayHasDate(selectedDays, timestamp)
+      const { firstDay, lastDay, betweenDays } = this.checkDays(startEndDays, timestamp)
+
       return {
+        'q-past-day': firstDay !== true && betweenDays !== true && lastDay !== true && isSelected !== true && outside !== true && timestamp.past,
+        'q-future-day': firstDay !== true && betweenDays !== true && lastDay !== true && isSelected !== true && outside !== true && timestamp.future,
+        'q-outside': outside, // outside the current month
         'q-current-day': timestamp.current,
-        'q-past-day': timestamp.past,
-        'q-future-day': timestamp.future,
-        'q-outside': outside, // outside the current month
-        'q-selected-date': this.arrayHasDate(selectedDays, timestamp)
+        'q-selected': isSelected,
+        'q-range-first': firstDay === true,
+        'q-range': betweenDays === true,
+        'q-range-last': lastDay === true,
+        'q-range-hover': hover === true && (firstDay === true || lastDay === true || betweenDays === true),
+        'q-disabled-day': timestamp.disabled === true
       }
@@ -113,0 +138,0 @@ },

src/utils/props.js

@@ -135,2 +135,3 @@ import { validateNumber, validateTimestamp } from './timestamp'
     hideOutsideDays: Boolean,
+    hover: Boolean,
     selectedStartEndDates: {
@@ -137,0 +138,0 @@ type: Array,

No alert changes

Improved metrics

Dependency count

0

decreased by-100%

Dev dependency count

41

decreased by-2.38%

Number of package files

42

increased by2.44%

Number of lines in readme file

305

increased by5.17%

Worsened metrics

Total package byte prevSize

1099390

decreased by-12.73%

Lines of code

23107

decreased by-6.4%

Dependency changes

• - Removedq-colorize-mixin@^1.0.9

• - Removedq-theme-mixin@^1.0.1

• - Removedq-colorize-mixin@1.0.10(transitive)

• - Removedq-theme-mixin@1.0.1(transitive)