How to Add a Calendar to Blogger

This guide shows how to add a simple monthly calendar to your Blogger blog. It uses one HTML/JavaScript gadget and a small script. No external files are required.

1. Open your Blogger dashboard.

2. Go to Layout.

3. Click Add a Gadget in the area where you want the calendar.

4. Choose HTML/JavaScript.

5. Add the code given below into the content box and click Save.

<div id="btt-basic-calendar"></div>
<script type='text/javascript'>
//<![CDATA[

(function() {
  function generateCalendar(id) {
    var today = new Date();
    var month = today.getMonth();
    var year = today.getFullYear();
    var firstDay = new Date(year, month, 1).getDay();
    var daysInMonth = new Date(year, month + 1, 0).getDate();
    
    var monthNames = [
      "January","February","March","April","May","June",
      "July","August","September","October","November","December"
    ];
    
    var calendar = "<table class='btt-basic-calendar'>";
    calendar += "<thead><tr><th colspan='7'>" + monthNames[month] + " " + year + "</th></tr>";
    calendar += "<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead><tbody><tr>";
    
    // Empty cells before first day
    for (var i = 0; i < firstDay; i++) {
      calendar += "<td></td>";
    }
    
    // Fill days
    var day = 1;
    for (var i = firstDay; i < 7; i++) {
      calendar += "<td" + (day === today.getDate() ? " class='today'" : "") + ">" + day + "</td>";
      day++;
    }
    calendar += "</tr>";
    
    // Remaining weeks
    while (day <= daysInMonth) {
      calendar += "<tr>";
      for (var i = 0; i < 7 && day <= daysInMonth; i++) {
        calendar += "<td" + (day === today.getDate() ? " class='today'" : "") + ">" + day + "</td>";
        day++;
      }
      calendar += "</tr>";
    }
    
    calendar += "</tbody></table>";
    document.getElementById(id).innerHTML = calendar;
  }

  // Run on load if a container with id="btt-basic-calendar" exists
  window.onload = function() {
    var container = document.getElementById("btt-basic-calendar");
    if (container) {
      generateCalendar("btt-basic-calendar");
    }
  };
})();

//]]>
</script>
<style>
.btt-basic-calendar {border-collapse:collapse;width:100%;text-align:center;font-family:Arial,sans-serif;font-size:14px;}
.btt-basic-calendar th {background:#f5f5f5;padding:5px;}
.btt-basic-calendar td {border:1px solid #ddd;padding:5px;}
.btt-basic-calendar .today {background:#ffeb3b;font-weight:bold;}
</style>

Tip: You can add a title for the gadget, such as Calendar, to show a header above the widget.

6. Save your layout and refresh your blog. The current month will appear, and today's date will be highlighted.

Note: This calendar code is not limited to Blogger. You can also use it on any other website by pasting the same snippet into your HTML where you want the calendar to appear.