Minimal Multilingual Calendar Component For Bootstrap - calendarJs
File Size: | 6.55 KB |
---|---|
Views Total: | 2466 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A tiny and easy-to-implement jQuery plugin that helps you generate a minimal, clean, multilingual calendar component in Bootstrap projects.
Keyboard Interactions:
- Left/Right: Switch between months
- Up/Down: Switch between years
How to use it:
1. Load the calendarJs plugin's files into your Bootstrap page.
<!-- Dependencies --> <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script> <!-- calendarJs --> <link rel="stylesheet" href="css/style.css" /> <script src="js/calendar.js"></script>
2. Create a container in which you want to display the calendar.
<div id="calendar-container"></div>
3. Initialize the plugin to generate a default calendar on the page.
$("#calendar-container").calendarJs({ // options here });
4. Change the language of the calendar. Default: 'en'.
$("#calendar-container").calendarJs({ lang : "fr" });
5. Determine whether or not to enable keyboard interactions. Default: 'false'.
$("#calendar-container").calendarJs({ withArrows : true });
6. Add more lanugages to the calendar as follows.
function initDaysNames() { var daysNames = []; daysNames.push({"fr": "Lundi", "en": "Monday"}); daysNames.push({"fr": "Mardi", "en": "Tuesday"}); daysNames.push({"fr": "Mercredi", "en": "Wednesday"}); daysNames.push({"fr": "Jeudi", "en": "Thursday"}); daysNames.push({"fr": "Vendredi", "en": "Friday"}); daysNames.push({"fr": "Samedi", "en": "Saturday"}); daysNames.push({"fr": "Dimanche", "en": "Sunday"}); return daysNames; } function initMonthNames() { var monthNames = []; monthNames.push({"fr": "Janvier", "en": "January"}); monthNames.push({"fr": "Février", "en": "February"}); monthNames.push({"fr": "Mars", "en": "March"}); monthNames.push({"fr": "Avril", "en": "April"}); monthNames.push({"fr": "Mai", "en": "May"}); monthNames.push({"fr": "Juin", "en": "June"}); monthNames.push({"fr": "Juillet", "en": "July"}); monthNames.push({"fr": "Aout", "en": "August"}); monthNames.push({"fr": "Septembre", "en": "September"}); monthNames.push({"fr": "Octobre", "en": "October"}); monthNames.push({"fr": "Novembre", "en": "November"}); monthNames.push({"fr": "Décembre", "en": "December"}); return monthNames; }
This awesome jQuery plugin is developed by martini224. For more Advanced Usages, please check the demo page or visit the official website.