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')">
      <span>&#10094</span>
    </div>
    <div class="icalendar__current-date">
      <h2 id="icalendarMonth"></h2>
      <div>
        <div id="icalendarDateStr"></div>
      </div>
    </div>
    <div class="icalendar__next" onclick="moveDate('next')">
      <span>&#10095</span>
    </div>
  </div>
  <div class="icalendar__week-days">
    <!-- Localize names of the days of the week -->
    <div>Sun</div>
    <div>Mon</div>
    <div>Tue</div>
    <div>Wed</div>
    <div>Thu</div>
    <div>Fri</div>
    <div>Sat</div>
  </div>
  <div class="icalendar__days"></div>
</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 = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
];

---

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