README

事件日历是用JQuery和Bootstrap 5创建的，不需要额外的CSS文件。
该日历可以包含在所有Bootstrap元素中（.card, .navbar, .offcanvas, .dropdowns, ...）。

选项

完整选项示例

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;
    }
}

事件对象

事件对象必须具有开始和结束属性

{
  "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 single property
$.bsCalendar.setDefault(prop, value);
// or multiple properties
$.bsCalendar.setDefaults({
    prop: value,
    prop2: value2
});

方法

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

事件

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

插件满意的客户