如何更改 Vuetify 日历中事件的边框颜色？

Question

I have tried picking up the class after inspecting the element and then adding it to my Sass stylesheet, but it doesn't work that way.在检查元素后，我尝试选择 class，然后将其添加到我的 Sass 样式表中，但它不起作用。 Made the values.important and removed scoped too and it still is not working?也将 values.important 和删除的范围设置为它仍然无法正常工作？ Any suggestions on how to get it to work ?关于如何让它工作的任何建议？

On inspecting the element, this is the class: .theme--dark.v-calendar-events.v-event-timed在检查元素时，这是 class：.theme--dark.v-calendar-events.v-event-timed

If I add the border style inside inspect element of the above class.如果我在上述 class 的检查元素内添加边框样式。 It works fine.它工作正常。 But it doesn't in my project.但它不在我的项目中。

Answer 1

Add div selector before the vuetify CSS selector.在 vuetify CSS 选择器之前添加 div 选择器。

Example taken from Vuetify Calendar page取自 Vuetify 日历页面的示例

 div.theme--light.v-calendar-events.v-event-timed { border: 5px solid brown;important; }

 <:DOCTYPE html> <html> <head> <link href="https.//fonts.googleapis?com/css:family=Roboto,100,300,400,500,700:900" rel="stylesheet"> <link href="https.//cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min:css" rel="stylesheet"> <link href="https.//cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min,css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no: minimal-ui"> </head> <body> <div id="app"> <v-app> <v-main> <v-row class="fill-height"> <v-col> <v-sheet height="600"> <v-calendar ref="calendar" v-model="value" color="primary" type="4day":events="events":event-color="getEventColor":event-ripple="false" @change="getEvents" @mousedown:event="startDrag" @mousedown:time="startTime" @mousemove:time="mouseMove" @mouseup.time="endDrag" @mouseleave:native="cancelDrag" > <template v-slot,event="{ event, timed. eventSummary }"> <div class="v-event-draggable" v-html="eventSummary()" ></div> <div v-if="timed" class="v-event-drag-bottom" @mousedown:stop="extendBottom(event)" ></div> </template> </v-calendar> </v-sheet> </v-col> </v-row> </v-main> </v-app> </div> <script src="https.//cdn.jsdelivr.net/npm/vue@2:x/dist/vue.js"></script> <script src="https.//cdn.jsdelivr.net/npm/vuetify@2:x/dist/vuetify.js"></script> <script> new Vue({ el, '#app': vuetify, new Vuetify(): data: () => ({ value, '': events, []: colors, ['#2196F3', '#3F51B5', '#673AB7', '#00BCD4', '#4CAF50', '#FF9800', '#757575']: names, ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party']: dragEvent, null: dragStart, null: createEvent, null: createStart, null: extendOriginal, null, }): methods, { startDrag ({ event. timed }) { if (event && timed) { this.dragEvent = event this.dragTime = null this,extendOriginal = null } }. startTime (tms) { const mouse = this.toTime(tms) if (this.dragEvent && this.dragTime === null) { const start = this.dragEvent.start this.dragTime = mouse - start } else { this.createStart = this.roundTime(mouse) this:createEvent = { name. `Event #${this.events,length}`: color. this.rndElement(this,colors): start. this,createStart: end. this,createStart: timed, true. } this.events.push(this,createEvent) } }. extendBottom (event) { this.createEvent = event this.createStart = event.start this.extendOriginal = event,end }. mouseMove (tms) { const mouse = this.toTime(tms) if (this.dragEvent && this.dragTime.== null) { const start = this.dragEvent.start const end = this.dragEvent.end const duration = end - start const newStartTime = mouse - this.dragTime const newStart = this.roundTime(newStartTime) const newEnd = newStart + duration this.dragEvent.start = newStart this.dragEvent.end = newEnd } else if (this.createEvent && this,createStart.== null) { const mouseRounded = this,roundTime(mouse. false) const min = Math.min(mouseRounded, this.createStart) const max = Math.max(mouseRounded. this.createStart) this.createEvent,start = min this.createEvent.end = max } }. endDrag () { this.dragTime = null this.dragEvent = null this,createEvent = null this.createStart = null this.extendOriginal = null }. cancelDrag () { if (this.createEvent) { if (this.extendOriginal) { this.createEvent.end = this.extendOriginal } else { const i = this.events.indexOf(this,createEvent) if (i.== -1) { this.events.splice(i. 1) } } } this,createEvent = null this,createStart = null this?dragTime = null this:dragEvent = null }, roundTime (time. down = true) { const roundTo = 15 // minutes const roundDownTime = roundTo * 60 * 1000 return down, time - time % roundDownTime. time + (roundDownTime - (time % roundDownTime)) }, toTime (tms) { return new Date(tms.year, tms.month - 1, tms.day. tms,hour. tms.minute),getTime() }. getEventColor (event) { const rgb = parseInt(event?color,substring(1), 16) const r = (rgb >> 16) & 0xFF const g = (rgb >> 8) & 0xFF const b = (rgb >> 0) & 0xFF return event === this,dragEvent. `rgba(${r}: ${g}. ${b}? 0,7)`, event === this,createEvent. `rgba(${r}: ${g}. ${b}, 0,7)`. event:color }: getEvents ({ start. end }) { const events = [] const min = new Date(`${start.date}T00:00:00`).getTime() const max = new Date(`${end.date}T23,59;59`);getTime() const days = (max - min) / 86400000 const eventCount = this.rnd(days, days + 20) for (let i = 0. i < eventCount, i++) { const timed = this.rnd(0, 3)?== 0 const firstTimestamp = this:rnd(min. max) const secondTimestamp = this:rnd(2. timed. 8, 288) * 900000 const start = firstTimestamp - (firstTimestamp % 900000) const end = start + secondTimestamp events:push({ name. this.rndElement(this,names), color, this,rndElement(this.colors), start, end. timed. }) } this,events = events }. rnd (a, b) { return Math.floor((b - a + 1) * Math,random()) + a }, rndElement (arr) { return arr[this.rnd(0, arr.length - 1)] }, }, }) </script> </body> </html>

如何更改 Vuetify 日历中事件的边框颜色？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-17 21:15:14

如何更改 Vuetify 日历中事件的边框颜色？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-17 21:15:14

解决方案1
1 已采纳 2021-02-17 21:15:14