VienDesu/vnshed
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: fix active day and next pred buttons on calendar

Browse source
This commit is contained in:
OleSTEEP 2025-10-16 19:59:23 +03:00
parent b22c2875c7
commit 41be12050d
1 changed files with 18 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/lib/components/calendar.svelte
View file

@ -7,7 +7,6 @@
let now = new Date(); let now = new Date();
let year = now.getFullYear(); // this is the month & year displayed let year = now.getFullYear(); // this is the month & year displayed
let month = now.getMonth(); let month = now.getMonth();
let current = now.getDate();
var days: Array<Object> = []; // The days to display in each box var days: Array<Object> = []; // The days to display in each box
$: month,year,initContent(); $: month,year,initContent();
@ -65,6 +64,14 @@
let selected: Object; let selected: Object;
function isCurrent(date: Date) {
if (now.getDate() == date.getDate() &&
now.getMonth() == date.getMonth() &&
now.getFullYear() == date.getFullYear())
return true;
return false;
}
function set_day(day: Object) { function set_day(day: Object) {
selected = day; selected = day;
return null; return null;
@ -74,8 +81,8 @@
<div class="calendar input rounded"> <div class="calendar input rounded">
<div class="month"> <div class="month">
<ul> <ul>
<button class="prev" onclick={prev()}>&#10094;</button> <button class="prev" onclick={() => prev()}>&#10094;</button>
<button class="next" onclick={next()}>&#10095;</button> <button class="next" onclick={() => next()}>&#10095;</button>
<li>{monthNames[month]} {year}</li> <li>{monthNames[month]} {year}</li>
</ul> </ul>
</div> </div>
@ -88,9 +95,9 @@
{#each days as day} {#each days as day}
<li> <li>
{#if selected == day} {#if selected == day}
<button class="active {day.name == current ? "current":""}">{day.name}</button> <button class="active {isCurrent(day.date) ? "current":""}">{day.name}</button>
{:else} {:else}
<button class="nonactive {day.name == current ? "current":""}" onclick={set_day(day)}>{day.name}</button> <button class="nonactive {isCurrent(day.date) ? "current":""}" onclick={set_day(day)}>{day.name}</button>
{/if} {/if}
</li> </li>
{/each} {/each}
@ -115,14 +122,18 @@
} }
.month ul { .month ul {
padding: 0;
margin: 0; margin: 0;
padding: 0.5rem;
} }
.month ul li { .month ul li {
display: inline;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 3px; letter-spacing: 3px;
padding: 0.5rem;
}
.month ul button {
padding: 0.5rem;
} }
.month .prev { .month .prev {