Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Calendars
The v-calendar component is used to display information in different kinds of calendar views.
It has slots for all-day or timed elements.
The weekly and monthly view has a slot for each day.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-sheet height="400">
<v-calendar
ref="calendar"
:now="today"
:value="today"
:events="events"
color="primary"
type="week"
></v-calendar>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
today: "2020-01-08",
events: [
{
name: "eat",
start: "2020-01-07 09:00",
end: "2020-01-07 10:00",
},
{
name: "drink",
start: "2020-01-10",
},
{
name: "sleep",
start: "2020-01-09 12:30",
end: "2020-01-09 15:30",
},
],
mounted() {
this.$refs.calendar.scrollToTime("08:00");
},
}),
};
</script>
We added the v-calendar component to display the items the way we want.
We set the now prop to the string of the date we want to display.
The value is set to the same thing and it’s the selected date.
events prop has a list of events to display.
The type has the type of calendar view we want to show.
color sets the color for the calendar items.
The events array has the objects with the name property for the event name.
start and end has the calendar start and end dates.
The mounted hook has the scrollToTime method call to let us scroll to the time we want.
Daily View
We can change the calendar view to a daily view.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-sheet height="400">
<v-calendar color="primary" type="day">
<template v-slot:day-header="{ present }">
<template v-if="present" class="text-center">Today</template>
</template>
<template v-slot:interval="{ hour }">
<div class="text-center">{{ hour }} o'clock</div>
</template>
</v-calendar>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have the v-sheet component with the v-calendar component.
We popular the header slot to change the date display.
And we populate the interval slot to display the time the way we want.
Slots
We can populate various slots to format the code to way we want.
For instance, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-sheet height="500">
<v-calendar :now="today" :value="today" color="primary">
<template v-slot:day="{ present, past, date }">
<v-row class="fill-height">
<template v-if="past && tracked[date]">
<v-sheet
v-for="(percent, i) in tracked[date]"
:key="i"
:title="category[i]"
:color="colors[i]"
:width="`${percent}%`"
height="100%"
tile
></v-sheet>
</template>
</v-row>
</template>
</v-calendar>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
today: "2020-01-10",
tracked: {
"2020-01-09": [23, 45, 10],
"2020-01-08": [10],
"2020-01-07": [0, 78, 5],
"2020-01-06": [0, 0, 50],
"2020-01-05": [0, 10, 23],
"2020-01-04": [2, 90],
"2020-01-03": [10, 32],
"2020-01-02": [80, 10, 10],
"2020-01-01": [20, 25, 10],
},
colors: ["red", "green", "blue"],
category: ["Development", "Meetings", "Slacking"],
}),
};
</script>
The tracked object has arrays of percentages of the bar to display.
We can change the width of what we want with it.
The color prop sets the color.
title sets the title of the bar.
tile make the bars display side by side.
Conclusion
We can display the calendar with the v-calendar component.
It has a daily, weekly, and monthly view.
