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

frontend: mark current day on calendar

Browse source
This commit is contained in:
OleSTEEP 2025-10-16 18:01:23 +03:00
parent a0925f9ba5
commit b944b4566e
1 changed files with 30 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,7 @@
let now = new Date();
let year = now.getFullYear(); // this is the month & year displayed
let month = now.getMonth();
let current = now.getDay();
let current = now.getDate();
var days: Array<Object> = []; // The days to display in each box
$: month,year,initContent();
@ -88,9 +88,9 @@
{#each days as day}
<li>
{#if selected == day}
<button class="active">{day.name}</button>
<button class="active {day.name == current ? "current":""}">{day.name}</button>
{:else}
<button class="nonactive" onclick={set_day(day)}>{day.name}</button>
<button class="nonactive {day.name == current ? "current":""}" onclick={set_day(day)}>{day.name}</button>
{/if}
</li>
{/each}
@ -162,6 +162,13 @@
cursor: pointer;
}
.days li .current {
height: 2em;
padding: 5px;
aspect-ratio: 1/1;
border-radius: 30%;
}
.days li .active {
height: 2em;
padding: 5px;
@ -195,6 +202,10 @@
background: #5C8DC0;
}
.month ul button {
color: white;
}
.month ul li {
color: white;
}
@ -217,7 +228,12 @@
.days li .active {
color: white !important;
background: #5C8DC0;
background: #5C8DC0 !important;
}
.days li .current {
color: white !important;
background: red;
}
}
@ -226,6 +242,10 @@
background: #2791FF;
}
.month ul button {
color: white;
}
.month ul li {
color: white;
}
@ -248,7 +268,12 @@
.days li .active {
color: white !important;
background: #2791FF;
background: #2791FF !important;
}
.days li .current {
color: white !important;
background: red;
}
}
</style>