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

Comparing version 3.1.6 to 3.2.0

dist/api/Timestamp.json

@@ -256,3 +256,3 @@ {
         "type": "Number",
-        "desc": "The returned number is in the form `YYYYmmdd`"
+        "desc": "The returned number is in a number representing `YYYYMMdd`"
       }
@@ -272,5 +272,21 @@ },
         "type": "Number",
-        "desc": "The returned number is in the form `hhmm`"
+        "desc": "The returned number is in a number representing `hhmm`"
       }
     },
+    "getDayTimeIdentifier": {
+      "desc": "Turns passed in timestamp object to a date/time identifier",
+      "addedIn": "v3.2.0",
+      "params": {
+        "timestamp": {
+          "type": "Object",
+          "tsType": "Timestamp",
+          "required": true,
+          "desc": "A timestamp object"
+        }
+      },
+      "returns": {
+        "type": "Number",
+        "desc": "The returned number is in a number representing `YYYYMMddhhmm`"
+      }
+    },
     "diffTimestamp": {
@@ -714,3 +730,3 @@ "desc": "Returns the number of milliseconds between the two days",
         "type": "String",
-        "desc": "A date and time as a padded value in the form `YYYY-MM-DD hh:mm`. Instead of `2020-1-2`, this function formats it as `2020-01-02`"
+        "desc": "A date and time as a padded value in the form `YYYY-MM-DD hh:mm`. Instead of `2020-1-2 1:20`, this function formats it as `2020-01-02 01:20`"
       }
@@ -717,0 +733,0 @@ },

dist/types/index.d.ts

@@ -80,2 +80,6 @@ // @ts-ignore
     /**
+     * Causes the returning timestamp time to be clamped to the interval it is in
+     */
+    timeClicksClamped? : boolean
+    /**
      * The function to handle dragover events
@@ -213,3 +217,3 @@ */
     /**
-     * An array of two dates in format `YYYY-MM-DD` for selection purposes
+     * An array of two dates in format `YYYY-MM-DD` for selection purposes. Interval-based calendars use `YYYY-MM-DD HH:mm`
      */
@@ -222,3 +226,3 @@ selectedStartEndDates? : StringArray
     /**
-     * An array of string dates in the form `YYYY-MM-DD` that will be selected
+     * An array of string dates in the form `YYYY-MM-DD` that will be selected. Interval-based calendars use `YYYY-MM-DD HH:mm`
      */
@@ -391,3 +395,3 @@ selectedDates? : StringArray
      * @param timestamp A timestamp object
-     * @returns The returned number is in the form `YYYYmmdd`
+     * @returns The returned number is in a number representing `YYYYMMdd`
      */
@@ -398,6 +402,12 @@ getDayIdentifier (timestamp : Timestamp): number
      * @param timestamp A timestamp object
-     * @returns The returned number is in the form `hhmm`
+     * @returns The returned number is in a number representing `hhmm`
      */
     getTimeIdentifier (timestamp : Timestamp): number
     /**
+     * Turns passed in timestamp object to a date/time identifier
+     * @param timestamp A timestamp object
+     * @returns The returned number is in a number representing `YYYYMMddhhmm`
+     */
+    getDayTimeIdentifier (timestamp : Timestamp): number
+    /**
      * Returns the number of milliseconds between the two days
@@ -547,3 +557,3 @@ * @param timestamp1 A timestamp object
      * @param timestamp A timestamp object
-     * @returns A date and time as a padded value in the form `YYYY-MM-DD hh:mm`. Instead of `2020-1-2`, this function formats it as `2020-01-02`
+     * @returns A date and time as a padded value in the form `YYYY-MM-DD hh:mm`. Instead of `2020-1-2 1:20`, this function formats it as `2020-01-02 01:20`
      */
@@ -550,0 +560,0 @@ getDateTime (timestamp : Timestamp): string

dist/vetur/attributes.json

@@ -74,2 +74,6 @@ {
   },
+  "q-calendar/time-clicks-clamped": {
+    "type": "boolean",
+    "description": "Causes the returning timestamp time to be clamped to the interval it is in"
+  },
   "q-calendar/drag-over-func": {
@@ -209,3 +213,3 @@ "type": "function",
     "type": "array",
-    "description": "An array of two dates in format `YYYY-MM-DD` for selection purposes"
+    "description": "An array of two dates in format `YYYY-MM-DD` for selection purposes. Interval-based calendars use `YYYY-MM-DD HH:mm`"
   },
@@ -218,3 +222,3 @@ "q-calendar/hover": {
     "type": "array",
-    "description": "An array of string dates in the form `YYYY-MM-DD` that will be selected"
+    "description": "An array of string dates in the form `YYYY-MM-DD` that will be selected. Interval-based calendars use `YYYY-MM-DD HH:mm`"
   },
@@ -221,0 +225,0 @@ "q-calendar/mini-mode": {

dist/vetur/tags.json

@@ -22,2 +22,3 @@ {
       "transition-next",
+      "time-clicks-clamped",
       "drag-over-func",
@@ -24,0 +25,0 @@ "drop-func",

package.json

 {
   "name": "@quasar/quasar-ui-qcalendar",
-  "version": "3.1.6",
+  "version": "3.2.0",
   "author": "Jeff Galbraith <[e-mail]>",
@@ -57,3 +57,3 @@ "description": "QCalendar - Day/Month/Week Calendars, Popups, Date Pickers, Schedules, Agendas and Planners for your Quasar Apps",
   "devDependencies": {
-    "@babel/core": "^7.12.8",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -65,3 +65,3 @@ "@babel/preset-env": "^7.12.7",
     "@vue/eslint-config-standard": "^5.1.2",
-    "autoprefixer": "^10.0.2",
+    "autoprefixer": "^10.0.4",
     "babel-core": "^6.26.3",
@@ -92,4 +92,4 @@ "babel-eslint": "^10.1.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.33.3",
-    "rollup-plugin-vue": "=5.1.9",
+    "rollup": "^2.34.0",
+    "rollup-plugin-vue": "=6.0.0",
     "rtlcss": "^2.6.1",
@@ -96,0 +96,0 @@ "sass": "^1.29.0",

README.md

@@ -15,2 +15,10 @@ QCalendar
 
+**v3.2.0**: New property for interval-based calendars: `time-clicks-clamped`. What this does, is instead of returning a timestamp with the exact time of the click position, it returns the timestamp of the interval. If normally, your timestamp would have a time of **13:20**, this property makes it return **13:00**. This is also based on your settings of `interval-minutes`. If your `interval-minutes` is set to **15**, then the same click above would return a timestamp with time set to **13:15**.
+
+**Day** and **Week** calendars now have the ability to toggle selected intervals or a range of selected intervals (even across multiple days) with properties `selected-dates` and `selected-start-end-dates`. These properties not only need the date (like the month view uses), but also the time (use the Timestamp exported method `getDateTime`). See the examples to learn how to do this.
+
+**Timestamp** has a new exported method: `getDateTimeIdentifier` which is a convenience method that combines `getDayIdentifier` and `getTimeIdentifier`.
+
+You can find out more information [here](https://github.com/quasarframework/quasar-ui-qcalendar/releases/tag/v3.2.0).
+
 **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.
@@ -17,0 +25,0 @@

src/components/QCalendarAgenda.js

@@ -237,3 +237,3 @@ // Mixins
         on: this.getDefaultMouseEventHandlers(':time2', (event, eventName) => {
-          const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), idx)
+          const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day, this.timeClicksClamped), idx)
           scope.index = idx
@@ -240,0 +240,0 @@ return { scope, event }

src/components/QCalendarDaily.js

@@ -12,2 +12,3 @@ // Quasar
 import { convertToUnit } from '../utils/helpers.js'
+import { getDateTime } from '../utils/Timestamp.js'
 
@@ -325,3 +326,3 @@ /* @vue/component */
           ...this.getDefaultMouseEventHandlers(':time2', event => {
-            const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), idx)
+            const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day, this.timeClicksClamped), idx)
             return { scope, event }
@@ -348,5 +349,6 @@ })
       const data = {
-        key: interval.time,
+        key: getDateTime(interval),
         staticClass: interval.minute === 0 ? 'q-calendar-daily__day-interval' : 'q-calendar-daily__day-interval--section',
         class: {
+          ...this.getIntervalClasses(interval, this.selectedDates, this.selectedStartEndDates),
           'q-calendar-daily__day-interval--droppable': dragOver
@@ -381,4 +383,4 @@ },
         on: {
-          ...this.getDefaultMouseEventHandlers(':interval2', (event, eventName) => {
-            const timestamp = this.getTimestampAtEvent(event, this.parsedStart)
+          ...this.getDefaultMouseEventHandlers(':interval2', event => {
+            const timestamp = this.getTimestampAtEvent(event, this.parsedStart, this.timeClicksClamped)
             return { scope: { timestamp }, event }
@@ -385,0 +387,0 @@ })

src/components/QCalendarResource.js

@@ -324,3 +324,3 @@ // Quasar
         on: this.getDefaultMouseEventHandlers(':time2', (event, eventName) => {
-          const scope = this.getScopeForSlotX(this.getTimestampAtEventX(event, interval))
+          const scope = this.getScopeForSlotX(this.getTimestampAtEventX(event, interval, this.timeClicksClamped))
           scope.resource = resource
@@ -327,0 +327,0 @@ scope.index = idx

src/components/QCalendarScheduler.js

@@ -426,3 +426,3 @@ // Quasar
         on: this.getDefaultMouseEventHandlers(':resource:day2', event => {
-          const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day), resourceIndex, resource)
+          const scope = this.getScopeForSlot(this.getTimestampAtEvent(event, day, this.timeClicksClamped), resourceIndex, resource)
           return { scope, event }
@@ -429,0 +429,0 @@ })

src/index.js

@@ -35,2 +35,3 @@ import { version } from '../package.json'
   getTimeIdentifier,
+  getDayTimeIdentifier,
   diffTimestamp,
@@ -117,2 +118,3 @@ updateRelative,
   getTimeIdentifier,
+  getDayTimeIdentifier,
   diffTimestamp,
@@ -197,2 +199,3 @@ updateRelative,
   getTimeIdentifier,
+  getDayTimeIdentifier,
   diffTimestamp,
@@ -199,0 +202,0 @@ updateRelative,

src/mixins/calendar-base.js

@@ -17,3 +17,5 @@ // Mixins
   getEndOfWeek,
-  getDayIdentifier
+  getDayIdentifier,
+  getDayTimeIdentifier,
+  getDateTime
 } from '../utils/Timestamp.js'
@@ -100,2 +102,6 @@
 
+    arrayHasDateTime (arr, timestamp) {
+      return arr && arr.length > 0 && arr.includes(getDateTime(timestamp))
+    },
+
     checkDays (arr, timestamp) {
@@ -120,2 +126,21 @@ const days = {
 
+    checkIntervals (arr, timestamp) {
+      const days = {
+        firstDay: false,
+        betweenDays: false,
+        lastDay: false
+      }
+
+      // array must have two dates ('YYYY-MM-DD HH:MM') in it
+      if (arr && arr.length === 2) {
+        const current = getDayTimeIdentifier(timestamp)
+        const first = getDayTimeIdentifier(parsed(arr[0]))
+        const last = getDayTimeIdentifier(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) {
@@ -139,2 +164,15 @@ const isSelected = this.arrayHasDate(selectedDays, timestamp)
 
+    getIntervalClasses (interval, selectedDays = [], startEndDays = []) {
+      const isSelected = this.arrayHasDateTime(selectedDays, interval)
+      const { firstDay, lastDay, betweenDays } = this.checkIntervals(startEndDays, interval)
+
+      return {
+        'q-selected': isSelected,
+        'q-range-first': firstDay === true,
+        'q-range': betweenDays === true,
+        'q-range-last': lastDay === true,
+        'q-disabled-interval disabled': interval.disabled === true
+      }
+    },
+
     getStartOfWeek (timestamp) {
@@ -141,0 +179,0 @@ return getStartOfWeek(timestamp, this.weekdays, this.times.today)

src/mixins/calendar-intervals.js

@@ -110,3 +110,3 @@ // Mixins
 
-    getTimestampAtEvent (e, day) {
+    getTimestampAtEvent (e, day, clamp = false) {
       const timestamp = copyTimestamp(day)
@@ -120,3 +120,3 @@ const bounds = (e.currentTarget).getBoundingClientRect()
       const addIntervals = (clientY - bounds.top) / this.parsedIntervalHeight
-      const addMinutes = Math.floor(addIntervals * this.parsedIntervalMinutes)
+      const addMinutes = Math.floor((clamp ? Math.floor(addIntervals) : addIntervals) * this.parsedIntervalMinutes)
       const minutes = baseMinutes + addMinutes
@@ -127,3 +127,3 @@
 
-    getTimestampAtEventX (e, day) {
+    getTimestampAtEventX (e, day, clamp = false) {
       const timestamp = copyTimestamp(day)
@@ -137,3 +137,3 @@ const bounds = (e.currentTarget).getBoundingClientRect()
       const addIntervals = (clientX - bounds.left) / this.parsedIntervalWidth
-      const addMinutes = Math.floor(addIntervals * this.parsedIntervalMinutes)
+      const addMinutes = Math.floor((clamp ? Math.floor(addIntervals) : addIntervals) * this.parsedIntervalMinutes)
       const minutes = addMinutes + (day.hour * 60 + day.minute)
@@ -140,0 +140,0 @@

src/utils/props.js

@@ -48,2 +48,8 @@ import { validateNumber, validateTimestamp } from './Timestamp.js'
       // event, timestamp
+    },
+    selectedDates: Array,
+    selectedStartEndDates: {
+      type: Array,
+      default: () => [],
+      validator: v => v.length <= 2
     }
@@ -101,3 +107,4 @@ },
       validator: validateNumber
-    }
+    },
+    timeClicksClamped: Boolean
   },
@@ -138,8 +145,2 @@ weeks: {
     hover: Boolean,
-    selectedStartEndDates: {
-      type: Array,
-      default: () => [],
-      validator: v => v.length <= 2
-    },
-    selectedDates: Array,
     miniMode: {
@@ -146,0 +147,0 @@ type: [Boolean, String],

src/utils/Timestamp.js

@@ -226,2 +226,6 @@ export const PARSE_REGEX = /^(\d{4})-(\d{1,2})(-(\d{1,2}))?([^\d]+(\d{1,2}))?(:(\d{1,2}))?(:(\d{1,2}))?(.(\d{1,3}))?$/
 
+export function getDayTimeIdentifier (timestamp) {
+  return getDayIdentifier(timestamp) + getTimeIdentifier(timestamp)
+}
+
 export function diffTimestamp (ts1, ts2, strict) {
@@ -228,0 +232,0 @@ const utc1 = Date.UTC(ts1.year, ts1.month - 1, ts1.day, ts1.hour, ts1.minute)

No alert changes

Improved metrics

Total package byte prevSize

1151042

increased by2.68%

Lines of code

24650

increased by1.25%

Number of lines in readme file

314

increased by2.61%

No dependency changes