pedrohenriquebr/index.css

## index.css
.calendar {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 16fr;
    align-items: center;
    justify-content: center;
    grid-gap: 0em;
}

html {
    color: #e8e6e3;
    background-color: #181a1b !important;
}

body {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    align-items: center;
    justify-content: center;
}

.title {
    display: grid;
    text-align: center;
    grid-template-columns: 8fr 1fr;
    grid-template-rows: auto;
    background-color: darkcyan;
    border-radius: 0px 0px 0px 0px;
}

.arrows {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr;
    grid-gap: 0.25em;
    align-items: center;
    justify-content: center;
}

/* Constrói as setas */

.arrow {
    width: 0.6em;
    height: 0.6em;
    display: block;
    border-color: silver;
    cursor: pointer;
    transition-duration: 0.4s;
}

.arrow.right {
    order: 1;
    border-style: solid;
    border-width: 0.1em 0.1em 0.0em 0em;
    transform: rotate(45deg);
}

.arrow.left {
    order: 0;
    border-style: solid;
    border-width: 0.0em 0.0em 0.1em 0.1em;
    transform: rotate(45deg);
}

/* Título */

.title>div {
    font-size: 24pt;
}

.months {
    display: grid;
    grid-template-columns: repeat(4, 14em);
    grid-template-rows: repeat(3, 15em);
    grid-gap: 0.5em;
    justify-content: center;
}

.name {
    display: flex;
    font-size: 18pt;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 201, 204);
    ;
    border-radius: 20px 20px 0px 0px;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-gap: 0px;
    background-color: #005ccc;
    border-radius: 0px 0px 20px 20px;
}

.week_names {
    display: grid;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 1fr;
    background-color: darkturquoise;
}

.week_names .week_name {
    border: 2px;
    color: black;
    border-color: red;
}

.day {
    color: white;
    border-color: rgb(60, 60, 60);;
    text-align: center;
    padding: 0.02em;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: 0.05em;
    border-style: solid;
}

.day:nth-child(29) {
    border-radius: 0px 0px 0px 20px;
}

.day:nth-child(35) {
    border-radius: 0px 0px 20px 0px;
}

.month {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 2fr 2fr 10fr;
}

* {
    box-sizing: border-box;
}

## index.html
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="app" class="calendar">
        <div class="title">
            <div>Calendário {{year}}</div>
            <div class="arrows">
                <div class="arrow right" onclick="app.increaseYear()">
                </div>
                <div class="arrow left" onclick="app.decreaseYear()">
                </div>
            </div>
        </div>
        <div class="months">
        </div>
    </div>
    <script src="index.js"></script>

</body>

</html>

## index.js
const xrange = function* (start, end) {
    yield start;
    if (start === end) return;
    yield* xrange(start + 1, end);
};

const app = new Vue({
    el: '#app',
    data: {
        dt: undefined,
        year: undefined,
        leap: false,
        loaded: false,
        month_names: {
            1: 'Janeiro',
            2: 'Fevereiro',
            3: 'Março',
            4: 'Abril',
            5: 'Maio',
            6: 'Junho',
            7: 'Julho',
            8: 'Agosto',
            9: 'Setembro',
            10: 'Outubro',
            11: 'Novembro',
            12: 'Dezembro'
        }
    },
    methods: {

        increaseYear() {
            setTimeout(() =>
                this.year += 1, 120)
        },
        decreaseYear() {
            this.year -= 1;
        }
    },
    mounted() {
        this.dt = new Date(`01/01/${new Date(Date.now()).getFullYear()}`);
        this.year = this.dt.getFullYear();
        this.leap = this.year % 4 == 0 && this.year % 100 != 0;
    },
    watch: {
        "year": function (_new, old) {
            console.log(old, '=>', _new);
            this.dt.setYear(_new);
            this.leap = _new % 4 == 0 && _new % 100 != 0;
            console.log(`Ano atual: ${_new}`);
            console.log(`Esse ano é bissexto: ${this.leap}`);

            [...document.querySelectorAll(".months .days .day")]
                .forEach(x => x.innerHTML = "");

            if (!this.loaded) {
                for (let j of xrange(1, 12)) {
                    let month_el = document.createElement("div");
                    let month_name_el = document.createElement("div");
                    let days_el = document.createElement("div");
                    let week_names_el = document.createElement("div");
                    week_names_el.className = "week_names";
                    ['D', 'S', 'T', 'Q', 'Q', 'S', 'S']
                        .map(x => {
                            let tmp = document.createElement("div");
                            tmp.innerText = x;
                            tmp.className = 'week_name';
                            week_names_el.appendChild(tmp);

                        });

                    month_el.className = "month";
                    month_name_el.className = "name";
                    month_name_el.innerText = this.month_names[j];
                    days_el.className = "days";
                    month_el.appendChild(month_name_el);
                    month_el.appendChild(week_names_el);
                    month_el.appendChild(days_el);
                    document.querySelector(".months").append(month_el);

                    for (let x of xrange(1, 7 * 5)) {
                        let el4 = document.createElement("div");
                        el4.className = "day";
                        days_el.appendChild(el4);
                    }
                }
                this.loaded = true;
            }

            for (let m of xrange(1, this.leap ? 366 : 365)) {
                let date = new Date((this.dt.getTime() + (m - 1) * 24 * 60 * 60 * 1000));
                let idx = date.getMonth() + 1;
                let el = document.querySelector(`.months :nth-child(${idx}) .name`);
                let el2 = document.querySelector(`.months :nth-child(${idx}) .days .day:nth-child(${date.getDate()})`);
                el2.innerHTML = date.getDate();
                el.innerHTML = this.month_names[idx];
            }
        }
    }

})
	.calendar {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr 16fr;
	align-items: center;
	justify-content: center;
	grid-gap: 0em;
	}

	html {
	color: #e8e6e3;
	background-color: #181a1b !important;
	}

	body {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	align-items: center;
	justify-content: center;
	}

	.title {
	display: grid;
	text-align: center;
	grid-template-columns: 8fr 1fr;
	grid-template-rows: auto;
	background-color: darkcyan;
	border-radius: 0px 0px 0px 0px;
	}

	.arrows {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: 1fr;
	grid-gap: 0.25em;
	align-items: center;
	justify-content: center;
	}

	/* Constrói as setas */

	.arrow {
	width: 0.6em;
	height: 0.6em;
	display: block;
	border-color: silver;
	cursor: pointer;
	transition-duration: 0.4s;
	}

	.arrow.right {
	order: 1;
	border-style: solid;
	border-width: 0.1em 0.1em 0.0em 0em;
	transform: rotate(45deg);
	}

	.arrow.left {
	order: 0;
	border-style: solid;
	border-width: 0.0em 0.0em 0.1em 0.1em;
	transform: rotate(45deg);
	}

	/* Título */

	.title>div {
	font-size: 24pt;
	}

	.months {
	display: grid;
	grid-template-columns: repeat(4, 14em);
	grid-template-rows: repeat(3, 15em);
	grid-gap: 0.5em;
	justify-content: center;
	}

	.name {
	display: flex;
	font-size: 18pt;
	justify-content: center;
	align-items: center;
	background-color: rgb(0, 201, 204);
	;
	border-radius: 20px 20px 0px 0px;
	}

	.days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-gap: 0px;
	background-color: #005ccc;
	border-radius: 0px 0px 20px 20px;
	}

	.week_names {
	display: grid;
	justify-content: center;
	align-items: center;
	align-content: center;
	justify-items: center;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: 1fr;
	background-color: darkturquoise;
	}

	.week_names .week_name {
	border: 2px;
	color: black;
	border-color: red;
	}

	.day {
	color: white;
	border-color: rgb(60, 60, 60);;
	text-align: center;
	padding: 0.02em;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	border-width: 0.05em;
	border-style: solid;
	}

	.day:nth-child(29) {
	border-radius: 0px 0px 0px 20px;
	}

	.day:nth-child(35) {
	border-radius: 0px 0px 20px 0px;
	}

	.month {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 2fr 2fr 10fr;
	}

	* {
	box-sizing: border-box;
	}
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<link rel="stylesheet" href="index.css">
	</head>

	<body>
	<div id="app" class="calendar">
	<div class="title">
	<div>Calendário {{year}}</div>
	<div class="arrows">
	<div class="arrow right" onclick="app.increaseYear()">
	</div>
	<div class="arrow left" onclick="app.decreaseYear()">
	</div>
	</div>
	</div>
	<div class="months">
	</div>
	</div>
	<script src="index.js"></script>

	</body>

	</html>
	const xrange = function* (start, end) {
	yield start;
	if (start === end) return;
	yield* xrange(start + 1, end);
	};

	const app = new Vue({
	el: '#app',
	data: {
	dt: undefined,
	year: undefined,
	leap: false,
	loaded: false,
	month_names: {
	1: 'Janeiro',
	2: 'Fevereiro',
	3: 'Março',
	4: 'Abril',
	5: 'Maio',
	6: 'Junho',
	7: 'Julho',
	8: 'Agosto',
	9: 'Setembro',
	10: 'Outubro',
	11: 'Novembro',
	12: 'Dezembro'
	}
	},
	methods: {

	increaseYear() {
	setTimeout(() =>
	this.year += 1, 120)
	},
	decreaseYear() {
	this.year -= 1;
	}
	},
	mounted() {
	this.dt = new Date(`01/01/${new Date(Date.now()).getFullYear()}`);
	this.year = this.dt.getFullYear();
	this.leap = this.year % 4 == 0 && this.year % 100 != 0;
	},
	watch: {
	"year": function (_new, old) {
	console.log(old, '=>', _new);
	this.dt.setYear(_new);
	this.leap = _new % 4 == 0 && _new % 100 != 0;
	console.log(`Ano atual: ${_new}`);
	console.log(`Esse ano é bissexto: ${this.leap}`);

	[...document.querySelectorAll(".months .days .day")]
	.forEach(x => x.innerHTML = "");

	if (!this.loaded) {
	for (let j of xrange(1, 12)) {
	let month_el = document.createElement("div");
	let month_name_el = document.createElement("div");
	let days_el = document.createElement("div");
	let week_names_el = document.createElement("div");
	week_names_el.className = "week_names";
	['D', 'S', 'T', 'Q', 'Q', 'S', 'S']
	.map(x => {
	let tmp = document.createElement("div");
	tmp.innerText = x;
	tmp.className = 'week_name';
	week_names_el.appendChild(tmp);

	});

	month_el.className = "month";
	month_name_el.className = "name";
	month_name_el.innerText = this.month_names[j];
	days_el.className = "days";
	month_el.appendChild(month_name_el);
	month_el.appendChild(week_names_el);
	month_el.appendChild(days_el);
	document.querySelector(".months").append(month_el);

	for (let x of xrange(1, 7 * 5)) {
	let el4 = document.createElement("div");
	el4.className = "day";
	days_el.appendChild(el4);
	}
	}
	this.loaded = true;
	}

	for (let m of xrange(1, this.leap ? 366 : 365)) {
	let date = new Date((this.dt.getTime() + (m - 1) * 24 * 60 * 60 * 1000));
	let idx = date.getMonth() + 1;
	let el = document.querySelector(`.months :nth-child(${idx}) .name`);
	let el2 = document.querySelector(`.months :nth-child(${idx}) .days .day:nth-child(${date.getDate()})`);
	el2.innerHTML = date.getDate();
	el.innerHTML = this.month_names[idx];
	}
	}
	}

	})