How to create calendar using Javascript

Last updated on January 4th, 2023 at 06:12 pm

In this tutorial we are going to show you the code that can be used to create a calendar inside a web page. Simply copy paste the code below to your header / footer / main or side widgets to display calendar.

Feel free to modify the table to add CSS/Style according to your requirement.

<script LANGUAGE="JavaScript">
//Code from Mistonline.in
<!-- Begin
monthnames = new Array(
"January",
"Februrary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0) 
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<center><table border=4 bgcolor=white ");
document.write("bordercolor=#000><font color=>");
document.write("<tr><td colspan=7><center><strong>" 
+ monthnames[thismonth] + " " + thisyear 
+ "</strong></center></td></tr></font>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>"); 
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces ;s++) {
document.write("<td> ");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays .length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
      }
   }
}
//code from Mistonline.in
if (count==thisdate) {
document.write("<font color=blue><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></strong></font>");
}
if (linktrue)
document.write("");
document.write("");
count++;
}
document.write("</linkdays></startspaces></tr>");
document.write("<tr>");
startspaces=0;
}document.write("");
document.write("</tr><tr>");
document.write("<td align=center></td>");
document.write("</tr>");</script>

The Style/CSS I have added for the above script is shown below. Feel free to modify it. Size of the calendar can be changed using this style sheet.

<style>
table {
  border-collapse: collapse;
  width: 50%;
}

th, td {
  text-align: left;
  padding: 8px;
}

td:nth-child(even){background-color: #f2f2f2}
td:hover {background-color: #ddd;}
th {
  background-color: #04AA6D;
  color: white;
}
</style>

Modify this section of the script if you would like to add Monday / Tuesday etc., instead of short names.

document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");

DEMO

8 Comments

  1. xsqwt faoxn

    Hi, you have a great site! I also recommend this site: , thanks!

  2. kaushal

    you have really helped me a lot by doing so. Thanks very much.

  3. prking

    great site will recommend it

  4. outsourcing

    super article will forward it to other programmers.

  5. limo in dc

    nice article

  6. M*** E****

    grate post lov to your blog ..,.,,

  7. Rate md

    I think its a great work done.

  8. LPP

    nice sharing and great post. keep it up!……