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 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.getDay(); 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();
@ -88,9 +88,9 @@
{#each days as day} {#each days as day}
<li> <li>
{#if selected == day} {#if selected == day}
<button class="active">{day.name}</button> <button class="active {day.name == current ? "current":""}">{day.name}</button>
{:else} {: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} {/if}
</li> </li>
{/each} {/each}
@ -162,6 +162,13 @@
cursor: pointer; cursor: pointer;
} }
.days li .current {
height: 2em;
padding: 5px;
aspect-ratio: 1/1;
border-radius: 30%;
}
.days li .active { .days li .active {
height: 2em; height: 2em;
padding: 5px; padding: 5px;
@ -195,6 +202,10 @@
background: #5C8DC0; background: #5C8DC0;
} }
.month ul button {
color: white;
}
.month ul li { .month ul li {
color: white; color: white;
} }
@ -217,7 +228,12 @@
.days li .active { .days li .active {
color: white !important; color: white !important;
background: #5C8DC0; background: #5C8DC0 !important;
}
.days li .current {
color: white !important;
background: red;
} }
} }
@ -226,6 +242,10 @@
background: #2791FF; background: #2791FF;
} }
.month ul button {
color: white;
}
.month ul li { .month ul li {
color: white; color: white;
} }
@ -248,7 +268,12 @@
.days li .active { .days li .active {
color: white !important; color: white !important;
background: #2791FF; background: #2791FF !important;
}
.days li .current {
color: white !important;
background: red;
} }
} }
</style> </style>