frontend: fix active day and next pred buttons on calendar
This commit is contained in:
parent
b22c2875c7
commit
41be12050d
1 changed files with 18 additions and 7 deletions
|
@ -7,7 +7,6 @@
|
|||
let now = new Date();
|
||||
let year = now.getFullYear(); // this is the month & year displayed
|
||||
let month = now.getMonth();
|
||||
let current = now.getDate();
|
||||
var days: Array<Object> = []; // The days to display in each box
|
||||
|
||||
$: month,year,initContent();
|
||||
|
@ -65,6 +64,14 @@
|
|||
|
||||
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) {
|
||||
selected = day;
|
||||
return null;
|
||||
|
@ -74,8 +81,8 @@
|
|||
<div class="calendar input rounded">
|
||||
<div class="month">
|
||||
<ul>
|
||||
<button class="prev" onclick={prev()}>❮</button>
|
||||
<button class="next" onclick={next()}>❯</button>
|
||||
<button class="prev" onclick={() => prev()}>❮</button>
|
||||
<button class="next" onclick={() => next()}>❯</button>
|
||||
<li>{monthNames[month]} {year}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -88,9 +95,9 @@
|
|||
{#each days as day}
|
||||
<li>
|
||||
{#if selected == day}
|
||||
<button class="active {day.name == current ? "current":""}">{day.name}</button>
|
||||
<button class="active {isCurrent(day.date) ? "current":""}">{day.name}</button>
|
||||
{: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}
|
||||
</li>
|
||||
{/each}
|
||||
|
@ -115,14 +122,18 @@
|
|||
}
|
||||
|
||||
.month ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.month ul li {
|
||||
display: inline;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.month ul button {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.month .prev {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue