<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Calendar Experiment</title>
</head>
<body>
<div class="calendar-grid">
</div>
<script src="moment.js"></script>
<script src="app.js"></script>
</body>
</html>* {
box-sizing: border-box;
}
body {
margin:0;
font-size: 1.2em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #666;
background:lightgoldenrodyellow;
}
.calendar-grid {
margin:1em auto;
width:80%;
height: 80vh;
grid-gap: 10px 10px;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 3em 2em;
grid-auto-rows: 1fr;
border-top: 4px solid palegoldenrod;
padding-top:1em;
}
.calendar-day {
padding:.4em;
height:100%;
width:100%;
background:palegoldenrod;
border-radius:5px;
}
.current-day {
background:lightskyblue;
}
.first-day {
grid-column-start: 4;
}
.calendar-dayname {
padding:.4em;
text-align:center;
background:goldenrod;
color:palegoldenrod;
}
.calendar-title {
text-align:center;
grid-column: 2 / -2;
font-size: 2em;
}
.calendar-nav a {
display:block;
width:100%;
height:100%;
font-size: 2em;
cursor: pointer;
}
.calendar-nav__right {
text-align: right;
}
let calendarSettings = {
date: moment().set('date', 1),
today: moment()
}
const incrementMonth = () => {
calendarSettings.date.add(1, 'Months')
console.log(`incremented to ${calendarSettings.date}`)
displayCalendar(calendarSettings)
}
const decrementMonth = () => {
calendarSettings.date.subtract(1, 'Months')
console.log(`decremented to ${calendarSettings.date}`)
displayCalendar(calendarSettings)
}
const displayCalendar = (calendarSettings) => {
const calendar = document.querySelector('.calendar-grid')
const calendarTitle = calendarSettings.date.format('MMMM YYYY')
const daysInMonth = calendarSettings.date.endOf('Month').date()
const firstDay = calendarSettings.date.startOf('Month').isoWeekday()
calendar.innerHTML = ''
calendar.innerHTML = `
<div class="calendar-nav"><a onClick="decrementMonth()">< </a></div>
<div class="calendar-title">${calendarTitle}</div>
<div class="calendar-nav calendar-nav__right"><a onClick="incrementMonth()"> ></a></div>
<div class="calendar-dayname">Monday</div>
<div class="calendar-dayname">Tuesday</div>
<div class="calendar-dayname">Wednesday</div>
<div class="calendar-dayname">Thursday</div>
<div class="calendar-dayname">Friday</div>
<div class="calendar-dayname">Saturday</div>
<div class="calendar-dayname">Sunday</div>
`
for (let day = 1; day <= daysInMonth; day++) {
let calendarDay = document.createElement('div')
if (day === 1) {
calendarDay.setAttribute('style', `grid-column-start:${firstDay}`)
console.log(`firstDay = ${firstDay}`)
}
calendarDay.classList.add('calendar-day')
if (calendarSettings.today.month() == calendarSettings.date.month() && calendarSettings.today.year() == calendarSettings.date.year()) {
if (calendarSettings.today.date() == day) {
calendarDay.classList.add('current-day')
}
}
calendarDay.innerHTML = day
calendar.appendChild(calendarDay)
}
}
displayCalendar(calendarSettings);
External CSS
This Pen doesn't use any external CSS resources.