mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.3 KiB
43 lines
1.3 KiB
10 months ago
|
<script lang="ts" setup>
|
||
|
|
import dayjs from 'dayjs';
|
||
|
|
|
||
|
|
const { selectedDateRange, formattedData, calendarRange } = useCalendarViewStoreOrThrow()
|
||
|
|
|
||
|
|
const weekDates = computed(() => {
|
||
|
|
const startOfWeek = new Date(selectedDateRange.value.start)
|
||
|
|
const endOfWeek = new Date(selectedDateRange.value.end)
|
||
|
|
const datesArray = []
|
||
|
|
while (startOfWeek <= endOfWeek) {
|
||
|
|
datesArray.push(new Date(startOfWeek))
|
||
|
|
startOfWeek.setDate(startOfWeek.getDate() + 1)
|
||
|
|
}
|
||
|
|
return datesArray
|
||
|
|
})
|
||
|
|
|
||
|
|
const getData = (date: Date) => {
|
||
|
|
const range = calendarRange.value[0]
|
||
|
|
return formattedData.value.filter((record) => dayjs(date).isSame(dayjs(record.row[range.fk_from_col.title])))
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<div class="flex">
|
||
|
|
<div
|
||
|
|
v-for="date in weekDates"
|
||
|
|
:key="date"
|
||
|
|
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 !last:mr-2.5 border-gray-200 border-b-1 border-r-1 bg-gray-50"
|
||
|
|
>
|
||
|
|
{{ dayjs(date).format('DD ddd') }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex overflow-auto nc-scrollbar-md h-[calc(100vh-12rem)]">
|
||
|
|
<div v-for="date in weekDates" :key="date" class="flex flex-col items-center w-1/7">
|
||
|
|
<LazySmartsheetCalendarDayView :data="getData(date)" :is-embed="true" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|