Interactive Bootstrap 5 Occasion Calendar Plugin – jQuery bs-calendar

bsCalendar is an easy but strong jQuery plugin for creating responsive, customizable, full-featured occasion calendars styled with the most recent Bootstrap 5 framework.

It handles the fundamentals nicely: rendering the calendar grid, switching calendar views, primary localization, and fetching occasion knowledge from a backend.

You get controls for navigation, including occasions (by clicking empty areas), and interacting with present occasions (click on to update/take away). 

Key Options:

• Bootstrap 5 based mostly: Makes use of Bootstrap’s grid, elements, and styling for a constant look.
• A number of Views: Change between day, week, month, and 12 months shows.
• Dynamic Information Loading: Fetch appointments/occasions from a backend API utilizing the url choice.
• Interactive Occasions: Click on empty cells so as to add occasions, click on present occasions for potential updates/removals (requires customized dealing with).
• Customizable Choices: Configure locale, begin day of the week, colours, icons, accessible views, and extra.
• Gentle/Darkish Mode: Adapts to Bootstrap’s coloration modes.
• Localization: Translate labels like ‘Day’, ‘Week’, ‘At the moment’, and so forth., by way of the translations choice.
• Search Performance: Primary appointment search functionality (if enabled).
• API Strategies: Programmatically refresh, clear, replace choices, or destroy the calendar occasion.

The way to use it:

1. To get began, be sure you have jQuery library, Bootstrap framework, and Bootstrap Icons loaded in your doc.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap -->
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Bootstrap Icons -->
<hyperlink rel="stylesheet" href="/path/to/cdn/bootstrap-icons.min.css">

2. Obtain the plugin and add the ‘bs-calendar.min.js’ script to the doc.

<script src="/path/to/dist/bs-calendar.min.js"></script>

3. Create a container to carry the occasion calendar.

<div id="myCalendar">
</div>

4. Initialize bs-calendar with default choices.

$(doc).prepared(operate() {
  $('#myCalendar').bsCalendar({
    // choices right here
  });
});

5. Add customized holidays to the calendar. It additionally helps for public holidays API integration. See ‘openHolidays.js’ within the zip for particulars.

$('#myCalendar').bsCalendar({
  holidays: operate (knowledge) {
    return new Promise((resolve, reject) => {
      Extract the beginning and finish years from the enter
      const startYear = new Date(knowledge.begin).getFullYear();
      const endYear = new Date(knowledge.finish).getFullYear();
      const locale = getLanguageAndCountry(knowledge.locale);
      const openHolidays = new OpenHolidays();
      openHolidays.getPublicHolidays(locale.nation, startYear + '-01-01', endYear + '-12-31', locale.language)
      .then(response => {
        console.log(response);
        const holidays = [];
        for (const vacation of response) {
          holidays.push({
            startDate: vacation.startDate,
            endDate: vacation.endDate,
            title: vacation.title[0].textual content,
          });
        }
        resolve(holidays); 
      })
      .catch(error => {
        reject(error); 
      });
    });
  },
});

6. Fetch knowledge dynamically by way of the url choice. When the view adjustments or the calendar hundreds initially, the interior fetchAppointments operate kicks in:

• It determines the required date vary (fromDate, toDate) based mostly on the present view or the 12 months for the 12 months view. If looking out, it makes use of the search time period.
• It constructs a requestData object containing these parameters (view, fromDate, toDate or 12 months or search).
• If queryParams is outlined, it calls that operate to doubtlessly add extra knowledge to the request (like person IDs, filters).
• It makes an AJAX request (or calls your offered operate) utilizing the url and the requestData. It expects a JSON response containing an array of appointment objects, together with id, title, begin, finish, allDay, coloration, and so forth.
• On success, it processes the returned appointments and renders them onto the calendar grid. It positions them based mostly on their begin/finish dates and occasions.
• Error dealing with is included, and debug: true helps hint this course of.

$(doc).prepared(operate() {
  $('#myCalendar').bsCalendar({
    url: url
  });
});

// Instance
async operate url(question) {
  console.log('index url', question);
  await sleep(Math.ground(Math.random()));
  return new Promise((resolve, reject) => {
    strive {
      const fromDate = question.fromDate ? new Date(`${question.fromDate}T00:00:00`) : null;
      const toDate = question.toDate ? new Date(`${question.toDate}T23:59:59`) : null;
      const search = question.search;
      if (search && !fromDate && !toDate) {
        const restrict = question.restrict;
        const offset = question.offset;
        return resolve(getAppointmentsBySearch(search, restrict, offset));
      }

      if (question.view === '12 months') {
        return resolve(generateDates(question.12 months));
      }
      const appointments = generateRandomAppointments(
        (fromDate || new Date('1970-01-01T00:00:00')).toISOString(),
        (toDate || new Date('9999-12-31T23:59:59')).toISOString(),
        question.view
      );
      const filteredAppointments = appointments.filter(appointment => );
      if (search) {
        const searchFilteredAppointments = filteredAppointments.filter(appointment => {
          return appointment.title.toLowerCase().consists of(search.toLowerCase());
        });
        return resolve(searchFilteredAppointments);
      }
      resolve(filteredAppointments);
    } catch (error) {
        reject(error);
    }
  });
}

7. Extra configuration choices:

$('#myCalendar').bsCalendar({
  locale: 'en-GB',
  title: 'Calendar',
  startWeekOnSunday: true,
  navigateOnWheel: true,
  rounded: 5, // 1-5
  search: {
    restrict: 10,
    offset: 0
  },
  startDate: new Date(),
  startView: 'month', // day, week, month, 12 months
  defaultColor: 'main',
  views: ['year', 'month', 'week', 'day'],
  holidays: 'openHolidayApi', // 'nager.date'
  translations: {
    day: 'Day',
    week: 'Week',
    month: 'Month',
    12 months: '12 months',
    at present: 'At the moment',
    appointment: 'Appointment',
    search: 'Sort and press Enter',
    searchNoResult: 'No appointment discovered'
  },
  icons: {
    day: 'bi bi-calendar-day',
    week: 'bi bi-kanban',
    month: 'bi bi-calendar-month',
    12 months: 'bi bi-calendar4',
    add: 'bi bi-plus-lg',
    menu: 'bi bi-list',
    search: 'bi bi-search',
    prev: 'bi bi-chevron-left',
    subsequent: 'bi bi-chevron-right',
    hyperlink: 'bi bi-box-arrow-up-right',
    appointment: 'bi bi-clock',
    appointmentAllDay: 'bi bi-brightness-high'
  },
  url: null,
  queryParams: null,
  topbarAddons: null,
  sidebarAddons: null,
  debug: false,
  formatter: {
    day: formatterDay,
    week: formatterWeek,
    month: formatterMonth,
    window: formatInfoWindow,
    length: formatDuration,
  }
});

8. API strategies.

// Reloads the present view knowledge.
$('#myCalendar').bsCalendar('refresh');

// Removes all displayed appointments.
$('#myCalendar').bsCalendar('clear');

// Change choices on the fly.
$('#myCalendar').bsCalendar('updateOptions', { startView: 'week' });

// Take away the calendar occasion and clear up.
$('#myCalendar').bsCalendar('destroy');

// Leap to a particular date.
$('#myCalendar').bsCalendar('setDate', '2025-04-11');

// Leap again to the present date.
$('#myCalendar').bsCalendar('setToday');

9. Occasion handlers.

$('#myCalendar').on('add.bs.calendar', operate (occasion, knowledge) {
  // ...
})

$('#myCalendar').on('edit.bs.calendar', operate (occasion, appointment, extras) {
  // ...
})

$('#myCalendar').on('view.bs.calendar', operate (occasion, view) {
  // ...
})

Changelog:

2025-04-12

• Add help for college holidays in calendar

This superior jQuery plugin is developed by ThomasDev-de. For extra Superior Usages, please test the demo web page or go to the official web site.