vue.js - vuetify v2.1.7 每周日历不显示日事件
问题描述
我有一个可以根据 type 属性更改的工作日历。我能够在日历标题和月份类型的日事件中显示信息,但周类型的日事件似乎是一个问题。
正如我在类型月份告诉你的那样,事件显示完美,但对于每周类型,我无法显示事件,白天正文中没有显示任何内容。
<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']
}),
解决方案
推荐阅读
- javacompiler - java 编译器如何处理重复的变量名。它使用什么机制?
- sql - 我想要平衡的前十名供应商
- javascript - 这种一同步一异步进程的组合是否同时运行?
- react-native - 当我们单击滚动时如何为文本输入创建滚动视图它可以拖动
- bash - Bash 脚本连接
- spring - Java 应用程序构建失败,Mysql url 指向 Docker 容器
- angular - 使用 GitHub Actions 运行 Angular e2e 测试会引发“DevToolsActivePort 文件不存在”错误
- java - @EnableEurekaClient 有什么用?
- java - java - 如何将MySQL中数据库中的图像显示到java中的jTable中?
- flutter - 如何在颤动的底部工作表中实现文件选择器