921 lines
35 KiB
Vue
921 lines
35 KiB
Vue
<template>
|
|
<div class="date-picker text-center" :class="calendarViewDirection">
|
|
<fieldset id="date-picker-fieldset" ref="datePickerFieldset">
|
|
<legend class="sr-only">Select a day and time</legend>
|
|
<div
|
|
v-for="month in months"
|
|
:key="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
|
:id="`${month.monthLabel}-${month.yearNum?.toString()}`"
|
|
class="calendar-grid-container position-relative"
|
|
:class="[
|
|
hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
|
|
month.monthClass,
|
|
]">
|
|
<div class="month-year body-small d-flex align-items-center small">
|
|
{{ month.monthLabel }} {{ month.yearNum?.toString() }}
|
|
</div>
|
|
<div
|
|
v-if="calendarViewDirection === 'future'"
|
|
class="legend caption d-flex align-items-center justify-content-end">
|
|
<span class="legend-circle me-1"></span> = Available
|
|
</div>
|
|
<div class="separator-line"></div>
|
|
<div class="nav-back ps-3"><button></button></div>
|
|
<div class="nav-forward pe-3"><button></button></div>
|
|
<div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
|
|
<div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
|
|
<div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
|
|
<div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
|
|
<div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
|
|
<div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
|
|
<div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
|
|
<div
|
|
v-for="date in month.dates"
|
|
:key="date.inputValue"
|
|
:id="date.inputValue"
|
|
class="grid-item radio-wrapper"
|
|
:class="[
|
|
date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
|
|
date.dayClasses,
|
|
date.isSelectable ? 'selectable-day' : '',
|
|
]">
|
|
<input
|
|
:disabled="!date.isSelectable"
|
|
type="radio"
|
|
name="day-of-month"
|
|
v-model="selectedDate"
|
|
@click="fireDateClickedEvent"
|
|
:value="date.inputValue"
|
|
:id="`${month.monthLabel}-${date.dateNum.toString()}`" />
|
|
<label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
|
|
<span>{{ date.dateNum.toString() }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<loader
|
|
:class="[!isLoading ? 'date-picker-hidden' : '']"
|
|
loaderColor="blue"
|
|
loaderPosition="center" />
|
|
</fieldset>
|
|
<button
|
|
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
|
|
type="button"
|
|
class="btn btn-link"
|
|
:disabled="isLoading"
|
|
@click="showAnotherMonth">
|
|
View more dates
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// Supporting files
|
|
import loader from "@/ux-components/loader/loader";
|
|
import store from "@/store";
|
|
import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
|
|
import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
|
|
|
|
export default {
|
|
name: "datePicker",
|
|
data() {
|
|
return {
|
|
isLoading: true,
|
|
months: null,
|
|
disableViewMoreDatesButton: false,
|
|
selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
|
|
hideSomeDaysForInitialView: null,
|
|
};
|
|
},
|
|
props: {
|
|
selectableDatesSetting: {
|
|
type: String,
|
|
validator(value) {
|
|
return Object.values(selectableDaysOptions).includes(value);
|
|
},
|
|
default: selectableDaysOptions.PAST,
|
|
},
|
|
modelValue: {
|
|
type: Object,
|
|
},
|
|
todayOverrideDateString: {
|
|
// keep for use in unit tests to override today's date
|
|
type: String,
|
|
default: null,
|
|
},
|
|
customSelectableDatesCallback: {
|
|
type: Function,
|
|
default() {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
today() {
|
|
if (this.todayOverrideDateString) {
|
|
return new Date(this.todayOverrideDateString);
|
|
}
|
|
return new Date();
|
|
},
|
|
todayMonthIndex() {
|
|
return this.today.getMonth() + 1;
|
|
},
|
|
todayYearNum() {
|
|
return this.today.getFullYear();
|
|
},
|
|
todayDayIndex() {
|
|
return this.today.getDay();
|
|
},
|
|
todayDateNum() {
|
|
return this.today.getDate();
|
|
},
|
|
currentWeekStartDateNum() {
|
|
return this.todayDayIndex >= this.todayDateNum
|
|
? 1
|
|
: this.todayDateNum - this.todayDayIndex;
|
|
},
|
|
currentWeekEndDateNum() {
|
|
return this.todayDateNum + (6 - this.todayDayIndex);
|
|
},
|
|
calendarViewDirection() {
|
|
if (this.selectableDatesSetting === "past") return "past";
|
|
if (this.selectableDatesSetting === "custom") return "future";
|
|
return "none";
|
|
},
|
|
selectedDate: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(newSelectedDate) {
|
|
this.$emit("update:modelValue", newSelectedDate);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
fireDateClickedEvent() {
|
|
this.$emit("date-clicked");
|
|
},
|
|
getWeekStartDate(date) {
|
|
const dayOfWeek = date.getDay();
|
|
// Subtract the day of the week from date to get the date of Sunday
|
|
const sunday = new Date(date);
|
|
sunday.setDate(sunday.getDate() - dayOfWeek);
|
|
return sunday;
|
|
},
|
|
getWeekEndDate(date) {
|
|
const dayOfWeek = date.getDay();
|
|
const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
|
|
// Clone the given date and add the remaining days until Saturday
|
|
const saturday = new Date(date);
|
|
saturday.setDate(date.getDate() + daysUntilSaturday);
|
|
return saturday;
|
|
},
|
|
getNextWeekSunday(date) {
|
|
const dayOfWeek = date.getDay();
|
|
const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
|
|
// Clone the given date and add the remaining days until Sunday
|
|
const nextSunday = new Date(date);
|
|
nextSunday.setDate(date.getDate() + daysUntilNextSunday);
|
|
return nextSunday;
|
|
},
|
|
getInitialViewWeeks(today, initialViewRowsToShow) {
|
|
// TODO: this only is for future direction; need to create logic for past direction
|
|
const weeks = [];
|
|
let weekStartDate = this.getWeekStartDate(today);
|
|
let weekEndDate = this.getWeekEndDate(today);
|
|
for (let i = 0; i < initialViewRowsToShow; i++) {
|
|
if (i > 0) {
|
|
weekStartDate = this.getNextWeekSunday(weekEndDate);
|
|
weekEndDate = this.getWeekEndDate(weekStartDate);
|
|
}
|
|
weeks.push({
|
|
weekNum: i + 1,
|
|
weekStartDate: weekStartDate,
|
|
weekEndDate: weekEndDate,
|
|
});
|
|
}
|
|
|
|
// are any of these weeks split between two months?
|
|
const hasSplitWeek = (week) => {
|
|
return week.weekStartDate.getMonth() !== week.weekEndDate.getMonth() ? true : false;
|
|
};
|
|
const splitWeekIndex = weeks.findIndex(hasSplitWeek);
|
|
|
|
if (splitWeekIndex > -1) {
|
|
const week1 = [];
|
|
const week2 = [];
|
|
let switchToWeek2 = false;
|
|
|
|
for (let j = 0; j < 7; j++) {
|
|
const newDate = new Date(weeks[splitWeekIndex].weekStartDate);
|
|
newDate.setDate(newDate.getDate() + j);
|
|
if (newDate.getDate() === 1) switchToWeek2 = true;
|
|
if (switchToWeek2) {
|
|
week2.push(newDate);
|
|
} else {
|
|
week1.push(newDate);
|
|
}
|
|
}
|
|
|
|
const week1EndDate = week1[week1.length - 1];
|
|
const week2StartDate = week2[0];
|
|
|
|
if (week1EndDate < today) {
|
|
// replace week 1 with week 2
|
|
weeks[splitWeekIndex].weekStartDate = week2StartDate;
|
|
} else {
|
|
const newWeek = {
|
|
weekNum: weeks[splitWeekIndex].weekNum,
|
|
weekStartDate: week2StartDate,
|
|
weekEndDate: weeks[splitWeekIndex].weekEndDate,
|
|
};
|
|
weeks[splitWeekIndex].weekEndDate = week1EndDate;
|
|
weeks.splice(splitWeekIndex + 1, 0, newWeek);
|
|
weeks.pop();
|
|
weeks.forEach((item, index) => {
|
|
if (index > splitWeekIndex) {
|
|
item.weekNum = item.weekNum + 1;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
return weeks;
|
|
},
|
|
async loadInitialData(config) {
|
|
let todayDate;
|
|
if (this.today) {
|
|
todayDate = this.today;
|
|
} else if (config.todayOverrideDateString) {
|
|
todayDate = new Date(config.todayOverrideDateString);
|
|
} else {
|
|
todayDate = new Date();
|
|
}
|
|
|
|
const todayMonthIndex = todayDate.getMonth() + 1;
|
|
const todayYearNum = todayDate.getFullYear();
|
|
// TODO - set up currentMonthStart if direction is PAST:
|
|
// let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
|
|
const currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0);
|
|
|
|
let calendarViewDirection = "none";
|
|
if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
|
|
if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
|
|
|
|
const initialViewWeeks = this.getInitialViewWeeks(
|
|
todayDate,
|
|
config.initialViewRowsToShow
|
|
);
|
|
|
|
const initialViewStartDate = todayDate;
|
|
const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
|
|
const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.getMonth();
|
|
const lastSundayMonth =
|
|
initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth();
|
|
|
|
let hideSomeDaysForInitialView = false;
|
|
let hideSecondMonth = false;
|
|
|
|
// TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE BELOW vvvvv
|
|
if (calendarViewDirection === "future") {
|
|
if (firstSaturdayMonth !== lastSundayMonth) {
|
|
hideSomeDaysForInitialView = true;
|
|
}
|
|
if (initialViewStartDate.getMonth() === lastSundayMonth) {
|
|
hideSecondMonth = true;
|
|
if (currentMonthEnd > initialViewEndDate) {
|
|
// should part of 1st month be hidden?
|
|
hideSomeDaysForInitialView = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
const myPromise = new Promise((resolve, reject) => {
|
|
const response = config.customSelectableDatesCallback(
|
|
initialViewStartDate.toISOString().split("T")[0],
|
|
initialViewEndDate.toISOString().split("T")[0],
|
|
store.getters.order.serviceLocation.appointmentType,
|
|
store.getters.order.serviceLocation.provider.providerNumber
|
|
);
|
|
resolve(response);
|
|
});
|
|
|
|
return myPromise.then((response) => {
|
|
const initialData = {
|
|
todayDate: todayDate,
|
|
initialViewStartDate: initialViewStartDate,
|
|
initialViewEndDate: initialViewEndDate,
|
|
calendarViewDirection: calendarViewDirection,
|
|
initialShopTimeSlotsResponse: response,
|
|
hideSomeDaysForInitialView: hideSomeDaysForInitialView,
|
|
hideSecondMonth: hideSecondMonth,
|
|
};
|
|
return initialData;
|
|
});
|
|
},
|
|
initializeComponent(initialData) {
|
|
this.setCalendarData(initialData);
|
|
},
|
|
scrollToElement(elementId, speed, easing) {
|
|
// TODO - needs to be cleaned up & refactored
|
|
function scrollTopSmooth(wrapper, target, duration = 300, timingName = "linear") {
|
|
const initY = wrapper.scrollTop;
|
|
const wrapperRect = wrapper.getBoundingClientRect();
|
|
const targetRect = target.getBoundingClientRect();
|
|
const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
|
|
const timingFunc = TIMINGFUNC_MAP[timingName];
|
|
|
|
let start = null;
|
|
|
|
const step = (timestamp) => {
|
|
start = start || timestamp;
|
|
const progress = timestamp - start,
|
|
// Growing from 0 to 1
|
|
time = Math.min(1, (timestamp - start) / duration);
|
|
|
|
const percentageNew = timingFunc(time);
|
|
const distanceToGo = targetY;
|
|
const thisDistance = percentageNew * distanceToGo;
|
|
|
|
wrapper.scrollTo(0, initY + thisDistance);
|
|
|
|
if (percentageNew < 1) {
|
|
window.requestAnimationFrame(step);
|
|
}
|
|
};
|
|
|
|
window.requestAnimationFrame(step);
|
|
}
|
|
|
|
const wrapper = this.$refs.datePickerFieldset;
|
|
const targetMonth = document.getElementById(elementId);
|
|
|
|
scrollTopSmooth(wrapper, targetMonth, 800, "ease-in-out");
|
|
},
|
|
|
|
async setCalendarData(config = {}) {
|
|
this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
|
|
const hideSecondMonth = config.hideSecondMonth;
|
|
const direction = config.calendarViewDirection;
|
|
const monthsAfterToLoadOffset = 12;
|
|
const monthsBeforeToLoadOffset = 36;
|
|
config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
|
|
this.selectableDatesData.push(selectableDate);
|
|
});
|
|
|
|
// GENERATE MONTHS AND PUSH THEM INTO ARRAY
|
|
const months = [];
|
|
const options = {
|
|
calendarViewDirection: direction,
|
|
monthsBeforeToLoadOffset: monthsBeforeToLoadOffset,
|
|
monthsAfterToLoadOffset: monthsAfterToLoadOffset,
|
|
initialViewStartDate: config.initialViewStartDate,
|
|
initialViewEndDate: config.initialViewEndDate,
|
|
hideSecondMonth: hideSecondMonth,
|
|
};
|
|
if (direction === "future") {
|
|
// first 0, then 1
|
|
for (let i = 0; i <= monthsAfterToLoadOffset; i++) {
|
|
months.push(await this.getMonthData(i, options));
|
|
}
|
|
} else if (direction === "past") {
|
|
// first 0, then -1
|
|
for (let i = 0; i >= 0 - monthsBeforeToLoadOffset; i--) {
|
|
months.unshift(this.getMonthData(i, options));
|
|
}
|
|
} else {
|
|
// TODO - IF A CALENDAR WITH BOTH PAST AND FUTURE WAS EVER NEEDED
|
|
// for (let i = monthsAfterToLoadOffset; i >= monthsBeforeToLoadOffset; i--) {
|
|
// months.push(this.getMonthDataPAST(i));
|
|
// }
|
|
}
|
|
this.months = months;
|
|
this.isLoading = false;
|
|
},
|
|
|
|
async getMonthData(offset = requiredParameter(), options) {
|
|
/* options will contain:
|
|
calendarViewDirection (string)
|
|
initialViewStartDateNum (number)
|
|
initialViewEndDateNum (number)
|
|
monthsBeforeToLoadOffset (number),
|
|
monthsAfterToLoadOffset (number),
|
|
hideSecondMonth (boolean),
|
|
|
|
data used:
|
|
todayDate (date object)
|
|
this.hideSomeDaysForInitialView (string)
|
|
*/
|
|
|
|
let monthIndex = this.todayMonthIndex + offset; // mutable
|
|
let yearNum = this.todayYearNum; // mutable
|
|
const calendarViewDirection = options.calendarViewDirection;
|
|
const initialViewStartDate = options.initialViewStartDate;
|
|
const initialViewEndDate = options.initialViewEndDate;
|
|
const hideSecondMonth = options.hideSecondMonth; // <<<<<<<<<<<<<
|
|
const dates = [];
|
|
let monthClass = "";
|
|
let isMonthThatHidesSomeDaysForInitialView;
|
|
|
|
if (calendarViewDirection === "future" && offset > 0) {
|
|
while (monthIndex > 12) {
|
|
monthIndex = monthIndex - 12;
|
|
yearNum++;
|
|
}
|
|
} else if (calendarViewDirection === "past" && offset < 0) {
|
|
while (monthIndex < 1) {
|
|
monthIndex = 12 + monthIndex;
|
|
yearNum--;
|
|
}
|
|
}
|
|
|
|
const monthEndDate = new Date(yearNum, monthIndex, 0);
|
|
let monthEndDateNum = monthEndDate.getDate();
|
|
|
|
if (
|
|
offset === 0 &&
|
|
calendarViewDirection === "past" &&
|
|
monthEndDateNum > this.currentWeekEndDateNum
|
|
) {
|
|
monthEndDateNum = this.currentWeekEndDateNum;
|
|
}
|
|
|
|
const monthStartDateNum =
|
|
offset === 0 && calendarViewDirection === "future"
|
|
? this.currentWeekStartDateNum
|
|
: 1;
|
|
const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum);
|
|
|
|
const startDateDayIndex = monthStartDate.getDay();
|
|
const endDateDayIndex = monthEndDate.getDay();
|
|
|
|
if (Math.abs(offset) === 1 && hideSecondMonth) {
|
|
monthClass = monthClass + " month-hidden";
|
|
} else if (Math.abs(offset) > 1) {
|
|
monthClass = monthClass + " month-hidden";
|
|
}
|
|
if (
|
|
Math.abs(offset) === options.monthsAfterToLoadOffset &&
|
|
calendarViewDirection === "future"
|
|
) {
|
|
monthClass = monthClass + " last-available-month";
|
|
}
|
|
if (
|
|
Math.abs(offset) === options.monthsBeforeToLoadOffset &&
|
|
calendarViewDirection === "past"
|
|
) {
|
|
// TODO - re-check this logic if past direction
|
|
monthClass = monthClass + " last-available-month";
|
|
}
|
|
|
|
// populate dates array
|
|
for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
|
|
let dayClasses = "";
|
|
const dateString =
|
|
yearNum.toString() +
|
|
"-" +
|
|
forceTwoDigitString(monthIndex) +
|
|
"-" +
|
|
forceTwoDigitString(i);
|
|
|
|
if (offset === 0 && i === this.todayDateNum) {
|
|
dayClasses += "current-day";
|
|
}
|
|
if (offset === 0 && i < this.todayDateNum && calendarViewDirection === "future") {
|
|
dayClasses += "unavailable-day";
|
|
}
|
|
if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
|
|
dayClasses += "unavailable-day";
|
|
}
|
|
if (
|
|
this.hideSomeDaysForInitialView &&
|
|
initialViewEndDate.getMonth() + 1 === monthIndex &&
|
|
initialViewEndDate.getDate() < i
|
|
) {
|
|
dayClasses += "day-hidden";
|
|
isMonthThatHidesSomeDaysForInitialView = true;
|
|
}
|
|
const dateObject = {
|
|
dateNum: i,
|
|
dayClasses: dayClasses,
|
|
inputValue: dateString,
|
|
isSelectable:
|
|
this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
|
|
? true
|
|
: false,
|
|
};
|
|
dates.push(dateObject);
|
|
}
|
|
|
|
const monthToAdd = {
|
|
monthLabel: MONTHS_OF_YEAR[monthIndex - 1],
|
|
monthIndex: monthIndex,
|
|
monthString: MONTHS_OF_YEAR[monthIndex - 1] + "-" + yearNum?.toString(),
|
|
yearNum: yearNum,
|
|
dates: dates,
|
|
startDateDayIndex: startDateDayIndex,
|
|
monthClass: monthClass,
|
|
isMonthThatHidesSomeDaysForInitialView: isMonthThatHidesSomeDaysForInitialView,
|
|
};
|
|
return monthToAdd;
|
|
},
|
|
async showAnotherMonth() {
|
|
this.isLoading = true;
|
|
let monthToShow;
|
|
let monthStartDateNum = 0;
|
|
|
|
if (this.hideSomeDaysForInitialView) {
|
|
monthToShow = this.months.find(
|
|
({ isMonthThatHidesSomeDaysForInitialView }) =>
|
|
isMonthThatHidesSomeDaysForInitialView
|
|
);
|
|
// find the first day-hidden to become the next api call start date
|
|
monthStartDateNum =
|
|
monthToShow.dates.find(({ dayClasses }) => dayClasses.includes("day-hidden"))
|
|
.dateNum - 1; // TRY 2
|
|
} else {
|
|
if (this.calendarViewDirection === "future") {
|
|
monthToShow = this.months.find((month) =>
|
|
month.monthClass.includes("month-hidden")
|
|
);
|
|
}
|
|
if (this.calendarViewDirection === "past") {
|
|
// TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
|
|
monthToShow = this.months.find((month) =>
|
|
month.monthClass.includes("month-hidden")
|
|
);
|
|
}
|
|
}
|
|
if (monthToShow) {
|
|
// make new API call with this month's start and end dates
|
|
await this.updateSelectableDates(
|
|
monthToShow.dates[monthStartDateNum].inputValue,
|
|
monthToShow.dates[monthToShow.dates.length - 1].inputValue
|
|
);
|
|
this.isLoading = false;
|
|
this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
|
|
monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
|
|
this.scrollToElement(monthToShow.monthString);
|
|
|
|
if (monthToShow.monthClass.includes("last-available-month"))
|
|
this.disableViewMoreDatesButton = true;
|
|
}
|
|
},
|
|
async updateSelectableDates(monthStart, monthEnd) {
|
|
const moreSelectableDates = await this.customSelectableDatesCallback(
|
|
monthStart,
|
|
monthEnd,
|
|
this.$store.getters.order.serviceLocation.appointmentType,
|
|
this.$store.getters.order.serviceLocation.provider.providerNumber
|
|
);
|
|
moreSelectableDates.days.forEach((selectableDate) => {
|
|
const index = this.selectableDatesData.findIndex(
|
|
(dateObj) => dateObj.date === selectableDate.date
|
|
);
|
|
if (index === -1) this.selectableDatesData.push(selectableDate.date);
|
|
this.months.forEach((month) => {
|
|
// TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
|
|
month.dates.forEach((date) => {
|
|
if (date.inputValue === selectableDate.date) {
|
|
date["isSelectable"] = true;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
},
|
|
},
|
|
components: {
|
|
loader,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.date-picker-hidden {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
}
|
|
.date-picker {
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
fieldset {
|
|
overflow-y: auto;
|
|
height: 88%;
|
|
position: relative;
|
|
}
|
|
.loader {
|
|
position: absolute;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
|
|
&::after {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.calendar-grid-container {
|
|
margin: 0 auto 2rem auto;
|
|
max-width: 414px;
|
|
transition: height ease 2s, opacity ease 2s;
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 0.75rem;
|
|
opacity: 1;
|
|
|
|
.grid-item {
|
|
text-align: center;
|
|
margin: 10px 3px;
|
|
|
|
&.first-day-,
|
|
&.first-day-0 {
|
|
grid-column-start: 1;
|
|
}
|
|
&.first-day-1 {
|
|
grid-column-start: 2;
|
|
}
|
|
&.first-day-2 {
|
|
grid-column-start: 3;
|
|
}
|
|
&.first-day-3 {
|
|
grid-column-start: 4;
|
|
}
|
|
&.first-day-4 {
|
|
grid-column-start: 5;
|
|
}
|
|
&.first-day-5 {
|
|
grid-column-start: 6;
|
|
}
|
|
&.first-day-6 {
|
|
grid-column-start: 7;
|
|
}
|
|
}
|
|
|
|
.separator-line {
|
|
grid-area: 2/1/2/8;
|
|
border-top: 1px solid $gray-500;
|
|
margin: 0.75rem 0;
|
|
}
|
|
|
|
.month-year {
|
|
grid-area: 1 / 1 / 2 / 5;
|
|
text-transform: uppercase;
|
|
font-weight: 300;
|
|
letter-spacing: 0.75px;
|
|
}
|
|
.legend {
|
|
grid-area: 1 / 5 / 2 / 8;
|
|
.legend-circle {
|
|
border-radius: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-color: $blue-100;
|
|
border: 1px solid $blue;
|
|
}
|
|
}
|
|
.nav-back,
|
|
.nav-forward {
|
|
display: none;
|
|
}
|
|
|
|
.radio-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
outline: none;
|
|
height: 1.35rem;
|
|
opacity: 1;
|
|
transition: height ease 250ms, opacity ease 250ms;
|
|
|
|
input[type="radio"] {
|
|
position: absolute; //override bootstrap
|
|
height: 0;
|
|
opacity: 0;
|
|
|
|
&:focus-visible + label {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
}
|
|
|
|
&:focus + label,
|
|
&:checked:focus + label {
|
|
box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
|
|
background-color: $blue;
|
|
color: $white;
|
|
&.past-day {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
color: $gray-500;
|
|
font-weight: normal;
|
|
}
|
|
&.current-day {
|
|
&:after {
|
|
background-color: $white;
|
|
}
|
|
.first-day {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:checked + label {
|
|
color: $white;
|
|
background: $blue;
|
|
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue;
|
|
&:after {
|
|
background-color: $white;
|
|
}
|
|
.first-day {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.first-day {
|
|
position: absolute;
|
|
font-size: 9px;
|
|
font-weight: 500;
|
|
color: $gray-600;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
label {
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
min-width: 36px;
|
|
border-radius: 50%;
|
|
|
|
span {
|
|
&.small {
|
|
font-size: 0.75rem;
|
|
color: $gray-550;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:checked {
|
|
@include media-breakpoint-up(sm) {
|
|
box-shadow: 0 0 0 4px transparent;
|
|
background-color: $blue;
|
|
color: $white;
|
|
&:after {
|
|
background-color: $white;
|
|
}
|
|
}
|
|
cursor: pointer;
|
|
&.current-day {
|
|
+ .first-day {
|
|
color: $white;
|
|
}
|
|
}
|
|
.first-day {
|
|
color: $white;
|
|
}
|
|
}
|
|
+ p {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.selectable-day {
|
|
label {
|
|
color: $blue;
|
|
background-color: $blue-100;
|
|
border: 1px solid $blue;
|
|
}
|
|
}
|
|
&.past-day,
|
|
&.future-day,
|
|
&.unavailable-day {
|
|
label {
|
|
color: $gray-500;
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
&.current-day {
|
|
label {
|
|
&:after {
|
|
content: "";
|
|
width: 0.25rem;
|
|
height: 0.25rem;
|
|
border-radius: 50%;
|
|
background-color: $blue;
|
|
position: absolute;
|
|
top: 28px;
|
|
}
|
|
.first-day {
|
|
color: $blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.partial-month-initial-view {
|
|
.day-hidden {
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
margin: 0;
|
|
max-height: 0;
|
|
}
|
|
}
|
|
&.month-hidden {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
&.last-available-month:not(&.month-hidden) {
|
|
margin-bottom: 14rem;
|
|
}
|
|
}
|
|
#bottom-spacer {
|
|
height: 20rem;
|
|
background: lightblue;
|
|
}
|
|
|
|
.btn-link {
|
|
font-weight: 500;
|
|
text-underline-offset: 4px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.past {
|
|
.calendar-grid-container {
|
|
.month-year {
|
|
grid-area: 1 / 1 / 2 / 6;
|
|
}
|
|
.nav-forward {
|
|
grid-area: 1 / 7 / 2 / 8;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
button {
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 7px;
|
|
height: 12px;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
|
}
|
|
}
|
|
}
|
|
.nav-back {
|
|
grid-area: 1 / 6 / 2 / 7;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
button {
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 7px;
|
|
height: 12px;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
|
}
|
|
}
|
|
}
|
|
.nav-back,
|
|
.nav-forward {
|
|
button {
|
|
position: relative;
|
|
border-radius: 50%;
|
|
width: 28px;
|
|
height: 28px;
|
|
background-color: $blue-100;
|
|
border: 1px solid $blue;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
&:focus,
|
|
&:focus-visible {
|
|
border: 2.5px solid $blue;
|
|
box-shadow: none;
|
|
background-color: $blue-100;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btn-link {
|
|
display: block;
|
|
position: relative;
|
|
height: 2rem;
|
|
width: 100%;
|
|
justify-content: center;
|
|
background: transparent;
|
|
border: none;
|
|
font-weight: 500;
|
|
text-underline-offset: 4px;
|
|
z-index: 2;
|
|
}
|
|
</style>
|