152 lines
4.1 KiB
Vue
152 lines
4.1 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { date } from 'quasar';
|
|
import QCalendarMonthWrapper from 'src/components/ui/QCalendarMonthWrapper.vue';
|
|
import { QCalendarMonth } from '@quasar/quasar-ui-qcalendar/src/index.js';
|
|
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.scss';
|
|
import { useWeekdayStore } from 'src/stores/useWeekdayStore';
|
|
import useWeekdaysOrder from 'src/composables/getWeekdays';
|
|
|
|
const formatDate = (dateToFormat, format = 'YYYY-MM-DD') => (
|
|
date.formatDate(dateToFormat, format)
|
|
);
|
|
|
|
|
|
const props = defineProps({
|
|
year: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
month: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
monthDate: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
daysMap: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['onDateSelected']);
|
|
|
|
const { locale } = useI18n();
|
|
const weekdayStore = useWeekdayStore();
|
|
const weekDays = useWeekdaysOrder();
|
|
const calendarRef = ref(null);
|
|
const today = ref(formatDate(Date.vnNew()));
|
|
const todayTimestamp = computed(() => {
|
|
const date = Date.vnNew();
|
|
date.setHours(0, 0, 0, 0);
|
|
return date.getTime();
|
|
});
|
|
const _monthDate = computed(() => formatDate(props.monthDate));
|
|
|
|
const calendarHeaderTitle = computed(() => {
|
|
return `${weekdayStore.getLocaleMonths[props.month - 1].locale} ${props.year}`;
|
|
});
|
|
|
|
const isToday = (timestamp) => {
|
|
const { year, month, day } = timestamp;
|
|
return todayTimestamp.value === new Date(year, month - 1, day).getTime();
|
|
};
|
|
|
|
const getEventByTimestamp = ({ year, month, day }) => {
|
|
const stamp = new Date(year, month - 1, day).getTime();
|
|
return props.daysMap?.[stamp] || null;
|
|
};
|
|
|
|
const handleDateClick = (timestamp) => {
|
|
const event = getEventByTimestamp(timestamp);
|
|
const { year, month, day } = timestamp;
|
|
const date = new Date(year, month - 1, day);
|
|
emit('onDateSelected', {
|
|
date,
|
|
isNewMode: !event,
|
|
event: event?.[0] || null
|
|
});
|
|
};
|
|
|
|
const getEventAttrs = (timestamp) => {
|
|
return {
|
|
class: '--event',
|
|
label: timestamp.day,
|
|
};
|
|
};
|
|
|
|
defineExpose({ getEventByTimestamp, handleDateClick });
|
|
</script>
|
|
|
|
<template>
|
|
<QCalendarMonthWrapper
|
|
style="height: 290px; width: 290px"
|
|
transparent-background
|
|
view-customization="workerCalendar"
|
|
>
|
|
<template #header>
|
|
<span class="full-width text-center text-body1 q-py-sm">{{
|
|
calendarHeaderTitle
|
|
}}</span>
|
|
</template>
|
|
<template #calendar>
|
|
<QCalendarMonth
|
|
ref="calendarRef"
|
|
:model-value="_monthDate"
|
|
show-work-weeks
|
|
no-outside-days
|
|
no-active-date
|
|
:weekdays="weekDays"
|
|
short-weekday-label
|
|
:locale="locale"
|
|
:now="today"
|
|
@click-date="handleDateClick($event.scope.timestamp)"
|
|
mini-mode
|
|
>
|
|
<template #day="{ scope: { timestamp } }">
|
|
<slot name="day" :timestamp="timestamp" :getEventAttrs="getEventAttrs">
|
|
<QBtn
|
|
v-if="getEventByTimestamp(timestamp)"
|
|
v-bind="{ ...getEventAttrs(timestamp) }"
|
|
@click="handleDateClick(timestamp)"
|
|
rounded
|
|
dense
|
|
flat
|
|
class="calendar-event"
|
|
:class="{ '--today': isToday(timestamp) }"
|
|
/>
|
|
</slot>
|
|
</template>
|
|
</QCalendarMonth>
|
|
</template>
|
|
</QCalendarMonthWrapper>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.calendar-event {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 13px;
|
|
line-height: 1.715em;
|
|
cursor: pointer;
|
|
color: white;
|
|
|
|
&.--today {
|
|
border: 2px solid $info;
|
|
}
|
|
|
|
&.--event {
|
|
background-color: $positive;
|
|
color: black;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
</style> |