vikingowl/Calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added base-layout

Browse Source
This commit is contained in:
vikingowl
2025-01-23 21:16:02 +01:00
parent 447d24dd11
commit b3d6c7c75b
3 changed files with 172 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@@ -2,15 +2,31 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<title>Calendar</title>
<link rel="stylesheet" href="style.css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="calendar">
<div id="calendar__header">
<div class="year">2025</div>
<div class="actions">
<button>-</button>
<button>Today</button>
<button>+</button>
</div>
<div class="month">September</div>
</div>
<div id="calendar__body">
</div>
</div>
</div>
<script src="script.js"></script>
</body>

63
script.js
View File

@@ -0,0 +1,63 @@
const WEEKDAYS = Object.freeze({
MONDAY: 0,
TUESDAY: 1,
WEDNESDAY: 2,
THURSDAY: 3,
FRIDAY: 4,
SATURDAY: 5,
SUNDAY: 6
});
const MONTHS = Object.freeze({
JANUARY: 0,
FEBRUARY: 1,
MARCH: 2,
APRIL: 3,
MAY: 4,
JUNE: 5,
JULY: 6,
AUGUST: 7,
SEPTEMBER: 8,
OCTOBER: 9,
NOVEMBER: 10,
DEZEMBER: 11
})
function generateDays() {
const visibleDays = 42 // 7 col, 5 row
const calendarBody = document.getElementById('calendar__body')
if (calendarBody) {
for (let i = 0; i < visibleDays; i++) {
const day = document.createElement('div')
day.classList.add('day')
if (i < Object.keys(WEEKDAYS).length) {
day.classList.add('weekday')
day.textContent = Object.keys(WEEKDAYS)[i]
} else {
const dayId = i % 7 + 1
day.classList.add('day-' + dayId)
}
calendarBody.appendChild(day)
}
}
}
function addCalendarDays() {
const date = new Date()
console.log(date.getMonth())
}
function setHeaderInfo(month, year) {
const yearDOM = document.querySelector('#calendar__header .year')
const monthDOM = document.querySelector('#calendar__header .month')
if (month) {
month.textContent = month
}
}
document.addEventListener('DOMContentLoaded', () => {
generateDays()
addCalendarDays()
})

89
style.css
View File

@@ -0,0 +1,89 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.container {
width: 100%;
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
flex: 0 1 auto;
}
.calendar {
width: 900px;
height: 650px;
background: floralwhite;
border: 1px solid black;
}
#calendar__header {
background: aliceblue;
display: flex;
justify-content: space-between;
height: 3rem;
}
#calendar__body {
width: 100%;
height: calc(100% - 3rem);
padding: 0.5rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr;
gap: 0.5rem 0.5rem;
grid-template-areas:
". . . . . . ."
". . . . . . ."
". . . . . . ."
". . . . . . ."
". . . . . . ."
". . . . . . .";
}
#calendar__header * {
width: 7rem;
height: 100%;
padding: 1rem 2rem;
display: flex;
align-items: center;
font-size: 1.2rem;
}
#calendar__header .year {
justify-content: start;
}
#calendar__header .month {
justify-content: end;
}
#calendar__header .actions {
display: flex;
justify-content: center;
align-items: center;
gap: .5rem;
}
#calendar__header .actions button {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}
.day {
background: burlywood;
}
.weekday {
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
}