This article is all you need if you are looking to create a custom calendar which can be extended up to your custom needs. Let’s dive into it following the steps as:
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Cool Calendar</title>
</head>
<body>
<div class="calendar">
</div>
</body>
</html>We need to create and html code and save it as “index.html” or any name you need. This is for development and testing purpose. Later you can use only calendar class with empty div to put it anywhere in the site.
The result for this will be empty as nothing is put inside. Let move to the second step where we will add JavaScript to it to create our Calendar.
Create JavaScript File
No we need to create and empty JavaScript file named as “main.js” or you can have any name as per your needs. For the reference of this tutorial the main.js is placed inside a directory called js. Now let’s add the js into our HTML as follows
<!DOCTYPE html>
<html>
<head>
<title>Cool Calendar</title>
</head>
<body>
<div class="calendar">
</div>
<script src="./js/main.js"></script>
</body>
</html>
As you can see the “main.js” file is added before the closing body tag </body>. This is to help run the JavaScript after the html is loaded so that we have the calendar class div present to be manipulated.
Constants and Variables
In the JavaScript, first we need to add some variables and constant to calculate our calendar properly. Here is how it goes.
var d = new Date();
var today = 0;
const months = [
'January','February','March',
'April','May','June','July','August','September',
'October','November','December'
];
const days = ['Su','Mo','Tu','We','Th','Fr','Sa'];
const daysInMonths = [31,28,31,30,31,30,31,31,30,31,30,31];
var currentDate = d.getDate();
var currentMonthNum = d.getMonth();
var currentMonth = months[currentMonthNum];
var currentYear = d.getFullYear();
var currentDay = days[d.getDay()];
var firstOfMonth = currentYear + "-" + (currentMonthNum + 1) + "-1";
var firstOfMonthD = new Date(firstOfMonth);What these are doing is basically picking todays date into the d variable using javascript date object. And other variables are pretty much self explanatory. The firstOfMonth variable is used to calculate the day of first of the month so that we can know exactly how many columns are needed to stay blank in the start to show it properly.
Query Elements
Now we need to pick the calendar div everywhere it is used in the html file. Here is how we can do that and run a loop to handle all of them.
var elements = document.querySelectorAll(element);
elements.forEach((el, i) => {
//Add Code Here
}The loop is going to handle all the elements one by one and will help to add multiple calendars in the site at the same time.
Calculate Calendar
Following is the code we will be using to add days and weekdays elements into our calendar class div.
// Adding Month Title
var monthTitle = document.createElement("h1");
monthTitle.classList.add("month");
monthTitle.innerHTML = currentMonth + " " + currentYear;
el.appendChild(monthTitle);
//
Adding Weekdays on Top
var weekdays = document.createElement("ul");
weekdays.classList.add("weekdays");
el.appendChild(weekdays);
for (var i = 0; i < 7; i++) {
var weekday = document.createElement('li');
weekday.innerHTML = days[i];
weekdays.appendChild(weekday);
}
//
Adding Dates
var dates = document.createElement("ul");
dates.classList.add("dates");
el.appendChild(dates);
for (var i = 0; i < firstOfMonthD.getDay(); i++) {
var day = document.createElement('li');
dates.appendChild(day);
}
var daysinmonth = daysInMonths[currentMonthNum];
if (currentYear % 4 == 0 && currentMonthNum == 1)
daysinmonth = 29;
for (var i = 1; i <= daysinmonth; i++) {
var day = document.createElement('li');
day.innerHTML = i;
if (i == today && samemonth)
day.classList.add("today");
dates.appendChild(day);
}You may not need to understand this code. If you want to you can easily. Comment if you want a detailed explanation with a video. I can upload one on youtube for this.
JavasScript All Together
Here is a complete file for the “main.js”
function createCalendar(element) {
var d = new Date();
var today = d.getDate();
const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
const days = ['Su','Mo','Tu','We','Th','Fr','Sa'];
const daysInMonths = [31,28,31,30,31,30,31,31,30,31,30,31];
var currentDate = d.getDate();
var currentMonthNum = d.getMonth();
var currentMonth = months[currentMonthNum];
var currentYear = d.getFullYear();
var currentDay = days[d.getDay()];
var firstOfMonth = currentYear + "-" + (currentMonthNum + 1) + "-1";
var firstOfMonthD = new Date(firstOfMonth);
var elements = document.querySelectorAll(element);
elements.forEach((el, i) => {
var monthTitle = document.createElement("h1");
monthTitle.classList.add("month");
monthTitle.innerHTML = currentMonth + " " + currentYear;
el.appendChild(monthTitle);
var weekdays = document.createElement("ul");
weekdays.classList.add("weekdays");
el.appendChild(weekdays);
for (var i = 0; i < 7; i++) {
var weekday = document.createElement('li');
weekday.innerHTML = days[i];
weekdays.appendChild(weekday);
}
var dates = document.createElement("ul");
dates.classList.add("dates");
el.appendChild(dates);
for (var i = 0; i < firstOfMonthD.getDay(); i++) {
var day = document.createElement('li');
dates.appendChild(day);
}
var daysinmonth = daysInMonths[currentMonthNum];
if (currentYear % 4 == 0 && currentMonthNum == 1)
daysinmonth = 29;
for (var i = 1; i <= daysinmonth; i++) {
var day = document.createElement('li');
day.innerHTML = i;
if (i == today)
day.classList.add("today");
dates.appendChild(day);
}
});
}
createCalendar(".calendar");
I have added it to function with the selector as argument to put the calendar into.
Adding Style
The result of this will be normal text. Nothing will feel like a calendar. This is because we need to put some CSS to display things properly. Here is how we can do that. For this tutorial I am using Tailwind CSS. You can read about how to get started with it here.
After installing Tailwind CSS we can use the following code for the Tailwind Input:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.calendar {
@apply bg-black max-w-xl m-auto mt-6 p-6 rounded-lg;
}
.calendar h1.month {
@apply text-center mb-5 text-xl;
}
.calendar .weekdays {
@apply flex flex-wrap text-center bg-white text-black rounded-lg;
}
.calendar .dates {
@apply flex flex-wrap text-center;
}
.calendar .weekdays li {
@apply py-2;
}
.calendar .dates li {
@apply py-2;
}
.calendar .dates li.today {
@apply bg-white text-black rounded-lg;
}
}
.calendar .weekdays li {
width: calc( 100% / 7 );
}
.calendar .dates li {
width: calc( 100% / 7 );
cursor: pointer;
}
And now add the generated output to the html we have as follows:
<!DOCTYPE html>
<html>
<head>
<title>Cool Calendar</title>
<link href="./css/main.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white">
<div class="calendar">
</div>
<script src="./js/main.js"></script>
</body>
</html>As you can see here the main.css file is generated into the CSS. This is because I have used the command in such to get the generated CSS in the specified directory. You can learn more about Tailwind here. Can may notice that I have some Tailwind classes used for the body to make the page look dark. You can design it anyway you want if you are good with CSS or Tailwind CSS or any other framework you prefer in place of Tailwind.
Final Look
With all these efforts we are at the final Look of how the Calendar will be. Here is your hard work paid off:
