Package Exports

b5r-bonjour
b5r-bonjour/lib/index.esm.js
b5r-bonjour/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (b5r-bonjour) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Bonjour.js – B5R

Accessible and dependency-free calendar JavaScript library: import the code you need and use your UI controls.

Install

$ npm i b5r-bonjour --save

$ yarn add b5r-bonjour

WeekView Example

<!-- Calendar -->
<div id="calendarWeekView"></div>


<!-- Your UI controls -->
<button id="btnToday">Today</button>
<button id="btnPrevious">Previous</button>
<button id="btnNext">Next</button>
<button id="btnAdd">Add event</button>

import { B5rWeekView } from 'b5r-bonjour/lib/week-view';

const CalendarWeekView = new B5rWeekView(
    document.getElementById('calendarWeekView'),
    {
        mode: '7-days',
    }
);

document
    .getElementById('btnToday')
    .addEventListener('click', () => {
        CalendarWeekView.today()
    });


document
    .getElementById('btnPrevious')
    .addEventListener('click', () => {
        CalendarWeekView.previous()
    });

document
    .getElementById('btnNext')
    .addEventListener('click', () => {
        CalendarWeekView.next()
    });

document.getElementById('btnAdd').addEventListener('click', () => {
    CalendarWeekView.setEvents([
        {
            id: '1',
            title: 'Event 1',
            subtitle: 'Subtitle',
            dateRange: {
                start: new Date(),
                end: new Date(new Date().setHours(new Date().getHours() + 2)),
            },
        },
    ]);
});

Contribution

Build Project

$ yarn install
$ yarn run build

Storybook

$ yarn install
$ yarn run storybook

Local Development

$ yarn install
$ yarn run dev