Easy Event Calendar Plugin For Bootstrap 5 - jQuery bsCalendar

File Size: 20.1 KB
Views Total: 9426
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Easy Event Calendar Plugin For Bootstrap 5 - jQuery bsCalendar

bsCalendar is a jQuery plugin to create flexible, customizable, multilingual, and fully-featured event calendars using Bootstrap 5 framework and Font Awesome 6 iconic font.

Feel free to download and use it in your next project to display events, appointments, tasks, and other schedule-related information in a clean and intuitive calendar interface that is consistent with the look and feel of Bootstrap 5.

How to use it:

1. Load the necessary jQuery library, Bootstrap 5 framework, and Font Awesome 6 iconic font in the document.

<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Download the plugin and load the jquery.bs.calendar.js script after jQuery.

<script src="/dist/jquery.bs.calendar.js"></script>

3. Add the data-bs-toggle="calendar" attribute to the DIV container in which the plugin generate the event calendar.

<div data-bs-toggle="calendar" id="example">

4. Fetch events from an external JSON file.

<div data-bs-toggle="calendar" id="example" data-bs-target="events.json">
// events.json
    "id": 1,
    "title": "Event 1!",
    "description": "Event description 1",
    "start": "2022-10-10 10:00:00",
    "end": "2022-10-27 12:30:00",
    "link": ""
    "id": 2,
    "title": "Event 2!",
    "description": "Event description 1",
    "start": "2023-10-10 10:00:00",
    "end": "2023-10-27 12:30:00",
    "link": ""
  // ...

5. Initialize the bsCalendar plugin and done.

  // options here

6. All default plugin options.

  locale: 'en',
  url: null, // save as data-bs-target
  width: '300px',
  icons: {
    prev: 'fa-solid fa-arrow-left fa-fw',
    next: 'fa-solid fa-arrow-right fa-fw',
    eventEdit: 'fa-solid fa-edit fa-fw',
    eventRemove: 'fa-solid fa-trash fa-fw'
  showTodayHeader: true, 
  showEventEditButton: false,
  showEventRemoveButton: false,
  showPopover: true, 
  popoverConfig: {
    animation: false,
    html: true,
    delay: 400,
    placement: 'top',
    trigger: 'hover'
  formatPopoverContent: function (events) {
    return '';
  formatEvent: function (event) {
    return drawEvent(event);
  formatNoEvent: function (date) {
    return drawNoEvent(date);
  queryParams: function (params) {
    return params;
  onClickEditEvent: function (e, event) {
  onClickDeleteEvent: function (e, event) {

7. You can also set options globally.

$.bsCalendar.setDefault(option, value);

8. Refresh the calendar manually.


9. Event handlers.

  .on('init', function (e) {})
  .on('change-day', function (e, date, events) {})
  .on('events-loaded', function (e, events) {})
  .on('show-event-list', function (e, events) {})
  .on('shown-event-list', function (e, events) {})
  .on('click-current-month', function (e) {})
  .on('click-prev-month', function (e) {})
  .on('click-next-month', function (e) {})
  .on('change-month', function (e) {})



  • Update Bootstrap and remove deprecated features


  • Add custom event list container and CSS width validity check
  • Remove unused isValidCssWidth function and refactor eventListContainer


  • Simplify CSS in calendar JavaScript file


  • Set card width to 100% in calendar JavaScript


  • Refactor calendar.js for efficient execution and UI updates


  • Add calendar styling classes and update popover feature


  • Code refactor

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