I made calendar that displays every day in each month for all 12 months. What would be the proper way to style these day blocks in order to get the days to wrap at the end of of 7 days?. As it is now, they don't flex to the end, but the bigger problem is I only want 7 dayblocks to show in each row.
Should I use CSS or is the real problem my logic? (basically want to look like a actually calendar). Here is an image of what it looks like for me currently:
<script lang="ts">
const weekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thurs', 'Fri', 'Sat'];
const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let daysInMonth: Array<string> = [];
let dayNumberArray: Array<number> = [];
let days: Array<Date> = [];
const getDaysInMonth = (month: number, year: number) => {
//create a date...
let date = new Date(year, month);
//loop through months...
while (date.getMonth() === month) {
days.push(new Date(date));
date.setDate(date.getDate() + 1);
}
for (let i = 0; i < daysInMonth.length; i++) {
dayNumberArray.push(i);
}
};
//for each month...
months.forEach((m) => {
//pass the month and year...
getDaysInMonth(m - 1, 2023);
});
const getDaysInYear = (year: number) => {
daysInYear = checkLeapYear(year) ? 366 : 365;
};
const checkLeapYear = (year: number) => {
return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
};
</script>
<main>
<section class="cal">
<div class="cal-header">
<h1>Calendar</h1>
</div>
<div class="cal-week">
{#each weekNames as week}
<div class="cal-weekday">
{week}
</div>
{/each}
</div>
<div class="cal-month">
{#each days as day}
{#if day}
<div class="cal-day">
<div class="cal-num">
{day.getDate()}
</div>
</div>
{/if}
{/each}
</div>
</section>
</main>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cal {
width: 100%;
height: 100%;
font-family: 'Poppins';
overflow-y: scroll;
border: 1px solid black;
}
.cal-header {
display: flex;
justify-content: center;
border: 1px solid black;
}
.cal-week {
display: flex;
border: 1px solid black;
background-color: rgb(146, 216, 183);
}
.cal-weekday {
display: flex;
justify-content: center;
width: 100%;
}
.cal-month {
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
border: 1px solid black;
}
.cal-day {
font-size: 28px;
font-weight: bold;
border-radius: 8px;
min-width: 100px;
line-height: 100px;
height: 100px;
text-align: center;
margin: 5px;
border: 1px solid black;
}
.cal-day:hover {
background-color: rgb(230, 229, 229);
}
.cal-num {
font-size: 1.5rem;
padding: 0.15rem;
}
</style>
