k4rli/stretch-my-time-off
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add icons around days off

Browse Source
This commit is contained in:
Zachary
2024-11-11 19:50:28 +01:00
parent 6f08e1f42e
commit b15cd053b3
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/CalendarMonth.svelte
View File

@@ -49,6 +49,15 @@
return startDays > endDays ? startMonth : endMonth; return startDays > endDays ? startMonth : endMonth;
} }
function isConsecutiveDayOff(day) {
return consecutiveDaysOff.some(period => {
const start = period.startDate;
const end = period.endDate;
const date = new Date(year, month, day);
return date >= start && date <= end;
});
}
</script> </script>
<div class="calendar"> <div class="calendar">
@@ -57,7 +66,7 @@
<div class="day"></div> <div class="day"></div>
{/each} {/each}
{#each Array.from({ length: daysInMonth }, (_, i) => i + 1) as day} {#each Array.from({ length: daysInMonth }, (_, i) => i + 1) as day}
<div class="day {(firstDay + day - 1) % 7 === 0 || (firstDay + day - 1) % 7 === 6 ? 'weekend' : ''} {getHoliday(day) ? 'holiday' : ''} {isOptimizedDayOff(day) ? 'optimized' : ''}"> <div class="day {(firstDay + day - 1) % 7 === 0 || (firstDay + day - 1) % 7 === 6 ? 'weekend' : ''} {getHoliday(day) ? 'holiday' : ''} {isOptimizedDayOff(day) ? 'optimized' : ''} {isConsecutiveDayOff(day) ? 'consecutive-day' : ''}">
{day} {day}
{#if getHoliday(day)} {#if getHoliday(day)}
<Tooltip text={getHoliday(day).name} /> <Tooltip text={getHoliday(day).name} />
@@ -114,6 +123,9 @@
background-color: #3b1e6e; background-color: #3b1e6e;
cursor: pointer; cursor: pointer;
} }
.consecutive-day {
border: 1px solid rgba(255, 255, 255, 0.7);
}
.month-name { .month-name {
grid-column: span 7; grid-column: span 7;
text-align: center; text-align: center;