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">
  ...
</div>

4. Fetch events from an external JSON file.

<div data-bs-toggle="calendar" id="example" data-bs-target="events.json">
  ...
</div>

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

$('#example').bsCalendar({
  // options here
});

6. All default plugin options.

$('#example').bsCalendar({
  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.

$('#example').bsCalendar('refresh');

9. Event handlers.

$('#example')
  .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) {})

Changelog:

2024-04-05

• Simplify CSS in calendar JavaScript file

2024-03-05

• Set card width to 100% in calendar JavaScript

2023-12-21

• Refactor calendar.js for efficient execution and UI updates

2023-12-18

• Add calendar styling classes and update popover feature

2023-12-15

• 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.