JS Booking Calendar

Heavily customizable booking calendar in gantt style

This is based on the work of Frappe Gantt

### Install ``` npm install js-booking-calendar ``` ### Usage Include it in your HTML: ``` import Gantt from "js-booking-calendar"; ``` Configuration: ```js const properties = [ { 'name': 'Group 1', 'background_color': 'red', 'bookings': [ { id: '1', start: '2020-12-01', end: '2020-12-01', name: 'Foo', description: 'Description', }, { id: '2', start: '2020-12-02', end: '2020-12-02', name: 'Bar', description: 'Description', }, ] } ]; const options = { on_click: function (task) { console.log(task); }, on_date_change: function(task, start, end, lastScrollXPosition) { console.log(task); }, on_progress_change: function(task, progress) { console.log(task, progress); }, on_view_change: function(mode) { console.log(mode); }, on_date_added: function (start, end, property, propertyIdx, xPosition, yPosition){ // executed with double click on column console.log('start', start); console.log('end', end); console.log('property', property); console.log('propertyIdx', propertyIdx); console.log('xPosition', xPosition); console.log('yPosition', yPosition); }, header_height: 50, column_width: 30, step: 24, view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'], popup_trigger: 'mouseover', bar_height: 20, bar_corner_radius: 3, arrow_curve: 5, padding: 18, view_mode: 'Day', date_format: 'YYYY-MM-DD', custom_popup_html: null, start_date: "2020-12-01", end_date: "2021-03-31", show_label: true, animations_active: false, init_scroll_position: 0, custom_click_on_bar: function (task) { // only works if popup_trigger is not set to "click" console.log('custom_click_on_bar', task) } }; new Gantt("#gantt", properties, options); ``` License: MIT