format :3
This commit is contained in:
@@ -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,16 +90,17 @@
|
||||
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 &&
|
||||
today.getMonth() === month &&
|
||||
today.getFullYear() === year;
|
||||
const isToday =
|
||||
today.getDate() === i &&
|
||||
today.getMonth() === month &&
|
||||
today.getFullYear() === year;
|
||||
const dayIndex = days.length % 7;
|
||||
const entry = getEntryForDay(year, month, i);
|
||||
days.push({
|
||||
@@ -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,191 +238,147 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.calendar-container {
|
||||
width: 100%;
|
||||
}
|
||||
.calendar-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
background: rgba(166, 168, 179, 0.05);
|
||||
border-bottom: 1px solid rgba(166, 168, 179, 0.12);
|
||||
}
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
background: rgba(166, 168, 179, 0.05);
|
||||
border-bottom: 1px solid rgba(166, 168, 179, 0.12);
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid rgba(166, 168, 179, 0.2);
|
||||
background: transparent;
|
||||
color: #009FB7;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.expand-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid rgba(166, 168, 179, 0.2);
|
||||
background: transparent;
|
||||
color: #009fb7;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: #009FB7;
|
||||
}
|
||||
.expand-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: #009fb7;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid rgba(166, 168, 179, 0.2);
|
||||
background: transparent;
|
||||
color: #009FB7;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.nav-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid rgba(166, 168, 179, 0.2);
|
||||
background: transparent;
|
||||
color: #009fb7;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: rgba(0, 159, 183, 0.1);
|
||||
border-color: #009FB7;
|
||||
}
|
||||
.nav-btn:hover {
|
||||
background: rgba(0, 159, 183, 0.1);
|
||||
border-color: #009fb7;
|
||||
}
|
||||
|
||||
.month-year {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #009FB7;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.month-year {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #009fb7;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(7, minmax(120px, 1fr));
|
||||
grid-auto-rows: 120px;
|
||||
overflow: auto;
|
||||
}
|
||||
.calendar {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(7, minmax(120px, 1fr));
|
||||
grid-auto-rows: 120px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.day {
|
||||
border-bottom: 1px solid rgba(166, 168, 179, 0.12);
|
||||
border-right: 1px solid rgba(166, 168, 179, 0.12);
|
||||
padding: 14px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #98a0a6;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.day {
|
||||
border-bottom: 1px solid rgba(166, 168, 179, 0.12);
|
||||
border-right: 1px solid rgba(166, 168, 179, 0.12);
|
||||
padding: 14px 20px;
|
||||
box-sizing: border-box;
|
||||
color: #98a0a6;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.day.has-image {
|
||||
background-color: transparent;
|
||||
}
|
||||
.day.has-image {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.day-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.day-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.day-name {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #009FB7;
|
||||
font-weight: 500;
|
||||
}
|
||||
.day-name {
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #009fb7;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.date {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.entry-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #4a9eff;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.entry-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #4a9eff;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.day.has-image .day-name,
|
||||
.day.has-image .date {
|
||||
color: white;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.day.has-image .day-name,
|
||||
.day.has-image .date {
|
||||
color: white;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.day.other-month {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.day.other-month {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.day.today {
|
||||
background: rgba(0, 159, 183, 0.1);
|
||||
}
|
||||
.day.today {
|
||||
background: rgba(0, 159, 183, 0.1);
|
||||
}
|
||||
|
||||
.day.today .date {
|
||||
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;
|
||||
}
|
||||
.day.today .date {
|
||||
color: #009fb7;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user