You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.3 KiB
64 lines
1.3 KiB
<script>
|
|
import CodeView from '../components/CodeView.svelte';
|
|
import Icon from '../components/Icon.svelte';
|
|
|
|
// I'm sure there's a fancy way to do this but whatever
|
|
const make_dates = () => {
|
|
let days = [];
|
|
for(let i = 0; i < 31; i++) {
|
|
days.push(i);
|
|
}
|
|
return days;
|
|
}
|
|
</script>
|
|
<style>
|
|
content {
|
|
display: flex;
|
|
flex: flex-shrink;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
calendar {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
grid-template-rows: auto;
|
|
max-width: 300px;
|
|
outline: 1px solid var(--color-accent);
|
|
}
|
|
|
|
calendar day {
|
|
background-color: var(--color-bg-secondary);
|
|
font-weight: bold;
|
|
padding-left: 0.3rem;
|
|
padding-right: 0.3rem;
|
|
}
|
|
|
|
calendar month {
|
|
grid-column: span 7;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
calendar date {
|
|
padding: 0.3rem;
|
|
}
|
|
|
|
calendar date:hover {
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
</style>
|
|
|
|
<content>
|
|
<calendar>
|
|
<month>December</month>
|
|
<day>Sun</day><day>Mon</day><day>Tue</day><day>Wed</day><day>Thu</day><day>Fri</day><day>Sat</day>
|
|
{#each make_dates() as date}
|
|
<date>{date}</date>
|
|
{/each}
|
|
</calendar>
|
|
</content>
|
|
|
|
<CodeView source="/code/Calendar" notes="/code/Calendar.notes.html" />
|
|
|