Simple Calendar in JS with jQuery and Bootstrap v4

CalendarJs is a simple js calendar with jQuery and Bootstrap v4 that helps you create a simple, clean, and multilingual calendar component in Bootstrap projects.

bootstrap 4 calendar widget, bootstrap responsive calendar, jquery calendars, month calendar jquery, bootstrap event calendar download, best jquery calendar plugin with events

How to make use of it:

1. Load the calendarJs plugin’s files into your Bootstrap web 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 during which you need to display the calendar.

<div id="calendar-container"></div>

3. Initialize the plugin to generate a default calendar on the web page.

$("#calendar-container").calendarJs({
  // options here
});

4. Change the language of the calendar.

$("#calendar-container").calendarJs({
  lang : "fr"
});

5. Determine whether or to not enable keyboard interactions.

$("#calendar-container").calendarJs({
  withArrows : true
});

6. Add more languages 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;
}

Minimal Multilingual Calendar Component, calendarJs Plugin/Github, responsive event calendar jquery


See Demo And Download

Official Website(martini224): Click Here

This superior jQuery/javascript plugin is developed by martini224. For extra Advanced Usage, please go to the official website.

Share