format :3
This commit is contained in:
@@ -5,43 +5,51 @@
|
|||||||
image?: string;
|
image?: string;
|
||||||
content: string;
|
content: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
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([]);
|
||||||
let expanded = $state(false);
|
let expanded = $state(false);
|
||||||
let currentYear = $state(parseInt(year));
|
let currentYear = $state(parseInt(year));
|
||||||
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;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get current week when in week view
|
// Get current week when in week view
|
||||||
function getCurrentWeek() {
|
function getCurrentWeek() {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
const currentDay = today.getDay();
|
const currentDay = today.getDay();
|
||||||
const diff = currentDay === 0 ? -6 : 1 - currentDay; // Adjust for Monday start
|
const diff = currentDay === 0 ? -6 : 1 - currentDay; // Adjust for Monday start
|
||||||
|
|
||||||
const monday = new Date(today);
|
const monday = new Date(today);
|
||||||
monday.setDate(today.getDate() + diff);
|
monday.setDate(today.getDate() + diff);
|
||||||
|
|
||||||
const week = [];
|
const week = [];
|
||||||
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,24 +57,24 @@
|
|||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate calendar for a full month
|
// Generate calendar for a full month
|
||||||
function generateMonth(year: number, month: number) {
|
function generateMonth(year: number, month: number) {
|
||||||
const firstDay = new Date(year, month, 1);
|
const firstDay = new Date(year, month, 1);
|
||||||
const lastDay = new Date(year, month + 1, 0);
|
const lastDay = new Date(year, month + 1, 0);
|
||||||
const daysInMonth = lastDay.getDate();
|
const daysInMonth = lastDay.getDate();
|
||||||
|
|
||||||
// Get the day of week for first day (0 = Sunday, adjust to Monday = 0)
|
// Get the day of week for first day (0 = Sunday, adjust to Monday = 0)
|
||||||
let startDay = firstDay.getDay() - 1;
|
let startDay = firstDay.getDay() - 1;
|
||||||
if (startDay === -1) startDay = 6; // Sunday becomes 6
|
if (startDay === -1) startDay = 6; // Sunday becomes 6
|
||||||
|
|
||||||
const days = [];
|
const days = [];
|
||||||
|
|
||||||
// Previous month days
|
// Previous month days
|
||||||
const prevMonthLastDay = new Date(year, month, 0).getDate();
|
const prevMonthLastDay = new Date(year, month, 0).getDate();
|
||||||
for (let i = startDay - 1; i >= 0; i--) {
|
for (let i = startDay - 1; i >= 0; i--) {
|
||||||
@@ -82,16 +90,17 @@
|
|||||||
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.getMonth() === month &&
|
today.getDate() === i &&
|
||||||
today.getFullYear() === year;
|
today.getMonth() === month &&
|
||||||
|
today.getFullYear() === year;
|
||||||
const dayIndex = days.length % 7;
|
const dayIndex = days.length % 7;
|
||||||
const entry = getEntryForDay(year, month, i);
|
const entry = getEntryForDay(year, month, i);
|
||||||
days.push({
|
days.push({
|
||||||
@@ -101,10 +110,10 @@
|
|||||||
dayName: headers[dayIndex],
|
dayName: headers[dayIndex],
|
||||||
isCurrentMonth: true,
|
isCurrentMonth: true,
|
||||||
isToday,
|
isToday,
|
||||||
entry
|
entry,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Next month days to fill the grid
|
// Next month days to fill the grid
|
||||||
const remaining = 42 - days.length; // 6 rows * 7 days
|
const remaining = 42 - days.length; // 6 rows * 7 days
|
||||||
for (let i = 1; i <= remaining; i++) {
|
for (let i = 1; i <= remaining; i++) {
|
||||||
@@ -119,13 +128,13 @@
|
|||||||
dayName: headers[dayIndex],
|
dayName: headers[dayIndex],
|
||||||
isCurrentMonth: false,
|
isCurrentMonth: false,
|
||||||
isToday: false,
|
isToday: false,
|
||||||
entry
|
entry,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return days;
|
return days;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update days when expanded state or month changes
|
// Update days when expanded state or month changes
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (expanded) {
|
if (expanded) {
|
||||||
@@ -134,7 +143,7 @@
|
|||||||
days = getCurrentWeek();
|
days = getCurrentWeek();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function toggleExpanded() {
|
function toggleExpanded() {
|
||||||
expanded = !expanded;
|
expanded = !expanded;
|
||||||
if (expanded) {
|
if (expanded) {
|
||||||
@@ -144,7 +153,7 @@
|
|||||||
currentMonth = today.getMonth();
|
currentMonth = today.getMonth();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function previousMonth() {
|
function previousMonth() {
|
||||||
if (!expanded) return;
|
if (!expanded) return;
|
||||||
if (currentMonth === 0) {
|
if (currentMonth === 0) {
|
||||||
@@ -154,7 +163,7 @@
|
|||||||
currentMonth--;
|
currentMonth--;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function nextMonth() {
|
function nextMonth() {
|
||||||
if (!expanded) return;
|
if (!expanded) return;
|
||||||
if (currentMonth === 11) {
|
if (currentMonth === 11) {
|
||||||
@@ -164,34 +173,53 @@
|
|||||||
currentMonth++;
|
currentMonth++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="calendar">
|
<div class="calendar">
|
||||||
{#each days as day, index}
|
{#each days as day, index}
|
||||||
<div
|
<div
|
||||||
class="day"
|
class="day"
|
||||||
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,191 +238,147 @@
|
|||||||
</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;
|
||||||
display: flex;
|
display: flex;
|
||||||
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;
|
||||||
display: flex;
|
display: flex;
|
||||||
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;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
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;
|
||||||
right: 0;
|
right: 0;
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
.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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user