vuetify v2.1.7 еженедельный календарь, не отображающий события дня - PullRequest
0 голосов
/ 20 января 2020

У меня есть рабочий календарь, который может меняться в зависимости от свойства типа. Я могу отображать информацию в заголовке календаря и событиях дня для типа Месяц, но события дня для типа Неделя кажутся проблемой.

Как я уже говорил, в типе месяц события отображаются отлично, но для недельного типа Я не могу отобразить события, в теле дня ничего не отображается.


    <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']
    }),

...