Minimal Multilingual Calendar Component For Bootstrap - calendarJs

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.