PHPackages                             webcito/jquery-bs-calendar - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. webcito/jquery-bs-calendar

ActiveLibrary

webcito/jquery-bs-calendar
==========================

description

1.0.4(1y ago)14203↓50%3proprietary

Since Jun 23Pushed 1y ago3 watchersCompare

[ Source](https://github.com/ThomasDev-de/jquery-bs-calendar)[ Packagist](https://packagist.org/packages/webcito/jquery-bs-calendar)[ RSS](/packages/webcito-jquery-bs-calendar/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (5)Dependencies (4)Versions (6)Used By (0)

jquery-bs-calendar
==================

[](#jquery-bs-calendar)

[![promo image](demo/img/promo.png)](demo/img/promo.png)

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

[](#options)

proptypedefaultdescriptionlocale`string``'en'`Sets the language of days and monthsurl`null`|`string`| `function``null`When a function is implemented, an array of event objects is expected. A string represents the path to the server. If the value remains at `zero`, no appointments will be loaded.queryParams`function`see example belowAdditional parameters can be sent to the server here. From and To are always sent.width`string``'310px'`Sets the width of the container. All subelements are calculated from the width of the container.icons`object`see example belowHere you can change the icon classes. Bootstrap icons are set as default.showTodayHeader`boolean``true`Show or hide the header of the calendar, which contains information about today.eventListContainer`null`|`string``null`If a selector is specified here, the appointment list will be transferred to this selector.classes`object`see example belowHere you can set your own CSS classes for the elements in the calendar to stylishly adapt your container to your page. The calendar is built with a table and can therefore easily inherit the themes from Bootstrap.event`object`see example belowThe object `event` expects 2 properties. Firstly the function `formatted(event){}` which expects a string as return and secondly the event handler list as object\[\]popoverConfig`object`|`null`see example belowThe popover configuration can be set here, more at . If the value is `null`, no popover will be initialized.formatPopoverContent`function`see example belowThe content of the popover can be formatted here. The condition for this is that the showPopover attribute is set to true.formatNoEvent`function`see example belowThe display when there are no appointments on the selected date.### full options example

[](#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)

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

[](#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

[](#methods)

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

methodNameParamsDescriptionrefresh-Reloads the datesupdateOptions(object) {new:options}Updates the options of the calendarsetDate(string) '2024-12-24'Switches the calendar to the month given in the date.### events

[](#events)

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

eventNameparamsDescriptioninit-Fires when the calendar is fully initializedchange-daydate, eventsFires when a date was clicked manuallyevents-loadedeventsFires when the data has been loaded from the servershow-event-listeventsFires before building the appointment listshown-event-listeventsFires when the appointment list has been created and displayedclick-current-month-Fires when the button for the current month is pressedclick-prev-month-Fires when the button for the previous month is pressedclick-next-month-Fires when the button for the next month has been pressedchange-month-Fires when the month is changed```
$('#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) {
    })
```

### Satisfied customers of the plugin

[](#satisfied-customers-of-the-plugin)

   [![](https://camo.githubusercontent.com/98bd80f3cee7491b6bfb42377c7df416f5e077466d1510649a15d01f999f0f4b/68747470733a2f2f7777772e736368756c7a2d766f6e2d7468756e2e64652f66696c65732f7468656d652d7376742f696d672f536368756c7a2d766f6e2d5468756e2d4c6f676f373070782e737667)](https://camo.githubusercontent.com/98bd80f3cee7491b6bfb42377c7df416f5e077466d1510649a15d01f999f0f4b/68747470733a2f2f7777772e736368756c7a2d766f6e2d7468756e2e64652f66696c65732f7468656d652d7376742f696d672f536368756c7a2d766f6e2d5468756e2d4c6f676f373070782e737667)   Schulz von Thun Institut
 für Kommunikation     [![](https://camo.githubusercontent.com/bd1ea511af19d7e2a63eeb7f1a225529c452a53680832a35319686cd4f11ce25/68747470733a2f2f7065727370656b746f2d636f616368696e672e64652f696d672f6c6f676f2f7065727370656b746f2d6c6f676f2d56322d6461726b2e706e67)](https://camo.githubusercontent.com/bd1ea511af19d7e2a63eeb7f1a225529c452a53680832a35319686cd4f11ce25/68747470733a2f2f7065727370656b746f2d636f616368696e672e64652f696d672f6c6f676f2f7065727370656b746f2d6c6f676f2d56322d6461726b2e706e67)   Perspekto Coaching GmbH
 Institut für berufliche Entwicklung     [![](https://camo.githubusercontent.com/3d7d165935cd5ca79554cca1a024fcc0e3a642de2148d55f0d2bd511a1686a83/68747470733a2f2f756e6971756f2e7765626369746f2e64652f696d616765732f756e6971756f5f6c6f676f5f76312e302e737667)](https://camo.githubusercontent.com/3d7d165935cd5ca79554cca1a024fcc0e3a642de2148d55f0d2bd511a1686a83/68747470733a2f2f756e6971756f2e7765626369746f2e64652f696d616765732f756e6971756f5f6c6f676f5f76312e302e737667)   Uniquo Coaching     [![](https://camo.githubusercontent.com/cb69c3ef78e2fefe42713582c9e2c74fd568cd8b65399716ffba1aefd2400b33/68747470733a2f2f7065727370656b746f2d636f616368696e672e73797374656d732f696d672f7765626369746f2d6c6f676f2d6d642e737667)](https://camo.githubusercontent.com/cb69c3ef78e2fefe42713582c9e2c74fd568cd8b65399716ffba1aefd2400b33/68747470733a2f2f7065727370656b746f2d636f616368696e672e73797374656d732f696d672f7765626369746f2d6c6f676f2d6d642e737667)   webcito UG

###  Health Score

30

—

LowBetter than 64% of packages

Maintenance34

Infrequent updates — may be unmaintained

Popularity21

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity44

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~16 days

Total

5

Last Release

621d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81)

---

Top Contributors

[![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (59 commits)")

---

Tags

bootstrap5calendareventsjquery-plugin

### Embed Badge

![Health badge](/badges/webcito-jquery-bs-calendar/health.svg)

```
[![Health](https://phpackages.com/badges/webcito-jquery-bs-calendar/health.svg)](https://phpackages.com/packages/webcito-jquery-bs-calendar)
```

###  Alternatives

[orchid/platform

Platform for back-office applications, admin panel or CMS your Laravel app.

4.8k2.5M59](/packages/orchid-platform)[jason-munro/cypht

Lightweight Open Source webmail written in PHP and JavaScript

1.5k146.0k](/packages/jason-munro-cypht)[serhioromano/bootstrap-calendar

Bootstrap full view calendar.

3.0k5.9k2](/packages/serhioromano-bootstrap-calendar)[mapbender/mapbender

Mapbender library

10117.4k5](/packages/mapbender-mapbender)[eveseat/web

SeAT Web Interface

2723.2k135](/packages/eveseat-web)[tatter/frontend

Opinionated suite of frontend tech for CodeIgniter 4

125.3k](/packages/tatter-frontend)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)