WIP Доделала календарь
This commit is contained in:
Daria Golova
@@ -23,12 +23,12 @@
|
||||
)
|
||||
.week.py-4.px-5.grid.grid-rows-1.grid-cols-7
|
||||
.flex.items-center.justify-center.week-item.text-xsx.py-1(v-for="day of week", :key="day") {{ day }}
|
||||
.body.pb-5.px-5
|
||||
.body.pb-7.px-5
|
||||
.flex.items-center.justify-center.cursor-pointer.w-full.h-full(
|
||||
v-for="date of internalDatesList",
|
||||
@click="selectDate(date)",
|
||||
:key="date",
|
||||
:style="calculateRangeStyle(date)"
|
||||
:style="calculateRangeStyle(date)",
|
||||
)
|
||||
.flex.items-center.justify-center.rounded-full.w-full.h-full(
|
||||
:class="calculateCellClasses(date)",
|
||||
@@ -92,10 +92,6 @@ export default {
|
||||
this.internalDate = this.internalDate.clone().add(1, "month");
|
||||
},
|
||||
calculateCellClasses(date) {
|
||||
if (date.isSame(this.today, "day"))
|
||||
return {
|
||||
"date-today": true,
|
||||
};
|
||||
if (this.defineDateRange(date))
|
||||
return {
|
||||
"date-active": true,
|
||||
@@ -106,6 +102,11 @@ export default {
|
||||
)
|
||||
return {
|
||||
"text-white": true,
|
||||
"date-range": true,
|
||||
};
|
||||
if (date.isSame(this.today, "day"))
|
||||
return {
|
||||
"date-today": true,
|
||||
};
|
||||
if (date.isSame(this.internalDate, "month"))
|
||||
return {
|
||||
@@ -116,7 +117,12 @@ export default {
|
||||
};
|
||||
},
|
||||
calculateRangeStyle(date) {
|
||||
if (this.range && this.value?.from && this.value?.to) {
|
||||
if (
|
||||
this.range &&
|
||||
this.value?.from &&
|
||||
this.value?.to &&
|
||||
!this.value?.from.isSame(this.value?.to?.format("YYYY-MM-DD"))
|
||||
) {
|
||||
if (date.isSame(this.value?.from?.format("YYYY-MM-DD")))
|
||||
return {
|
||||
"border-top-left-radius": "9999px",
|
||||
@@ -167,21 +173,7 @@ export default {
|
||||
date.isSame(this.value?.to?.format("YYYY-MM-DD"))
|
||||
);
|
||||
},
|
||||
calculateRange(start, end, count) {
|
||||
let internalCount = count ? count : end.diff(start, "days");
|
||||
return [...Array(internalCount - 2)].map(() =>
|
||||
start.add(1, "day").clone()
|
||||
);
|
||||
},
|
||||
},
|
||||
// watch: {
|
||||
// modelValue: {
|
||||
// deep: true,
|
||||
// handler(value) {
|
||||
// console.log(value);
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
mounted() {
|
||||
if (this.value) {
|
||||
if (this.range) {
|
||||
@@ -210,8 +202,10 @@ export default {
|
||||
color: var(--font-grey-color)
|
||||
.date-month
|
||||
color: var(--font-black-color)
|
||||
.date-other:hover, .date-month:hover, .date-today:hover
|
||||
.date-other:hover, .date-month:hover
|
||||
background-color: var(--border-light-grey-color)
|
||||
.date-today:hover, .date-range:hover
|
||||
background-color: var(--btn-blue-color-2)
|
||||
.date-today
|
||||
border: 1px dashed var(--btn-blue-color)
|
||||
color: var(--btn-blue-color)
|
||||
|
||||
@@ -17,7 +17,8 @@
|
||||
dense,
|
||||
icon="arrow_back_ios_new",
|
||||
text-color="primary",
|
||||
padding="2px 11px 2px 8px"
|
||||
padding="2px 11px 2px 8px",
|
||||
@click="previousWeek"
|
||||
)
|
||||
base-input(
|
||||
outlined,
|
||||
@@ -25,40 +26,30 @@
|
||||
fontSize="16px",
|
||||
lineHeight="19px",
|
||||
iconRight,
|
||||
id="calendarIcon"
|
||||
v-model="currentWeek",
|
||||
readonly
|
||||
)
|
||||
q-icon.text(name="app:calendar", size="20px", ref="calendarIcon", @click="changeCalendarVisibility(false)")
|
||||
//q-popup-proxy(
|
||||
cover,
|
||||
transition-show="scale",
|
||||
transition-hide="scale"
|
||||
anchor="bottom middle", self="top middle"
|
||||
//)
|
||||
//q-date(v-model="date", minimal, range)
|
||||
.flex.items-center.justify-end
|
||||
q-btn(
|
||||
v-close-popup,
|
||||
label="Закрыть",
|
||||
color="primary",
|
||||
flat
|
||||
)
|
||||
q-menu(
|
||||
:style="{'margin-top': '4px !important'}"
|
||||
target="#calendarIcon"
|
||||
v-model="calendarVisibility",
|
||||
transition-show="scale",
|
||||
transition-hide="scale"
|
||||
anchor="bottom middle",
|
||||
self="top middle"
|
||||
)
|
||||
base-calendar(v-model="date", range)
|
||||
.h-5.w-5.flex.items-center.justify-center
|
||||
q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
|
||||
:size="calendarVisibility ? '10px' : '16px'"
|
||||
)
|
||||
q-menu(
|
||||
:style="{'margin-top': '4px !important'}"
|
||||
v-model="calendarVisibility",
|
||||
transition-show="scale",
|
||||
transition-hide="scale"
|
||||
self="top middle",
|
||||
:offset="[118, 14]"
|
||||
)
|
||||
base-calendar(v-model="date", range, :range-count="7")
|
||||
q-btn(
|
||||
color="secondary",
|
||||
icon="arrow_forward_ios",
|
||||
round,
|
||||
size="14px",
|
||||
text-color="primary",
|
||||
dense
|
||||
dense,
|
||||
@click="nextWeek"
|
||||
)
|
||||
.h-10.p-1.flex.items-center.justify-between.bg-secondary.rounded.text-grey-color.ml-52
|
||||
q-btn-toggle(
|
||||
@@ -91,18 +82,29 @@ export default {
|
||||
},
|
||||
],
|
||||
date: {
|
||||
from: moment().clone().add(1, "month"),
|
||||
to: moment().clone().add(2, "month"),
|
||||
from: moment(),
|
||||
to: moment().clone().add(6, "day"),
|
||||
},
|
||||
calendarVisibility: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeCalendarVisibility(value) {
|
||||
this.calendarVisibility = value;
|
||||
computed: {
|
||||
currentWeek() {
|
||||
return `${this.date?.from?.format(
|
||||
"D MMMM YYYY"
|
||||
)} - ${this.date?.to?.format("D MMMM YYYY")}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
previousWeek() {
|
||||
this.date.from = this.date.from.clone().subtract(1, "week");
|
||||
this.date.to = this.date.to.clone().subtract(1, "week");
|
||||
},
|
||||
nextWeek() {
|
||||
this.date.from = this.date.from.clone().add(1, "week");
|
||||
this.date.to = this.date.to.clone().add(1, "week");
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -134,3 +136,7 @@ export default {
|
||||
.q-btn-group :deep(.q-btn-item)
|
||||
border-radius: 4px !important
|
||||
</style>
|
||||
<style lang="sass">
|
||||
.q-field--outlined.q-field--readonly .q-field__control:before
|
||||
border-style: solid !important
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user