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

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>❮</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>❯</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.