diff --git a/packages/vuetify/src/components/VCalendar/mixins/calendar-with-events.ts b/packages/vuetify/src/components/VCalendar/mixins/calendar-with-events.ts
index 96e2e5a5e45..8692310a35c 100644
--- a/packages/vuetify/src/components/VCalendar/mixins/calendar-with-events.ts
+++ b/packages/vuetify/src/components/VCalendar/mixins/calendar-with-events.ts
@@ -10,9 +10,6 @@ import ripple from '../../../directives/ripple'
// Mixins
import CalendarBase from './calendar-base'
-// Helpers
-import { escapeHTML } from '../../../util/helpers'
-
// Util
import props from '../util/props'
import {
@@ -116,7 +113,7 @@ export default CalendarBase.extend({
eventNameFunction (): CalendarEventNameFunction {
return typeof this.eventName === 'function'
? this.eventName
- : (event, timedEvent) => escapeHTML(event.input[this.eventName as string] as string || '')
+ : (event, timedEvent) => event.input[this.eventName as string] as string || ''
},
eventModeFunction (): CalendarEventOverlapMode {
return typeof this.eventOverlapMode === 'function'
@@ -303,16 +300,23 @@ export default CalendarBase.extend({
const eventSummary = () => {
const name = this.eventNameFunction(event, timedEvent)
if (event.start.hasTime) {
- const eventSummaryClass = 'v-event-summary'
if (timedEvent) {
const time = timeSummary()
- const delimiter = singline ? ', ' : '
'
+ const delimiter = singline ? ', ' : this.$createElement('br')
- return `${name}${delimiter}${time}`
+ return this.$createElement('span', { staticClass: 'v-event-summary' }, [
+ this.$createElement('strong', [name]),
+ delimiter,
+ time,
+ ])
} else {
const time = formatTime(event.start, true)
- return `${time} ${name}`
+ return this.$createElement('span', { staticClass: 'v-event-summary' }, [
+ this.$createElement('strong', [time]),
+ ' ',
+ name,
+ ])
}
}
@@ -345,13 +349,10 @@ export default CalendarBase.extend({
: [this.genName(eventSummary)]
)
},
- genName (eventSummary: () => string): VNode {
+ genName (eventSummary: () => string | VNode): VNode {
return this.$createElement('div', {
staticClass: 'pl-1',
- domProps: {
- innerHTML: eventSummary(),
- },
- })
+ }, [eventSummary()])
},
genPlaceholder (day: CalendarTimestamp): VNode {
const height = this.eventHeight + this.eventMarginBottom
diff --git a/packages/vuetify/types/index.d.ts b/packages/vuetify/types/index.d.ts
index dd26d69d93d..27399ededd3 100644
--- a/packages/vuetify/types/index.d.ts
+++ b/packages/vuetify/types/index.d.ts
@@ -1,4 +1,4 @@
-import Vue, { Component, PluginFunction, VueConstructor, DirectiveOptions } from 'vue'
+import Vue, { Component, PluginFunction, VueConstructor, DirectiveOptions, VNode } from 'vue'
import './lib'
import './alacarte'
import './colors'
@@ -275,7 +275,7 @@ export type CalendarEventTimedFunction = (event: CalendarEvent) => boolean
export type CalendarEventCategoryFunction = (event: CalendarEvent) => string
-export type CalendarEventNameFunction = (event: CalendarEventParsed, timedEvent: boolean) => string
+export type CalendarEventNameFunction = (event: CalendarEventParsed, timedEvent: boolean) => string | VNode
export type DataTableFilterFunction = (value: any, search: string | null, item: any) => boolean