|
| Dynamic Calendar using html css and javascript |
Hello readers, today in this blog, you’ll learn to create a new beginner-level project, Dynamic Calendar using HTML CSS and JavaScript. We will explore how to create a calendar using HTML, CSS, and JavaScript. Calendars are an essential tool for managing our daily schedules, and creating one from scratch can be a great learning experience for developers. We will use HTML to structure the calendar, CSS to style it, and JavaScript to add dynamic functionality to it. As you all know, a calendar is a chart that shows the day, weeks, and months of a particular year. Calendars also help you to remember important events, such as holidays and festivals.
In my dynamic calendar, users can see the current date and day. They can also see the days of the present, past, or future month using the previous and next icons. Also in the bottom of Calendar you can see the current date and time updating every second. If you are curious to see a live demo of this project, click here to view it. For a live demo of Calendar in JavaScript.
Before we dive into the coding part, let's first understand the basic structure of a calendar. A calendar consists of months, weeks, and days. Each month can have a varying number of days, and each week has seven days. We will create a simple calendar that displays the current month and year, highlights today's date, and allows users to navigate to other months.
Create Gradient color generator tool in JavaScript
Create a Dynamic Calendar Using Html, Css and Js
To create this Dynamic Calendar. First, you need to create three files, one HTML, CSS and another one is a JS File. After creating these files just paste the following codes in your file.
After creating an HTML file with the name of index.html and copy and paste the given codes in your HTML file. Remember, you’ve to create a file with the .html extension. You’ve to download files from the given download button to use.
<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>Calendar</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="contianer">
<div class="calendar">
<div class="calendar-header">
<span class="month-picker" id="month-picker"> May </span>
<div class="year-picker" id="year-picker">
<span class="year-change" id="pre-year">
<pre><</pre>
</span>
<span id="year">2020 </span>
<span class="year-change" id="next-year">
<pre>></pre>
</span>
</div>
</div>
<div class="calendar-body">
<div class="calendar-week-days">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>
<div class="calendar-days">
</div>
</div>
<div class="calendar-footer">
</div>
<div class="date-time-formate">
<div class="day-text-formate">TODAY</div>
<div class="date-time-value">
<div class="time-formate">01:41:20</div>
<div class="date-formate">03 - march - 2022</div>
</div>
</div>
<div class="month-list"></div>
</div>
</div>
</body>
</html>
Now that we have created the basic HTML markup, we can style the page using CSS. After that Create a Css file with the name of style.css and copy and paste in your css file. Remember, you’ve to create a file with the .css extension.
* {
padding: 0;
margin: 0;
font-family: consolas;
box-sizing: border-box;
}
body {
display: flex;
height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
place-items: center;
background: linear-gradient(to right, #9796f0, #42445A);
overflow: hidden;
}
.calendar {
height: 30rem;
width: max-content;
background-color: white;
border-radius: 25px;
overflow: hidden;
padding: 35px 50px 0px 50px;
}
.calendar {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.calendar-header {
background: #8089FE;
display: flex;
justify-content: space-between;
border-radius: 7px;
align-items: center;
font-weight: 700;
color: #ffffff;
padding: 10px;
}
.calendar-body {
padding: 10px;
}
.calendar-week-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
font-weight: 600;
cursor: pointer;
color: rgb(104, 104, 104);
}
.calendar-week-days div:hover {
color: black;
transform: scale(1.2);
transition: all .2s ease-in-out;
}
.calendar-week-days div {
display: grid;
place-items: center;
color: #6D67CF;
height: 50px;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
color: #0A0921;
}
.calendar-days div {
width: 37px;
height: 33px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
position: relative;
cursor: pointer;
animation: to-top 1s forwards;
}
.month-picker {
padding: 5px 10px;
border-radius: 10px;
cursor: pointer;
}
.year-picker {
display: flex;
align-items: center;
}
.year-change {
height: 30px;
width: 30px;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0px 10px;
cursor: pointer;
}
.year-change:hover {
background-color: #9796f0;
transition: all .2s ease-in-out;
transform: scale(1.12);
}
.calendar-footer {
padding: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
}
#year:hover {
cursor: pointer;
transform: scale(1.2);
transition: all 0.2 ease-in-out;
}
.calendar-days div span {
position: absolute;
}
.calendar-days div:hover {
transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
background-color: #fbc7d4;
border-radius: 20%;
color: #f8fbff;
}
.calendar-days div.current-date {
color: #f8fbff;
background-color: #9796f0;
border-radius: 20%;
}
.month-list {
position: relative;
left: 0;
top: -130px;
background-color: #ebebeb;
color: #151426;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 5px;
border-radius: 20px;
}
.month-list>div {
display: grid;
place-content: center;
margin: 5px 10px;
transition: all 0.2s ease-in-out;
}
.month-list>div>div {
border-radius: 15px;
padding: 10px;
cursor: pointer;
}
.month-list>div>div:hover {
background-color: #9796f0;
color: #f8fbff;
transform: scale(0.9);
transition: all 0.2s ease-in-out;
}
.month-list.show {
visibility: visible;
pointer-events: visible;
transition: 0.6s ease-in-out;
animation: to-left .71s forwards;
}
.month-list.hideonce {
visibility: hidden;
}
.month-list.hide {
animation: to-right 1s forwards;
visibility: none;
pointer-events: none;
}
.date-time-formate {
height: 4rem;
width: 100%;
font-family: Dubai Light, Century Gothic;
position: relative;
display: flex;
top: 50px;
justify-content: center;
align-items: center;
}
.day-text-formate {
font-family: Microsoft JhengHei UI;
font-size: 1.4rem;
padding-right: 5%;
border-right: 3px solid #9796f0;
}
.date-time-value {
display: block;
position: relative;
text-align: center;
padding-left: 5%;
}
.time-formate {
font-size: 1.5rem;
}
.time-formate.hideTime {
animation: hidetime 1.5s forwards;
}
.day-text-formate.hidetime {
animation: hidetime 1.5s forwards;
}
.date-formate.hideTime {
animation: hidetime 1.5s forwards;
}
.day-text-formate.showtime {
animation: showtime 1s forwards;
}
.time-formate.showtime {
animation: showtime 1s forwards;
}
.date-formate.showtime {
animation: showtime 1s forwards;
}
@keyframes to-top {
0% {
transform: translateY(0);
opacity: 0;
}
100% {
transform: translateY(100%);
opacity: 1;
}
}
@keyframes to-left {
0% {
transform: translatex(230%);
opacity: 1;
}
100% {
transform: translatex(0);
opacity: 1;
}
}
@keyframes to-right {
10% {
transform: translatex(0);
opacity: 1;
}
100% {
transform: translatex(-150%);
opacity: 1;
}
}
@keyframes showtime {
0% {
transform: translatex(250%);
opacity: 1;
}
100% {
transform: translatex(0%);
opacity: 1;
}
}
@keyframes hidetime {
0% {
transform: translatex(0%);
opacity: 1;
}
100% {
transform: translatex(-370%);
opacity: 1;
}
}
Lastly at the last Create Js file with the name of script.js and copy and paste in your Js file. Remember, you've to create a file with the.js extension.
const isLeapYear = (year) => {
return (
(year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) ||
(year % 100 === 0 && year % 400 === 0)
);
};
const getFebDays = (year) => {
return isLeapYear(year) ? 29 : 28;
};
let calendar = document.querySelector('.calendar');
const month_names = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
let month_picker = document.querySelector('#month-picker');
const dayTextFormate = document.querySelector('.day-text-formate');
const timeFormate = document.querySelector('.time-formate');
const dateFormate = document.querySelector('.date-formate');
month_picker.onclick = () => {
month_list.classList.remove('hideonce');
month_list.classList.remove('hide');
month_list.classList.add('show');
dayTextFormate.classList.remove('showtime');
dayTextFormate.classList.add('hidetime');
timeFormate.classList.remove('showtime');
timeFormate.classList.add('hideTime');
dateFormate.classList.remove('showtime');
dateFormate.classList.add('hideTime');
};
const generateCalendar = (month, year) => {
let calendar_days = document.querySelector('.calendar-days');
calendar_days.innerHTML = '';
let calendar_header_year = document.querySelector('#year');
let days_of_month = [
31,
getFebDays(year),
31,
30,
31,
30,
31,
31,
30,
31,
30,
31,
];
let currentDate = new Date();
month_picker.innerHTML = month_names[month];
calendar_header_year.innerHTML = year;
let first_day = new Date(year, month);
for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
let day = document.createElement('div');
if (i >= first_day.getDay()) {
day.innerHTML = i - first_day.getDay() + 1;
if (i - first_day.getDay() + 1 === currentDate.getDate() &&
year === currentDate.getFullYear() &&
month === currentDate.getMonth()
) {
day.classList.add('current-date');
}
}
calendar_days.appendChild(day);
}
};
let month_list = calendar.querySelector('.month-list');
month_names.forEach((e, index) => {
let month = document.createElement('div');
month.innerHTML = `<div>${e}</div>`;
month_list.append(month);
month.onclick = () => {
currentMonth.value = index;
generateCalendar(currentMonth.value, currentYear.value);
month_list.classList.replace('show', 'hide');
dayTextFormate.classList.remove('hideTime');
dayTextFormate.classList.add('showtime');
timeFormate.classList.remove('hideTime');
timeFormate.classList.add('showtime');
dateFormate.classList.remove('hideTime');
dateFormate.classList.add('showtime');
};
});
(function() {
month_list.classList.add('hideonce');
})();
document.querySelector('#pre-year').onclick = () => {
--currentYear.value;
generateCalendar(currentMonth.value, currentYear.value);
};
document.querySelector('#next-year').onclick = () => {
++currentYear.value;
generateCalendar(currentMonth.value, currentYear.value);
};
let currentDate = new Date();
let currentMonth = { value: currentDate.getMonth() };
let currentYear = { value: currentDate.getFullYear() };
generateCalendar(currentMonth.value, currentYear.value);
const todayShowTime = document.querySelector('.time-formate');
const todayShowDate = document.querySelector('.date-formate');
const currshowDate = new Date();
const showCurrentDateOption = {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long',
};
const currentDateFormate = new Intl.DateTimeFormat(
'en-US',
showCurrentDateOption
).format(currshowDate);
todayShowDate.textContent = currentDateFormate;
setInterval(() => {
const timer = new Date();
const option = {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
};
const formateTimer = new Intl.DateTimeFormat('en-us', option).format(timer);
let time = `${`${timer.getHours()}`.padStart(
2,
'0'
)}:${`${timer.getMinutes()}`.padStart(
2,
'0'
)}: ${`${timer.getSeconds()}`.padStart(2, '0')}`;
todayShowTime.textContent = formateTimer;
}, 1000);
Finally, you have successfully developed a Dynamic Calendar App using HTML, CSS, and JavaScript! In case you encounter any issues or errors with your code, you can easily obtain the source code files by clicking on the download button provided, completely free of charge. The downloaded zip file includes the project folder with all the necessary source code files. With this app, you can create dynamic and interactive calendars for a variety of purposes, whether for personal or professional use. Start exploring the possibilities today with your newly developed Dynamic Calendar App!