У меня есть рабочий календарь, который может меняться в зависимости от свойства типа. Я могу отображать информацию в заголовке календаря и событиях дня для типа Месяц, но события дня для типа Неделя кажутся проблемой.
Как я уже говорил, в типе месяц события отображаются отлично, но для недельного типа Я не могу отобразить события, в теле дня ничего не отображается.
<v-calendar
ref="calendar"
color="primary"
:event-color="getEventColor"
:now="today"
:type="type"
@click:event="showEvent"
@click:more="viewDay"
@click:date="viewDay"
@change="updateRange"
>
<template v-slot:day-body="{time}">
sdfdsfsd
<v-row
class="fill-height"
>
<template v-if="past && tracked[date]">
<v-sheet
v-for="(percent, i) in tracked[date]"
:key="i"
:title="percent.name"
:color="colors[i]"
tile
>
{{percent.name}}
{{percent.eventTime}}
</v-sheet>
</template>
</v-row>
</template>
<template v-slot:day="{ present, past, future, date }">
<v-row
class="fill-height"
>
<template v-if="past && tracked[date]">
<v-sheet
v-for="(percent, i) in tracked[date]"
:key="i"
:title="percent.name"
:color="colors[i]"
tile
>
{{percent.name}}
{{percent.eventTime}}
</v-sheet>
</template>
</v-row>
</template>
</v-calendar>
data: () => ({
focus: '',
type: 'week',
typeToLabel: {
month: 'Month',
week: 'Week',
day: 'Day',
'4day': '4 Days',
},
start: null,
end: null,
selectedEvent: {},
selectedElement: null,
selectedOpen: false,
today: '2020-01-10',
tracked: {
'2020-01-20': [
{
name: 'John Mayer',
eventTime: '9:30 - 10:30am',
eventType: '30 min meeting',
eventTypeColor: '#81d4fa',
start: '2019-01-20 9:30',
end: '2019-01-20 10:30',
duration: 45,
open: false
},
{
name: 'John Mayer',
eventTime: '12:30 - 15:30pm',
eventType: '30 min meeting',
eventTypeColor: '#81d4fa',
start: '2019-01-20 12:30',
end: '2019-01-20 15:30',
duration: 45,
open: false
},
],
'2020-01-08': [
{
name: 'John Mayer',
eventTime: '8:30 - 9:30am',
eventType: '30 min meeting',
eventTypeColor: '#81d4fa',
start: '2019-01-08 8:30',
end: '2019-01-08 9:30',
duration: 45,
open: false
},
{
name: 'John Mayer',
eventTime: '9:30 - 10:30am',
eventType: '30 min meeting',
eventTypeColor: '#81d4fa',
start: '2019-01-08 9:30',
end: '2019-01-08 10:30',
duration: 45,
open: false
},
{
name: 'John Mayer',
eventTime: '12:30 - 15:30pm',
eventType: '30 min meeting',
eventTypeColor: '#81d4fa',
start: '2019-01-08 12:30',
end: '2019-01-08 15:30',
duration: 45,
open: false
}
],
'2020-01-07': [
{
name: 'John Mayer',
eventTime: '12:30 - 15:30pm',
eventType: '30 min meeting',
eventTypeColor: '#81d4fa',
start: '2019-01-07 12:30',
end: '2019-01-07 15:30',
duration: 45,
open: false
},
{
name: 'John Mayer',
eventTime: '9:30 - 10:30am',
eventType: '30 min meeting',
eventTypeColor: '#81d4fa',
start: '2019-01-07 9:30',
end: '2019-01-07 10:30',
duration: 45,
open: false
}
],
},
colors: ['#1867c0', '#fb8c00', '#000000'],
category: ['Development', 'Meetings', 'Slacking']
}),