breadone/Memento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format :3

Browse Source
This commit is contained in:
June
2026-02-03 17:07:12 +13:00
parent db291a0a83
commit ff228befc0
1 changed files with 198 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/lib/components/calendar.svelte
View File

@@ -7,10 +7,10 @@
} }
let { let {
year = $bindable('2026'), year = $bindable("2026"),
month = $bindable('0'), month = $bindable("0"),
entries entries,
} = $props() } = $props();
var headers = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; var headers = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
let days = $state([]); let days = $state([]);
@@ -19,11 +19,15 @@
let currentMonth = $state(parseInt(month)); let currentMonth = $state(parseInt(month));
// Helper function to find entry for a specific day // Helper function to find entry for a specific day
function getEntryForDay(year: number, month: number, date: number): Entry | undefined { function getEntryForDay(
year: number,
month: number,
date: number,
): Entry | undefined {
if (!entries) return undefined; if (!entries) return undefined;
const dateStr = new Date(year, month, date).toISOString().split('T')[0]; const dateStr = new Date(year, month, date).toISOString().split("T")[0];
return entries.find(entry => { return entries.find((entry) => {
const entryDate = entry.date.split('T')[0]; const entryDate = entry.date.split("T")[0];
return entryDate === dateStr; return entryDate === dateStr;
}); });
} }
@@ -41,7 +45,11 @@
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
const day = new Date(monday); const day = new Date(monday);
day.setDate(monday.getDate() + i); day.setDate(monday.getDate() + i);
const entry = getEntryForDay(day.getFullYear(), day.getMonth(), day.getDate()); const entry = getEntryForDay(
day.getFullYear(),
day.getMonth(),
day.getDate(),
);
week.push({ week.push({
date: day.getDate(), date: day.getDate(),
month: day.getMonth(), month: day.getMonth(),
@@ -49,7 +57,7 @@
dayName: headers[i], dayName: headers[i],
isCurrentMonth: day.getMonth() === today.getMonth(), isCurrentMonth: day.getMonth() === today.getMonth(),
isToday: day.toDateString() === today.toDateString(), isToday: day.toDateString() === today.toDateString(),
entry entry,
}); });
} }
return week; return week;
@@ -82,14 +90,15 @@
dayName: headers[dayIndex], dayName: headers[dayIndex],
isCurrentMonth: false, isCurrentMonth: false,
isToday: false, isToday: false,
entry entry,
}); });
} }
// Current month days // Current month days
const today = new Date(); const today = new Date();
for (let i = 1; i <= daysInMonth; i++) { for (let i = 1; i <= daysInMonth; i++) {
const isToday = today.getDate() === i && const isToday =
today.getDate() === i &&
today.getMonth() === month && today.getMonth() === month &&
today.getFullYear() === year; today.getFullYear() === year;
const dayIndex = days.length % 7; const dayIndex = days.length % 7;
@@ -101,7 +110,7 @@
dayName: headers[dayIndex], dayName: headers[dayIndex],
isCurrentMonth: true, isCurrentMonth: true,
isToday, isToday,
entry entry,
}); });
} }
@@ -119,7 +128,7 @@
dayName: headers[dayIndex], dayName: headers[dayIndex],
isCurrentMonth: false, isCurrentMonth: false,
isToday: false, isToday: false,
entry entry,
}); });
} }
@@ -165,19 +174,36 @@
} }
} }
const monthNames = ["January", "February", "March", "April", "May", "June", const monthNames = [
"July", "August", "September", "October", "November", "December"]; "January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
</script> </script>
<div class="calendar-container"> <div class="calendar-container">
<div class="calendar-header"> <div class="calendar-header">
<button class="expand-btn" onclick={toggleExpanded} title={expanded ? "Show week view" : "Show month view"}> <button
{expanded ? '−' : '+'} class="expand-btn"
onclick={toggleExpanded}
title={expanded ? "Show week view" : "Show month view"}
>
{expanded ? "−" : "+"}
</button> </button>
{#if expanded} {#if expanded}
<button class="nav-btn" onclick={previousMonth}>‹</button> <button class="nav-btn" onclick={previousMonth}>‹</button>
<span class="month-year">{monthNames[currentMonth]} {currentYear}</span> <span class="month-year"
>{monthNames[currentMonth]} {currentYear}</span
>
<button class="nav-btn" onclick={nextMonth}>›</button> <button class="nav-btn" onclick={nextMonth}>›</button>
{:else} {:else}
<span class="month-year">Current Week</span> <span class="month-year">Current Week</span>
@@ -191,7 +217,9 @@
class:other-month={!day.isCurrentMonth} class:other-month={!day.isCurrentMonth}
class:today={day.isToday} class:today={day.isToday}
class:has-image={day.entry?.image} class:has-image={day.entry?.image}
style={day.entry?.image ? `background-image: url(${day.entry.image}); background-size: cover; background-position: center;` : ''} style={day.entry?.image
? `background-image: url(${day.entry.image}); background-size: cover; background-position: center;`
: ""}
> >
{#if day.entry?.image} {#if day.entry?.image}
<div class="image-overlay"></div> <div class="image-overlay"></div>
@@ -210,27 +238,26 @@
</div> </div>
</div> </div>
<style> <style>
.calendar-container { .calendar-container {
width: 100%; width: 100%;
} }
.calendar-header { .calendar-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 15px;
padding: 15px; padding: 15px;
background: rgba(166, 168, 179, 0.05); background: rgba(166, 168, 179, 0.05);
border-bottom: 1px solid rgba(166, 168, 179, 0.12); border-bottom: 1px solid rgba(166, 168, 179, 0.12);
} }
.expand-btn { .expand-btn {
width: 36px; width: 36px;
height: 36px; height: 36px;
border: 1px solid rgba(166, 168, 179, 0.2); border: 1px solid rgba(166, 168, 179, 0.2);
background: transparent; background: transparent;
color: #009FB7; color: #009fb7;
font-size: 24px; font-size: 24px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
@@ -238,19 +265,19 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; transition: all 0.2s;
} }
.expand-btn:hover { .expand-btn:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-color: #009FB7; border-color: #009fb7;
} }
.nav-btn { .nav-btn {
width: 32px; width: 32px;
height: 32px; height: 32px;
border: 1px solid rgba(166, 168, 179, 0.2); border: 1px solid rgba(166, 168, 179, 0.2);
background: transparent; background: transparent;
color: #009FB7; color: #009fb7;
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
@@ -258,30 +285,30 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; transition: all 0.2s;
} }
.nav-btn:hover { .nav-btn:hover {
background: rgba(0, 159, 183, 0.1); background: rgba(0, 159, 183, 0.1);
border-color: #009FB7; border-color: #009fb7;
} }
.month-year { .month-year {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #009FB7; color: #009fb7;
flex: 1; flex: 1;
text-align: center; text-align: center;
} }
.calendar { .calendar {
display: grid; display: grid;
width: 100%; width: 100%;
grid-template-columns: repeat(7, minmax(120px, 1fr)); grid-template-columns: repeat(7, minmax(120px, 1fr));
grid-auto-rows: 120px; grid-auto-rows: 120px;
overflow: auto; overflow: auto;
} }
.day { .day {
border-bottom: 1px solid rgba(166, 168, 179, 0.12); border-bottom: 1px solid rgba(166, 168, 179, 0.12);
border-right: 1px solid rgba(166, 168, 179, 0.12); border-right: 1px solid rgba(166, 168, 179, 0.12);
padding: 14px 20px; padding: 14px 20px;
@@ -289,13 +316,13 @@
color: #98a0a6; color: #98a0a6;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.day.has-image { .day.has-image {
background-color: transparent; background-color: transparent;
} }
.image-overlay { .image-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -303,98 +330,55 @@
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
z-index: 1; z-index: 1;
} }
.day-header { .day-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.day-name { .day-name {
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
color: #009FB7; color: #009fb7;
font-weight: 500; font-weight: 500;
} }
.date { .date {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
letter-spacing: 1px; letter-spacing: 1px;
} }
.entry-indicator { .entry-indicator {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background-color: #4a9eff; background-color: #4a9eff;
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
} }
.day.has-image .day-name, .day.has-image .day-name,
.day.has-image .date { .day.has-image .date {
color: white; color: white;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
} }
.day.other-month { .day.other-month {
opacity: 0.3; opacity: 0.3;
} }
.day.today { .day.today {
background: rgba(0, 159, 183, 0.1); background: rgba(0, 159, 183, 0.1);
} }
.day.today .date { .day.today .date {
color: #009FB7; color: #009fb7;
font-weight: 700; font-weight: 700;
} }
.day:nth-of-type(7n + 7) {
border-right: 0;
}
.day:nth-of-type(n + 1):nth-of-type(-n + 7) {
grid-row: 1;
}
.day:nth-of-type(n + 8):nth-of-type(-n + 14) {
grid-row: 2;
}
.day:nth-of-type(n + 15):nth-of-type(-n + 21) {
grid-row: 3;
}
.day:nth-of-type(n + 22):nth-of-type(-n + 28) {
grid-row: 4;
}
.day:nth-of-type(n + 29):nth-of-type(-n + 35) {
grid-row: 5;
}
.day:nth-of-type(n + 36):nth-of-type(-n + 42) {
grid-row: 6;
}
.day:nth-of-type(7n + 1) {
grid-column: 1/1;
}
.day:nth-of-type(7n + 2) {
grid-column: 2/2;
}
.day:nth-of-type(7n + 3) {
grid-column: 3/3;
}
.day:nth-of-type(7n + 4) {
grid-column: 4/4;
}
.day:nth-of-type(7n + 5) {
grid-column: 5/5;
}
.day:nth-of-type(7n + 6) {
grid-column: 6/6;
}
.day:nth-of-type(7n + 7) {
grid-column: 7/7;
}
</style> </style>