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

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

@@ -7,10 +7,10 @@
}
let {
year = $bindable('2026'),
month = $bindable('0'),
entries
} = $props()
year = $bindable("2026"),
month = $bindable("0"),
entries,
} = $props();
var headers = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
let days = $state([]);
@@ -19,11 +19,15 @@
let currentMonth = $state(parseInt(month));
// 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;
const dateStr = new Date(year, month, date).toISOString().split('T')[0];
return entries.find(entry => {
const entryDate = entry.date.split('T')[0];
const dateStr = new Date(year, month, date).toISOString().split("T")[0];
return entries.find((entry) => {
const entryDate = entry.date.split("T")[0];
return entryDate === dateStr;
});
}
@@ -41,7 +45,11 @@
for (let i = 0; i < 7; i++) {
const day = new Date(monday);
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({
date: day.getDate(),
month: day.getMonth(),
@@ -49,7 +57,7 @@
dayName: headers[i],
isCurrentMonth: day.getMonth() === today.getMonth(),
isToday: day.toDateString() === today.toDateString(),
entry
entry,
});
}
return week;
@@ -82,14 +90,15 @@
dayName: headers[dayIndex],
isCurrentMonth: false,
isToday: false,
entry
entry,
});
}
// Current month days
const today = new Date();
for (let i = 1; i <= daysInMonth; i++) {
const isToday = today.getDate() === i &&
const isToday =
today.getDate() === i &&
today.getMonth() === month &&
today.getFullYear() === year;
const dayIndex = days.length % 7;
@@ -101,7 +110,7 @@
dayName: headers[dayIndex],
isCurrentMonth: true,
isToday,
entry
entry,
});
}
@@ -119,7 +128,7 @@
dayName: headers[dayIndex],
isCurrentMonth: false,
isToday: false,
entry
entry,
});
}
@@ -165,19 +174,36 @@
}
}
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
</script>
<div class="calendar-container">
<div class="calendar-header">
<button class="expand-btn" onclick={toggleExpanded} title={expanded ? "Show week view" : "Show month view"}>
{expanded ? '−' : '+'}
<button
class="expand-btn"
onclick={toggleExpanded}
title={expanded ? "Show week view" : "Show month view"}
>
{expanded ? "−" : "+"}
</button>
{#if expanded}
<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>
{:else}
<span class="month-year">Current Week</span>
@@ -191,7 +217,9 @@
class:other-month={!day.isCurrentMonth}
class:today={day.isToday}
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}
<div class="image-overlay"></div>
@@ -210,7 +238,6 @@
</div>
</div>
<style>
.calendar-container {
width: 100%;
@@ -230,7 +257,7 @@
height: 36px;
border: 1px solid rgba(166, 168, 179, 0.2);
background: transparent;
color: #009FB7;
color: #009fb7;
font-size: 24px;
cursor: pointer;
border-radius: 4px;
@@ -242,7 +269,7 @@
.expand-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #009FB7;
border-color: #009fb7;
}
.nav-btn {
@@ -250,7 +277,7 @@
height: 32px;
border: 1px solid rgba(166, 168, 179, 0.2);
background: transparent;
color: #009FB7;
color: #009fb7;
font-size: 20px;
cursor: pointer;
border-radius: 4px;
@@ -262,13 +289,13 @@
.nav-btn:hover {
background: rgba(0, 159, 183, 0.1);
border-color: #009FB7;
border-color: #009fb7;
}
.month-year {
font-size: 18px;
font-weight: 600;
color: #009FB7;
color: #009fb7;
flex: 1;
text-align: center;
}
@@ -317,7 +344,7 @@
.day-name {
font-size: 12px;
text-transform: uppercase;
color: #009FB7;
color: #009fb7;
font-weight: 500;
}
@@ -351,50 +378,7 @@
}
.day.today .date {
color: #009FB7;
color: #009fb7;
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>