Skip to content

Commit

Permalink
feat(VDatePicker): multiple event indicators (#5512)
Browse files Browse the repository at this point in the history 
fixes #5512
  • Loading branch information
@jacekkarczmarczyk
jacekkarczmarczyk committed Nov 12, 2018
1 parent 64c0427 commit 1d6737b
Show file tree
Hide file tree
Showing 8 changed files with 104 additions and 60 deletions.
6 changes: 3 additions & 3 deletions packages/vuetify/src/components/VDatePicker/VDatePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ export default {
default: null
},
events: {
type: [Array, Object, Function],
type: [Array, Function, Object],
default: () => null
},
eventColor: {
type: [String, Function, Object],
default: 'warning'
type: [Array, Function, Object, String],
default: () => 'warning'
},
firstDayOfWeek: {
type: [String, Number],
Expand Down
51 changes: 33 additions & 18 deletions packages/vuetify/src/components/VDatePicker/mixins/date-picker-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ export default {
default: null
},
events: {
type: [Array, Object, Function],
type: [Array, Function, Object],
default: () => null
},
eventColor: {
type: [String, Function, Object],
default: 'warning'
type: [Array, Function, Object, String],
default: () => 'warning'
},
locale: {
type: String,
Expand Down Expand Up @@ -98,30 +98,45 @@ export default {
this.$createElement('div', {
staticClass: 'v-btn__content'
}, [this.formatter(value)]),
this.isEvent(value) ? this.genEvent(value) : null
this.genEvents(value)
])
},
isEvent (date) {
/**
*
* @param {string} date
* @returns boolean|string|string[]
*/
getEventData (date) {
if (Array.isArray(this.events)) {
return this.events.indexOf(date) > -1
return this.events.includes(date)
} else if (this.events instanceof Function) {
return this.events(date)
return this.events(date) || false
} else if (this.events) {
return this.events[date] || false
} else {
return false
}
},
genEvent (date) {
let eventColor
if (typeof this.eventColor === 'string') {
eventColor = this.eventColor
} else if (typeof this.eventColor === 'function') {
eventColor = this.eventColor(date)
} else {
eventColor = this.eventColor[date]
genEvents (date) {
let eventColors = this.getEventData(date)

if (eventColors === true) {
if (typeof this.eventColor === 'string') {
eventColors = this.eventColor
} else if (typeof this.eventColor === 'function') {
eventColors = this.eventColor(date)
} else if (Array.isArray(this.eventColor)) {
eventColors = this.eventColor
} else {
eventColors = this.eventColor[date]
}
}
return this.$createElement('div', this.setBackgroundColor(eventColor || this.color || 'accent', {
staticClass: 'v-date-picker-table__event'
}))
if (!Array.isArray(eventColors)) eventColors = [eventColors]
eventColors = eventColors.filter(v => v)

return eventColors.length ? this.$createElement('div', {
staticClass: 'v-date-picker-table__events'
}, eventColors.map(color => this.$createElement('div', this.setBackgroundColor(color || this.color)))) : null
},
wheel (e) {
e.preventDefault()
Expand Down
30 changes: 18 additions & 12 deletions packages/vuetify/src/stylus/components/_date-picker-table.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,17 +58,23 @@ theme(v-date-picker-table, "v-date-picker-table")
td
width: 45px

.v-date-picker-table__event
border-radius: 50%
display: block
.v-date-picker-table__events
height: 8px
left: 50%
left: 0
position: absolute
transform: translateX(-4px)
width: 8px

.v-date-picker-table--date .v-date-picker-table__event
bottom: 2px

.v-date-picker-table--month .v-date-picker-table__event
bottom: 3px
text-align: center
white-space: pre
width: 100%

> div
border-radius: 50%
display: inline-block
height: 8px
margin: 0 1px
width: 8px

.v-date-picker-table--date .v-date-picker-table__events
bottom: 6px

.v-date-picker-table--month .v-date-picker-table__events
bottom: 8px
22 changes: 15 additions & 7 deletions .../vuetify/test/unit/components/VDatePicker/__snapshots__/VDatePickerDateTable.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1043,7 +1043,9 @@ exports[`VDatePickerDateTable.js should render component with events (array) and
<div class="v-btn__content">
3
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand Down Expand Up @@ -1370,7 +1372,9 @@ exports[`VDatePickerDateTable.js should render component with events (function)
<div class="v-btn__content">
3
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand Down Expand Up @@ -1697,7 +1701,9 @@ exports[`VDatePickerDateTable.js should render component with events colored by
<div class="v-btn__content">
3
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand All @@ -1708,8 +1714,6 @@ exports[`VDatePickerDateTable.js should render component with events colored by
<div class="v-btn__content">
4
</div>
<div class="v-date-picker-table__event accent">
</div>
</button>
</td>
<td>
Expand Down Expand Up @@ -2026,7 +2030,9 @@ exports[`VDatePickerDateTable.js should render component with events colored by
<div class="v-btn__content">
3
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand All @@ -2037,7 +2043,9 @@ exports[`VDatePickerDateTable.js should render component with events colored by
<div class="v-btn__content">
4
</div>
<div class="v-date-picker-table__event blue lighten-1">
<div class="v-date-picker-table__events">
<div class="blue lighten-1">
</div>
</div>
</button>
</td>
Expand Down
32 changes: 24 additions & 8 deletions ...vuetify/test/unit/components/VDatePicker/__snapshots__/VDatePickerMonthTable.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,9 @@ exports[`VDatePickerMonthTable.js should render component with events (array) an
<div class="v-btn__content">
Jul
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand Down Expand Up @@ -365,7 +367,9 @@ exports[`VDatePickerMonthTable.js should render component with events (array) an
<div class="v-btn__content">
Nov
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand Down Expand Up @@ -456,7 +460,9 @@ exports[`VDatePickerMonthTable.js should render component with events (function)
<div class="v-btn__content">
Jul
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand Down Expand Up @@ -496,7 +502,9 @@ exports[`VDatePickerMonthTable.js should render component with events (function)
<div class="v-btn__content">
Nov
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand Down Expand Up @@ -587,7 +595,9 @@ exports[`VDatePickerMonthTable.js should render component with events colored by
<div class="v-btn__content">
Jul
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand Down Expand Up @@ -627,7 +637,9 @@ exports[`VDatePickerMonthTable.js should render component with events colored by
<div class="v-btn__content">
Nov
</div>
<div class="v-date-picker-table__event blue lighten-1">
<div class="v-date-picker-table__events">
<div class="blue lighten-1">
</div>
</div>
</button>
</td>
Expand Down Expand Up @@ -718,7 +730,9 @@ exports[`VDatePickerMonthTable.js should render component with events colored by
<div class="v-btn__content">
Jul
</div>
<div class="v-date-picker-table__event red">
<div class="v-date-picker-table__events">
<div class="red">
</div>
</div>
</button>
</td>
Expand Down Expand Up @@ -758,7 +772,9 @@ exports[`VDatePickerMonthTable.js should render component with events colored by
<div class="v-btn__content">
Nov
</div>
<div class="v-date-picker-table__event blue lighten-1">
<div class="v-date-picker-table__events">
<div class="blue lighten-1">
</div>
</div>
</button>
</td>
Expand Down
4 changes: 3 additions & 1 deletion packages/vuetifyjs.com/src/examples/date-pickers/dateEvents.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@
methods: {
functionEvents (date) {
const [,, day] = date.split('-')
return parseInt(day, 10) % 3 === 0
if ([12, 17, 28].includes(parseInt(day, 10))) return true
if ([1, 19, 22].includes(parseInt(day, 10))) return ['red', '#00f']
return false
}
}
}
Expand Down
9 changes: 3 additions & 6 deletions packages/vuetifyjs.com/src/examples/date-pickers/monthEvents.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
<div class="subheading">Defined by function</div>
<v-date-picker
v-model="date2"
:event-color="functionEventColors"
:events="functionEvents"
type="month"
></v-date-picker>
Expand Down Expand Up @@ -41,11 +40,9 @@
methods: {
functionEvents (date) {
const month = parseInt(date.split('-')[1], 10)
return month % 2 === 1
},
functionEventColors (date) {
const month = parseInt(date.split('-')[1], 10)
return [false, 'purple', false, 'red'][month % 4]
if ([1, 3, 7].includes(month)) return true
if ([2, 5, 12].includes(month)) return ['error', 'purple', 'rgba(0, 128, 0, 0.5)']
return false
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions packages/vuetifyjs.com/src/lang/en/components/DatePickers.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
},
"dateEvents": {
"header": "Date pickers - Events",
"desc": "You can specify events using arrays, objects, and functions. To change the default color of the event use **event-color** prop."
"desc": "You can specify events using arrays, objects or functions. To change the default color of the event use **event-color** prop. Your **events** function or object can return an array of colors (material or css) in case you want to display multiple event indicators."
},
"dateInternationalization": {
"header": "Date pickers - Internationalization",
Expand Down Expand Up @@ -76,7 +76,7 @@
},
"monthAllowedMonths": {
"header": "Month pickers - Allowed months",
"desc": "You can specify allowed months using arrays, objects, and functions."
"desc": "You can specify allowed months using arrays, objects or functions."
},
"monthMultiple": {
"header": "Month pickers - Multiple",
Expand All @@ -88,7 +88,7 @@
},
"monthEvents": {
"header": "Month pickers - Events",
"desc": "You can specify events using arrays, objects, and functions. To change the default color of the event use **event-color** prop."
"desc": "You can specify events using arrays, objects or functions. To change the default color of the event use **event-color** prop. Your **events** function or object can return an array of colors (material or css) in case you want to display multiple event indicators."
},
"monthInternationalization": {
"header": "Month pickers - Internationalization",
Expand All @@ -112,8 +112,8 @@
"type": "Determines the type of the picker - `date` for date picker, `month` for month picker",
"monthFormat": "Formatting function used for displaying months in the months table. Called with date (ISO 8601 string) and locale (string) arguments.",
"allowedDates": "Restricts which dates can be selected",
"eventColor": "Sets the color for event dot. It can be string (all events will have the same color) or `object` where attribute is the event date and value is the color for specified date or `function` taking date as a parameter and returning color for that date",
"events": "Marks the date as an event (only for date picker)",
"eventColor": "Sets the color for event dot. It can be string (all events will have the same color) or `object` where attribute is the event date and value is boolean/color/array of colors for specified date or `function` taking date as a parameter and returning boolean/color/array of colors for that date",
"events": "Array of dates or object defining events or colors or function returning boolean/color/array of colors",
"locale": "Sets the locale. Accepts a string with a BCP 47 language tag.",
"firstDayOfWeek": "Sets the first day of the week, starting with 0 for Sunday.",
"titleDateFormat": "Allows you to customize the format of the date string that appears in the title of the date picker. Called with date (ISO 8601 string) and locale (string) arguments.",
Expand Down

0 comments on commit 1d6737b

Please sign in to comment.