74 lines
2.3 KiB
JavaScript
74 lines
2.3 KiB
JavaScript
import { html, ifDefined } from '@lion/core';
|
|
|
|
const defaultMonthLabels = [
|
|
'January',
|
|
'February',
|
|
'March',
|
|
'April',
|
|
'May',
|
|
'June',
|
|
'July',
|
|
'August',
|
|
'September',
|
|
'October',
|
|
'November',
|
|
'December',
|
|
];
|
|
const firstWeekDays = [1, 2, 3, 4, 5, 6, 7];
|
|
const lastDaysOfYear = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
|
|
|
export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels } = {}) {
|
|
const dayNumber = day.date.getDate();
|
|
const monthName = monthsLabels[day.date.getMonth()];
|
|
const year = day.date.getFullYear();
|
|
const weekdayName = weekdays[day.weekOrder];
|
|
|
|
const firstDay = dayNumber === 1;
|
|
const endOfFirstWeek = day.weekOrder === 6 && firstWeekDays.includes(dayNumber);
|
|
const startOfFirstFullWeek = day.startOfWeek && firstWeekDays.includes(dayNumber);
|
|
|
|
if (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0)) {
|
|
lastDaysOfYear[1] = 29;
|
|
}
|
|
const lastDayNumber = lastDaysOfYear[day.date.getMonth()];
|
|
const lastWeekDays = [];
|
|
for (let i = lastDayNumber; i >= lastDayNumber - 7; i -= 1) {
|
|
lastWeekDays.push(i);
|
|
}
|
|
const endOfLastFullWeek = day.weekOrder === 6 && lastWeekDays.includes(dayNumber);
|
|
const startOfLastWeek = day.startOfWeek && lastWeekDays.includes(dayNumber);
|
|
const lastDay = lastDayNumber === dayNumber;
|
|
|
|
return html`
|
|
<td
|
|
role="gridcell"
|
|
class="calendar__day-cell"
|
|
?current-month=${day.currentMonth}
|
|
?first-day=${firstDay}
|
|
?end-of-first-week=${endOfFirstWeek}
|
|
?start-of-first-full-week=${startOfFirstFullWeek}
|
|
?end-of-last-full-week=${endOfLastFullWeek}
|
|
?start-of-last-week=${startOfLastWeek}
|
|
?last-day=${lastDay}
|
|
>
|
|
<button
|
|
.date=${day.date}
|
|
class="calendar__day-button"
|
|
tabindex=${day.tabindex}
|
|
aria-label=${`${dayNumber} ${monthName} ${year} ${weekdayName}`}
|
|
aria-pressed=${day.ariaPressed}
|
|
aria-current=${ifDefined(day.ariaCurrent)}
|
|
?disabled=${day.disabled}
|
|
?selected=${day.selected}
|
|
?past=${day.past}
|
|
?today=${day.today}
|
|
?future=${day.future}
|
|
?previous-month=${day.previousMonth}
|
|
?current-month=${day.currentMonth}
|
|
?next-month=${day.nextMonth}
|
|
>
|
|
<span class="calendar__day-button__text"> ${day.date.getDate()} </span>
|
|
</button>
|
|
</td>
|
|
`;
|
|
}
|