I am looking for a way to add horizontal scrolling when using categories so the calendar doesn't get squished when more categories are added. Is there a way that I can scroll horizontally within the v-calendar? I've tried using vue-virtual-scrollbar but it ended up scrolling the entire calendar including the dates and the times.
The end goal would be to keep the Category names on a vertical scroll and to keep the time of day on the horizontal scroll.
https://codepen.io/kodyvs/pen/gOMeOwB --> this is an example of what's happening
import * as vueCustomScrollbar from "https://cdn.skypack.dev/vue-custom-scrollbar@1.4.0";
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
settings: {
suppressScrollY: false,
suppressScrollX: false,
wheelPropagation: false,
},
focus: '',
events: [],
colors: ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange', 'grey darken-1'],
names: ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party'],
categories: ['John Smith', 'Tori Walker','John Smith1', 'Tori Walker1','John Smith2', 'Tori Walker2', 'John Smith3', 'Tori Walker3'],
}),
mounted () {
this.$refs.calendar.checkChange()
},
methods: {
getEventColor (event) {
return event.color
},
setToday () {
this.focus = ''
},
prev () {
this.$refs.calendar.prev()
},
next () {
this.$refs.calendar.next()
},
fetchEvents ({ start, end }) {
const events = []
const min = new Date(`${start.date}T00:00:00`)
const max = new Date(`${end.date}T23:59:59`)
const days = (max.getTime() - min.getTime()) / 86400000
const eventCount = this.rnd(days, days + 20)
for (let i = 0; i < eventCount; i++) {
const allDay = this.rnd(0, 3) === 0
const firstTimestamp = this.rnd(min.getTime(), max.getTime())
const first = new Date(firstTimestamp - (firstTimestamp % 900000))
const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000
const second = new Date(first.getTime() + secondTimestamp)
events.push({
name: this.names[this.rnd(0, this.names.length - 1)],
start: first,
end: second,
color: this.colors[this.rnd(0, this.colors.length - 1)],
timed: !allDay,
category: this.categories[this.rnd(0, this.categories.length - 1)],
})
}
this.events = events
},
rnd (a, b) {
return Math.floor((b - a + 1) * Math.random()) + a
},
},
}).scroll-area {
position: auto;
margin: auto;
height: 700px;
width: 2100px;
}
::v-deep v-calendar-category__column-header {
min-width: 1000px;
}
::v-deep .v-calendar-daily_head-weekday,
::v-deep .v-calendar-daily_head-day-label {
display: none;
}
::v-deep .v-select__selections {
margin-top: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<v-app id="inspire">
<v-row class="fill-height">
<v-col>
<v-sheet height="64">
<v-toolbar
flat
>
<v-btn
outlined
class="mr-4"
color="grey darken-2"
@click="setToday"
>
Today
</v-btn>
<v-btn
fab
text
small
color="grey darken-2"
@click="prev"
>
<v-icon small>
mdi-chevron-left
</v-icon>
</v-btn>
<v-btn
fab
text
small
color="grey darken-2"
@click="next"
>
<v-icon small>
mdi-chevron-right
</v-icon>
</v-btn>
<v-toolbar-title v-if="$refs.calendar">
{{ $refs.calendar.title }}
</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
</v-sheet>
<vue-custom-scrollbar class="scroll-area" :settings="settings">
<v-sheet height="600" width="2100px">
<v-calendar
ref="calendar"
v-model="focus"
color="primary"
type="category"
category-show-all
:categories="categories"
:events="events"
:event-color="getEventColor"
@change="fetchEvents"
></v-calendar>
</v-sheet>
</vue-custome-scrollbar>
</v-col>
</v-row>
</v-app>
</div>