mirror of https://github.com/nocodb/nocodb
DarkPhoenix2704
9 months ago
1 changed files with 149 additions and 0 deletions
@ -0,0 +1,149 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
|
||||||
|
interface Props { |
||||||
|
selectedDate?: Date | null; |
||||||
|
isDisabled?: boolean; |
||||||
|
pageDate?: Date; |
||||||
|
activeDates?: Date[]; |
||||||
|
isMondayFirst?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
const emit = defineEmits(['change', 'update:selectedDate', 'update:pageDate']); |
||||||
|
const props = withDefaults(defineProps<Props>(), { |
||||||
|
selectedDate: null, |
||||||
|
isDisabled: false, |
||||||
|
isMondayFirst: false, |
||||||
|
pageDate: new Date(), |
||||||
|
activeDates: [], |
||||||
|
}); |
||||||
|
|
||||||
|
const pageDate = useVModel(props, 'pageDate', emit); |
||||||
|
const selectedDate = useVModel(props, 'selectedDate', emit); |
||||||
|
const activeDates = useVModel(props, 'activeDates', emit); |
||||||
|
|
||||||
|
const days = computed(() => { |
||||||
|
if (props.isMondayFirst) { |
||||||
|
return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; |
||||||
|
} else { |
||||||
|
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const currentMonth = computed(() => { |
||||||
|
return pageDate.value.toLocaleString('default', { month: 'long' }) + ' ' + pageDate.value.getFullYear(); |
||||||
|
}); |
||||||
|
|
||||||
|
const getDay = (date: Date) => { |
||||||
|
return date.getDate(); |
||||||
|
}; |
||||||
|
|
||||||
|
const blankDays = computed((): any => { |
||||||
|
const date = new Date(pageDate.value); |
||||||
|
const dObj = new Date(date.getFullYear(), date.getMonth(), 1, date.getHours(), date.getMinutes()); |
||||||
|
if (props.isMondayFirst) { |
||||||
|
return getDay(dObj) > 0 ? getDay(dObj) - 1 : 6; |
||||||
|
} |
||||||
|
return getDay(dObj); |
||||||
|
}); |
||||||
|
|
||||||
|
function isSelectedDate(dObj: Date): boolean { |
||||||
|
const propDate = new Date(selectedDate.value); |
||||||
|
return props.selectedDate ? compareDates(propDate, dObj) : false; |
||||||
|
} |
||||||
|
|
||||||
|
const isActiveDate = (date: Date) => { |
||||||
|
return activeDates.value.some((d) => compareDates(d, date)); |
||||||
|
}; |
||||||
|
|
||||||
|
const compareDates = (date1: Date, date2: Date) => { |
||||||
|
return date1.getDate() === date2.getDate() && |
||||||
|
date1.getMonth() === date2.getMonth() && |
||||||
|
date1.getFullYear() === date2.getFullYear(); |
||||||
|
}; |
||||||
|
|
||||||
|
const daysInMonth = (year: number, month: number) => { |
||||||
|
return new Date(year, month + 1, 0).getDate(); |
||||||
|
}; |
||||||
|
|
||||||
|
const setDate = (date: Date, day: number) => { |
||||||
|
date.setDate(day); |
||||||
|
}; |
||||||
|
|
||||||
|
interface DateObj { |
||||||
|
date: number; |
||||||
|
isSelected: boolean; |
||||||
|
timestamp: number; |
||||||
|
hasEvent: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
const monthDays = computed((): DateObj[] => { |
||||||
|
const d = new Date(pageDate.value); |
||||||
|
const tDays: DateObj[] = []; |
||||||
|
|
||||||
|
const dObj = new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); |
||||||
|
const t = daysInMonth(dObj.getFullYear(), dObj.getMonth()); |
||||||
|
for (let i = 0; i < t; i += 1) { |
||||||
|
tDays.push({ |
||||||
|
timestamp: dObj.getTime(), |
||||||
|
date: dObj.getDate(), |
||||||
|
isSelected: isSelectedDate(dObj), |
||||||
|
hasEvent: isActiveDate(dObj), |
||||||
|
}); |
||||||
|
setDate(dObj, (dObj.getDate() + 1)); |
||||||
|
} |
||||||
|
return tDays; |
||||||
|
}); |
||||||
|
|
||||||
|
const paginateMonth = (direction: 'next' | 'prev') => { |
||||||
|
const newDate = new Date(pageDate.value); |
||||||
|
if (direction === 'next') { |
||||||
|
newDate.setMonth(newDate.getMonth() + 1); |
||||||
|
} else { |
||||||
|
newDate.setMonth(newDate.getMonth() - 1); |
||||||
|
} |
||||||
|
pageDate.value = newDate; |
||||||
|
emit('update:pageDate', newDate); |
||||||
|
}; |
||||||
|
|
||||||
|
const selectDate = (day: number) => { |
||||||
|
const date = new Date(pageDate.value); |
||||||
|
date.setDate(day); |
||||||
|
selectedDate.value = date; |
||||||
|
emit('update:selectedDate', date); |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="p-4 flex flex-col gap-4"> |
||||||
|
<div class="flex justify-between items-center"> |
||||||
|
<NcButton type="secondary" size="small" @click="paginateMonth('prev')"> |
||||||
|
<component :is="iconMap.doubleLeftArrow" class="h-4 w-4" /> |
||||||
|
</NcButton> |
||||||
|
<span class="font-bold text-gray-700">{{ currentMonth }}</span> |
||||||
|
<NcButton type="secondary" size="small" @click="paginateMonth('next')"> |
||||||
|
<component :is="iconMap.doubleRightArrow" class="h-4 w-4" /> |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
<div class="border-1 border-gray-200 rounded-t-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="flex flex-row flex-wrap gap-2 p-2"> |
||||||
|
<span v-for="day in blankDays" class="h-9 w-9"></span> |
||||||
|
<span v-for="day in monthDays" :key="day.timestamp" :class="{ |
||||||
|
'bg-brand-50 border-2 !border-brand-500' : day.isSelected, |
||||||
|
'hover:(border-1 border-gray-200 bg-gray-100)' : !day.isSelected |
||||||
|
}" class="h-9 w-9 px-1 py-2 relative font-medium rounded-lg flex items-center cursor-pointer justify-center" |
||||||
|
@click="selectDate(day.date)" |
||||||
|
> |
||||||
|
<span v-if="day.hasEvent" class="absolute h-1.5 w-1.5 rounded-full bg-brand-500 top-1 right-1"></span> |
||||||
|
{{day.date}} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"></style> |
Loading…
Reference in new issue