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. Made the values !important and removed scoped too and it still is not working. 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
If I add the border style inside inspect element of the above class. It works fine. But it doesn’t in my project.
Advertisement
Answer
Add div selector before the vuetify CSS selector.
Example taken from Vuetify Calendar page
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>