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.
193 lines
6.1 KiB
193 lines
6.1 KiB
7 months ago
|
<script lang="ts" setup>
|
||
|
|
||
|
interface Props {
|
||
|
selectedDate?: Date | null;
|
||
|
isDisabled?: boolean;
|
||
|
pageDate?: Date;
|
||
|
activeDates?: Date[];
|
||
|
isMondayFirst?: boolean;
|
||
|
weekPicker?: boolean;
|
||
|
selectedWeek?: {
|
||
|
start: Date;
|
||
|
end: Date;
|
||
|
} | null
|
||
|
}
|
||
|
|
||
|
const emit = defineEmits(['change', 'update:selected-date', 'update:page-date', 'update:selected-week']);
|
||
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
selectedDate: null,
|
||
|
isDisabled: false,
|
||
|
isMondayFirst: false,
|
||
|
pageDate: new Date(),
|
||
|
weekPicker: false,
|
||
|
activeDates: [],
|
||
|
selectedWeek: null,
|
||
|
});
|
||
|
|
||
|
// Page date is the date we use to manage which month/date that is currently being displayed
|
||
|
const pageDate = useVModel(props, 'pageDate', emit);
|
||
|
const selectedDate = useVModel(props, 'selectedDate', emit);
|
||
|
const activeDates = useVModel(props, 'activeDates', emit);
|
||
|
const selectedWeek = useVModel(props, 'selectedWeek', emit);
|
||
|
|
||
|
|
||
|
const days = computed(() => {
|
||
|
if (props.isMondayFirst) {
|
||
|
return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
||
|
} else {
|
||
|
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||
|
}
|
||
|
})
|
||
|
|
||
|
// Used to display the current month and year
|
||
|
const currentMonth = computed(() => {
|
||
|
return pageDate.value.toLocaleString('default', {month: 'long'}) + ' ' + pageDate.value.getFullYear();
|
||
|
});
|
||
|
|
||
|
const selectWeek = (date: Date) => {
|
||
7 months ago
|
if (!date) return;
|
||
7 months ago
|
const dayOffset = props.isMondayFirst ? 1 : 0;
|
||
|
const dayOfWeek = (date.getDay() - dayOffset + 7) % 7;
|
||
|
const startDate = new Date(date);
|
||
|
startDate.setDate(date.getDate() - dayOfWeek);
|
||
|
selectedWeek.value = {
|
||
|
start: startDate,
|
||
|
end: new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 6)
|
||
|
};
|
||
|
}
|
||
|
|
||
|
// Generates all dates should be displayed in the calendar
|
||
|
// Includes all blank days at the start and end of the month
|
||
|
const dates = computed(() => {
|
||
|
const startOfMonth = new Date(pageDate.value.getFullYear(), pageDate.value.getMonth(), 1);
|
||
|
const dayOffset = props.isMondayFirst ? 1 : 0;
|
||
|
const dayOfWeek = (startOfMonth.getDay() - dayOffset + 7) % 7;
|
||
|
startOfMonth.setDate(startOfMonth.getDate() - dayOfWeek);
|
||
|
const datesArray = [];
|
||
|
while (datesArray.length < 42) {
|
||
|
datesArray.push(new Date(startOfMonth));
|
||
|
startOfMonth.setDate(startOfMonth.getDate() + 1);
|
||
|
}
|
||
|
return datesArray;
|
||
|
});
|
||
|
|
||
|
// Check if the date is in the selected week
|
||
|
const isDateInSelectedWeek = (date: Date) => {
|
||
|
if (!selectedWeek.value) return false;
|
||
|
return date >= selectedWeek.value.start && date <= selectedWeek.value.end;
|
||
|
}
|
||
|
|
||
|
// Used in DatePicker for checking if the date is currently selected
|
||
|
const isSelectedDate = (dObj: Date) => {
|
||
|
if (!selectedDate.value) return false;
|
||
|
const propDate = new Date(selectedDate.value);
|
||
|
return props.selectedDate ? isSameDate(propDate, dObj) : false;
|
||
|
}
|
||
|
|
||
|
// Since we are using the same component for week picker and date picker we need to handle the date selection differently
|
||
|
const handleSelectDate = (date: Date) => {
|
||
|
if (props.weekPicker) {
|
||
|
selectWeek(date);
|
||
|
} else {
|
||
|
selectedDate.value = date;
|
||
|
emit('update:selected-date', date);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
// Used to check if a date is in the current month
|
||
|
const isDateInCurrentMonth = (date: Date) => {
|
||
|
return date.getMonth() === pageDate.value.getMonth();
|
||
|
};
|
||
|
|
||
|
// Used to check if two dates are the same
|
||
|
const isSameDate = (date1: Date, date2: Date) => {
|
||
7 months ago
|
if (!date1 || !date2) return false;
|
||
7 months ago
|
return date1.getDate() === date2.getDate() &&
|
||
|
date1.getMonth() === date2.getMonth() &&
|
||
|
date1.getFullYear() === date2.getFullYear();
|
||
|
};
|
||
|
|
||
|
// Used to Check if an event is in the date
|
||
|
const isActiveDate = (date: Date) => {
|
||
|
return activeDates.value.some((d) => isSameDate(d, date));
|
||
|
};
|
||
|
|
||
|
// Paginate the calendar
|
||
|
const paginate = (action: 'next' | 'prev') => {
|
||
|
const newDate = new Date(pageDate.value);
|
||
|
if (action === 'next') {
|
||
|
newDate.setMonth(newDate.getMonth() + 1);
|
||
|
} else {
|
||
|
newDate.setMonth(newDate.getMonth() - 1);
|
||
|
}
|
||
|
pageDate.value = newDate;
|
||
|
emit('update:page-date', newDate);
|
||
|
};
|
||
|
|
||
|
</script>
|
||
|
|
||
|
<template>
|
||
|
<div class="p-4 flex flex-col gap-4">
|
||
|
<div class="flex justify-between items-center">
|
||
|
<NcButton size="small" type="secondary" @click="paginate('prev')">
|
||
|
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4"/>
|
||
|
</NcButton>
|
||
|
<span class="font-bold text-gray-700">{{ currentMonth }}</span>
|
||
|
<NcButton size="small" type="secondary" @click="paginate('next')">
|
||
|
<component :is="iconMap.doubleRightArrow" class="h-4 w-4"/>
|
||
|
</NcButton>
|
||
|
</div>
|
||
|
<div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
|
||
|
<div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between p-2">
|
||
|
<span v-for="day in days" class="h-9 flex items-center justify-center w-9 text-gray-500">{{ day }}</span>
|
||
|
</div>
|
||
|
<div class="grid grid-cols-7 gap-2 p-2">
|
||
|
<span v-for="(date) in dates" :key="date" :class="{
|
||
|
'rounded-lg' : !weekPicker,
|
||
|
'bg-brand-50 border-2 !border-brand-500' : isSelectedDate(date) && !weekPicker,
|
||
|
'hover:(border-1 border-gray-200 bg-gray-100)' : !isSelectedDate(date) && !weekPicker,
|
||
|
'nc-selected-week z-1': isDateInSelectedWeek(date) && weekPicker,
|
||
|
'text-gray-400': !isDateInCurrentMonth(date),
|
||
|
'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
|
||
|
'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
|
||
|
|
||
|
}" class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
|
||
|
@click="handleSelectDate(date)"
|
||
|
>
|
||
7 months ago
|
<span v-if="isActiveDate(date)"
|
||
|
class="absolute z-2 h-1.5 w-1.5 rounded-full bg-brand-500 top-1 right-1"></span>
|
||
7 months ago
|
<span class="z-2">
|
||
|
{{ date.getDate() }}
|
||
|
</span>
|
||
|
</span>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
|
||
|
.nc-selected-week {
|
||
|
@apply relative;
|
||
|
}
|
||
|
|
||
|
.nc-selected-week:before {
|
||
|
@apply absolute top-0 left-0 w-full h-full border-y-2 bg-brand-50 border-brand-500;
|
||
|
content: '';
|
||
|
width: 124%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
7 months ago
|
.nc-selected-week-start:before {
|
||
7 months ago
|
@apply !border-l-2 !rounded-l-lg;
|
||
|
}
|
||
|
|
||
7 months ago
|
.nc-selected-week-end:before {
|
||
7 months ago
|
width: 100%;
|
||
|
@apply !border-r-2 !rounded-r-lg;
|
||
|
}
|
||
|
|
||
|
</style>
|