Using HTML, CSS, and JavaScript, create a full year view calendar.

As the project workspace, create a folder called Full Year view Calendar and place all of the project files inside.

1. index.html

Let's make a file called index.html and add the following code to it:

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css" />
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="calendar"></div>
	<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
	<script>
	new Calendar(document.querySelector('.calendar'));
	</script>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

Let's make a style.css file and add the following code to it:

	@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Quicksand:wght@300;400;500;600&display=swap');
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Quicksand', sans-serif;
	}

	body {
	background: #f1fbff;
	}

	.calender {
	padding: 20px 40px;
	}

	.months-container {
	justify-content: center;
	gap: 40px;
	}

	.calendar .months-container .month-container{
	background: #fff;
	padding: 20px;
	min-width: 280px;
	box-shadow: 15px 15px 40px rgba(0,0,0,0.15);
	}

	.calendar table.month th.month-title{
	color: #5a8990;
	font-size: 1.9em;
	font-weight: 200;
	font-family: 'Dancing Script', cursive;
	}

	table.month td:first-child, table.month thead tr:nth-child(2) th:first-child{
	color:#f75c90;
	}

	.calendar table.month td.day .day-content {
	padding: 6px 8px;
	}

	.calendar .calendar-header {
	border: none;
	}

	.calendar .calendar-header table th:hover {
	background: transparent;
	}

	.calendar .calendar-header .year-title {
	font-size: 2.25em;
	font-family: 'Dancing Script', cursive;
	}

	.calendar .calendar-header table th {
	font-size: 60px;
	color: rgb(255, 111, 111);
	cursor: pointer;
	}

view raw style.css hosted with ❤ by GitHub