README

The event calendar was created with JQuery and Boostrap 5. It does not need any additional CSS file.
The calendar can be included in all Boostrap elements (.card, .navbar, .offcanvas, .dropdowns, ...).

options

full options example

const options = {
    "locale": "de",
    "url": null,
    "width": "310px",
    "icons": {
        "prev": 'bi bi-chevron-left',
        "next": 'bi bi-chevron-right'
    },
    "showTodayHeader": true,
    "eventListContainer": null,
    "classes": {
        "table": 'table table-sm table-borderless',
        "tableHeaderCell": 'text-muted fw-lighter',
        "tableHeaderCellActive": 'text-warning fw-bold',
        "tableData": {
            "all": 'rounded-circle w-100 h-100 border',
            "today": 'text-bg-primary',
            "hover": 'shadow',
            "active": 'border-secondary',
            "inMonth": 'fw-bold',
            "notInMonth": 'text-muted fw-small',
            "eventCounter": 'start-50 bottom-0 translate-middle-x text-bg-danger rounded-pill'
        }
    },
    "event": {
        formatter(event) {
            return drawEvent(event);
        },
        events: { // a list of events for each event
            "click .edit-button"(e, event, $element) { // example 1
                e.preventDefault();
                console.log('event', event, 'clicked on', $element.get(0));
            },
            "change .some-select"(e, event, $element) { // example 2
                e.preventDefault();
                console.log('event', event, 'select object', $element.get(0));
            },
        }
    },
    "popoverConfig": {
        animation: false,
        html: true,
        delay: 400,
        placement: 'top',
        trigger: 'hover'
    },
    "formatPopoverContent"(events) {
        return '';
    },
    "formatNoEvent"(date) {
        return "No appointments on this day";
    },
    "queryParams"(params) {
        params.userId = 1;
        return params;
    }
}

the event object

The event object must have a start and an end attribute

{
  "id": 1,
  "title": "first date",
  "description": null,
  "start": "2022-10-30 10:00:00",
  "end": "2022-10-30 12:30:00",
  "link": "",
  "whatever": "you want..."
}

set defaults

This function can be used to define default values, such as the language before initialization.

// set single property
$.bsCalendar.setDefault(prop, value);
// or multiple properties
$.bsCalendar.setDefaults({
    prop: value,
    prop2: value2
});

methods

$('#calendar').bsCalendar(method, param);

events

$('#calendar')
    .on('eventName', function (e, ...params) {
    });

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

webcito / jquery-bs-calendar

Maintainers

Details