Basic Localizable Calendar In JavaScript - iCalendar

File Size: 16.2 KB
Views Total: 5950
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Basic Localizable Calendar In JavaScript - iCalendar

iCalendar is a really simple jQuery plugin to generate a basic, localizable, navigatable calendar widget on the web page.

How to use it:

1. Load the needed stylesheet javascript-calendar.css for the default styling of the calendar.

<link rel="stylesheet" href="./javascript-calendar.css" />

2. The HTML structure for the calendar widget.

<div class="icalendar">
  <div class="icalendar__month">
    <div class="icalendar__prev" onclick="moveDate('prev')">
    <div class="icalendar__current-date">
      <h2 id="icalendarMonth"></h2>
        <div id="icalendarDateStr"></div>
    <div class="icalendar__next" onclick="moveDate('next')">
  <div class="icalendar__week-days">
    <!-- Localize names of the days of the week -->
  <div class="icalendar__days"></div>

3. Load the JavaScript javascript-calendar.js after jQuery library (slim build) and done.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="./javascript-calendar.js"></script>

4. Localize month names as follows:

let months = [

This awesome jQuery plugin is developed by yubarajrai. For more Advanced Usages, please check the demo page or visit the official website.