Skip to content

Commit

Permalink
Merge pull request #155 from Monomachus/master
Browse files Browse the repository at this point in the history
Showing only a limited range of hours and minutes
  • Loading branch information
ManukMinasyan authored Jun 15, 2022
2 parents 3f785fd + 2e245be commit ab67d20
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 3 deletions.
2 changes: 2 additions & 0 deletions .github/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,8 @@ ___
| isDark | Boolean | false | true | Dark theme |
| isLayoutExpandable | Boolean | false | true | Enable expanding the calendar layout |
| alwaysUseDefaultClasses | Boolean | false | true | Always add default classes to Day element, even when overriding with a slot |
| activeHours | Array | [] | [8, 9,10, 18, 19, 20] | The hours you want to be shown in the timepicker (by default all of them are shown)
| activeMinutes | Array | [] | [0, 15, 30, 45] | The minutes you want to be shown in the timepicker (by default all of them are shown)
___
### Slots
Expand Down
2 changes: 2 additions & 0 deletions src/components/FunctionalCalendar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@
v-if="showTimePicker"
ref="timePicker"
:height="$refs.popoverElement.clientHeight"
:hours="activeHours"
:minutes="activeMinutes"
></time-picker>

<template v-else>
Expand Down
29 changes: 26 additions & 3 deletions src/components/TimePicker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
:class="{
'vfc-time-picker__item--selected': checkHourActiveClass(i)
}"
v-for="i in 24"
v-for="i in hours"
:key="i"
@click="changeHour(formatTime(i))"
>
Expand All @@ -55,7 +55,7 @@
:class="{
'vfc-time-picker__item--selected': checkMinuteActiveClass(i)
}"
v-for="i in 60"
v-for="i in minutes"
:key="i"
@click="changeMinute(formatTime(i))"
>
Expand All @@ -80,6 +80,20 @@ export default {
height: {
type: Number,
required: true
},
hours: {
type: Array,
default: function() {
return [...Array(24).keys()]
},
required: false
},
minutes: {
type: Array,
default: function() {
return [...Array(60).keys()]
},
required: false
}
},
watch: {
Expand Down Expand Up @@ -117,7 +131,7 @@ export default {
},
methods: {
formatTime(i) {
return i <= 10 ? '0' + (i - 1) : i - 1
return i < 10 ? '0' + i : i
},
close() {
this.$parent.showTimePicker = false
Expand Down Expand Up @@ -224,6 +238,11 @@ export default {
} else {
hour = this.$parent.calendar.selectedHour
}
if (this.hours.length && !this.hours.some(el => el == hour)) {
hour = this.hours[0]
}
return hour == this.formatTime(i)
},
checkMinuteActiveClass(i) {
Expand All @@ -242,6 +261,10 @@ export default {
minute = this.$parent.calendar.selectedMinute
}
if (this.minutes.length && !this.minutes.some(el => el == minute)) {
minute = this.minutes[0]
}
return minute == this.formatTime(i)
},
setStyles() {
Expand Down
8 changes: 8 additions & 0 deletions src/mixins/propsAndData.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@ const undefinedGenerator = () => undefined

export const propsAndData = {
props: {
activeHours: {
type: Array,
required: false
},
activeMinutes: {
type: Array,
required: false
},
borderColor: {
type: String,
default: ''
Expand Down

0 comments on commit ab67d20

Please sign in to comment.