mirror of https://github.com/nocodb/nocodb
3 changed files with 201 additions and 224 deletions
@ -1,217 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
|
||||
interface Props { |
||||
selectedDate?: Date | null; |
||||
isDisabled?: boolean; |
||||
pageDate?: Date; |
||||
activeDates?: Date[]; |
||||
isMondayFirst?: boolean; |
||||
weekPicker?: boolean; |
||||
startDate?: Date | null; |
||||
endDate?: Date | null; |
||||
} |
||||
|
||||
const emit = defineEmits(['change', 'update:selected-date', 'update:page-date', 'update:start-date', 'update:end-date']); |
||||
const props = withDefaults(defineProps<Props>(), { |
||||
selectedDate: null, |
||||
isDisabled: false, |
||||
isMondayFirst: false, |
||||
pageDate: new Date(), |
||||
weekPicker: false, |
||||
activeDates: [], |
||||
startDate: null, |
||||
endDate: null, |
||||
}); |
||||
|
||||
const pageDate = useVModel(props, 'pageDate', emit); |
||||
const selectedDate = useVModel(props, 'selectedDate', emit); |
||||
const activeDates = useVModel(props, 'activeDates', emit); |
||||
const startDate = useVModel(props, 'startDate', emit); |
||||
const endDate = useVModel(props, 'endDate', 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.getDay(); |
||||
}; |
||||
|
||||
const blankDaysAtStart = computed((): any => { |
||||
const date = new Date(pageDate.value); |
||||
const dObj = new Date(date.getFullYear(), date.getMonth(), 1, date.getHours(), date.getMinutes()); |
||||
|
||||
const blankDaysCount = props.isMondayFirst |
||||
? getDay(dObj) > 0 |
||||
? getDay(dObj) - 1 |
||||
: 6 |
||||
: getDay(dObj); |
||||
|
||||
const blankDays = []; |
||||
|
||||
for (let i = 1; i <= blankDaysCount; i++) { |
||||
const blankDayDate = new Date(dObj); |
||||
blankDayDate.setDate(dObj.getDate() - i); |
||||
const dayOfMonth = blankDayDate.getDate(); |
||||
blankDays.unshift({ day: dayOfMonth }); |
||||
} |
||||
|
||||
return blankDays; |
||||
}); |
||||
|
||||
const blankDaysAtEnd = computed((): any => { |
||||
const date = new Date(pageDate.value); |
||||
const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0); |
||||
|
||||
const daysInWeek = 7; |
||||
const lastDayOfWeek = props.isMondayFirst ? 6 : 0; |
||||
|
||||
const blankDaysCount = props.isMondayFirst |
||||
? lastDayOfWeek - (lastDayOfMonth.getDay() % daysInWeek) |
||||
: (daysInWeek - 1) - lastDayOfMonth.getDay(); |
||||
|
||||
const blankDays = []; |
||||
|
||||
for (let i = 1; i <= blankDaysCount; i++) { |
||||
const blankDayDate = new Date(lastDayOfMonth); |
||||
blankDayDate.setDate(lastDayOfMonth.getDate() + i); |
||||
const dayOfMonth = blankDayDate.getDate(); |
||||
blankDays.push({ day: dayOfMonth }); |
||||
} |
||||
return blankDays; |
||||
}); |
||||
|
||||
function isSelectedDate(dObj: Date): boolean { |
||||
if(!selectedDate.value) return false; |
||||
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; |
||||
inSelectedWeek: 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), |
||||
inSelectedWeek: false, |
||||
}); |
||||
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:page-date', newDate); |
||||
}; |
||||
|
||||
const selectDate = (day: number) => { |
||||
if(props.weekPicker) { |
||||
const date = new Date(pageDate.value.getFullYear(), pageDate.value.getMonth(), day) |
||||
if(!startDate.value) { |
||||
console.log('setting start date') |
||||
startDate.value = date; |
||||
console.log(startDate.value) |
||||
emit('update:start-date', date); |
||||
} else if(!endDate.value) { |
||||
endDate.value = date; |
||||
emit('update:end-date', date); |
||||
} else { |
||||
startDate.value = date; |
||||
endDate.value = null; |
||||
emit('update:start-date', date); |
||||
emit('update:end-date', null); |
||||
} |
||||
} else { |
||||
const date = new Date(pageDate.value); |
||||
date.setDate(day); |
||||
selectedDate.value = date; |
||||
emit('update:selected-date', 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-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="flex flex-row flex-wrap gap-2 p-2"> |
||||
<span v-for="day in blankDaysAtStart" class="h-9 w-9 px-1 py-2 text-gray-400 flex items-center justify-center">{{day.day}}</span> |
||||
<span v-for="day in monthDays" :key="day.timestamp" :class="{ |
||||
'rounded-lg' : !weekPicker, |
||||
'bg-brand-50 border-2 !border-brand-500' : day.isSelected && !weekPicker, |
||||
'hover:(border-1 border-gray-200 bg-gray-100)' : !day.isSelected && !weekPicker, |
||||
'border-y-2 border-brand-50 !border-brand-500': day.inSelectedWeek && weekPicker, |
||||
}" class="h-9 w-9 px-1 py-2 relative font-medium 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> |
||||
<span v-for="day in blankDaysAtEnd" class="h-9 w-9 px-1 py-2 text-gray-400 flex items-center justify-center">{{day.day}}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"></style> |
@ -0,0 +1,191 @@
|
||||
<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) => { |
||||
if(!date) return; |
||||
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) => { |
||||
if(!date1 || !date2) return false; |
||||
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)" |
||||
> |
||||
<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> |
||||
<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%; |
||||
} |
||||
|
||||
.nc-selected-week-start:before{ |
||||
@apply !border-l-2 !rounded-l-lg; |
||||
} |
||||
|
||||
.nc-selected-week-end:before{ |
||||
width: 100%; |
||||
@apply !border-r-2 !rounded-r-lg; |
||||
} |
||||
|
||||
</style> |
Loading…
Reference in new issue