From 008eacaa3ceeb43b1ee05ce61b8376ac33e6602d Mon Sep 17 00:00:00 2001 From: sirbeagle Date: Sun, 3 Mar 2019 17:54:36 -0500 Subject: [PATCH] Change allowing for the scale of the multi-day view to be changed. More changes towards v1.0. Affects #50 and #11. --- package-lock.json | 6 +- package.json | 2 +- readme.md | 3 + src/components/calendar/Calendar.vue | 2 +- src/components/calendar/CalendarDayColumn.vue | 47 +++++++++----- .../calendar/CalendarEventDetail.vue | 7 ++- src/components/calendar/CalendarMultiDay.vue | 11 ++++ .../calendar/CalendarTimeLabelColumn.vue | 61 ++++++++++++++++--- src/components/calendar/calendar.vars.styl | 4 +- .../calendar/mixins/CalendarMixin.js | 8 ++- src/pages/index.vue | 5 +- 11 files changed, 121 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index e87dc9a..563e6dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7961,9 +7961,9 @@ "dev": true }, "quasar": { - "version": "1.0.0-beta.7", - "resolved": "https://registry.npmjs.org/quasar/-/quasar-1.0.0-beta.7.tgz", - "integrity": "sha512-C7lXjABwTZCELOjF/n44shzJ6BH0d0Ci+YTB3JcuCVpvWPSaaHm/sCiD39/nUf8O4tHe3mLubY1tA+JaPgE+eg==" + "version": "1.0.0-beta.8", + "resolved": "https://registry.npmjs.org/quasar/-/quasar-1.0.0-beta.8.tgz", + "integrity": "sha512-QrmtcPPflxSzkj2DUkFWEdlZMgcgXv9OYMGLpxHhF10LEqTnbREkI4se6EMFjqZYoabvGJHVybEO+JMEiAbCHA==" }, "querystring": { "version": "0.2.0", diff --git a/package.json b/package.json index 34788dd..78e87ea 100644 --- a/package.json +++ b/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", diff --git a/readme.md b/readme.md index ee4cc3a..58095c9 100755 --- a/readme.md +++ b/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 diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue index 438ef50..ffd4e32 100644 --- a/src/components/calendar/Calendar.vue +++ b/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() diff --git a/src/components/calendar/CalendarDayColumn.vue b/src/components/calendar/CalendarDayColumn.vue index b5b06f9..defad6c 100755 --- a/src/components/calendar/CalendarDayColumn.vue +++ b/src/components/calendar/CalendarDayColumn.vue @@ -1,14 +1,24 @@ @@ -20,12 +35,30 @@ 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: {}, @@ -33,11 +66,23 @@ data () { return {} }, - computed: {}, methods: {}, mounted () {} } diff --git a/src/components/calendar/calendar.vars.styl b/src/components/calendar/calendar.vars.styl index 3af69bc..9c7de59 100755 --- a/src/components/calendar/calendar.vars.styl +++ b/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%) diff --git a/src/components/calendar/mixins/CalendarMixin.js b/src/components/calendar/mixins/CalendarMixin.js index 2896ea0..135b9ce 100644 --- a/src/components/calendar/mixins/CalendarMixin.js +++ b/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() }, diff --git a/src/pages/index.vue b/src/pages/index.vue index 7c1a7cf..35a49bf 100644 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -59,6 +59,9 @@ @@ -117,7 +120,7 @@ showCards: { fullCalendar: true, month: false, - week: false, + week: true, agenda: false } }