Options
You can set following options.
Option | Type | Default | Description |
---|---|---|---|
availabileTimeSlotResource | Array | [] | Set resource data here Details is here |
isMultiple | Boolean | false | Enable to select multiple slots |
navigation | Boolean | true | Display navigation for move from current date to past/future |
prevElem | String | '' | String used to specify an element in querySelector to identify navigation to the past |
nextElem | String | '' | String used to specify an element in querySelector to identify navigation to the future |
startDate | Date | new Date() | Set start date |
slotMinTime | String | '00:00' | String for describe start time by format is hh:mm |
slotMaxTime | String | '24:00' | String for describe end time by format is hh:mm |
slotSpan | Number | 60 | Define slot division time interval |
businessHours | Array | [0, 23] | Multiple types of arrays can be specified Single Array [9, 20] :Same time by everyday Multiple Array [[10, 14], [16, 22]] :Same time every day but with breaks, etc. in between Multiple Array (7 length only) If array length is 7, a different time can be set for each dayIndex 0 is sunday |
locale | String | 'en' | Select locale. Now support only 'en' / 'ja' |
scrollable | Boolean / String | false | Boolean : Change container height to prevent window from scrolling (add space to bottom same as x-axis space) String : Fix container height by specified value |
calendar | Boolean | false | Display datepicker for select start date Now using flatpickr |
iconFilePath | String | './image/' | Path string for icon images base path |
iconCalendar | Object | { fileName: 'calendar.svg', width: 40, height: 40 } | Describe calendar icon use for datepicker filename : icon file name width / height : icon file <img> width / height value |
iconCross | Object | { fileName: 'cross.svg', width: 20, height: 20 } | Describe cross icon use for unselectable time slots filename : icon file name width / height : icon file <img> width / height value |
iconCircle | Object | { fileName: 'cross.svg', width: 20, height: 20 } | Describe cross icon for selectable time slots filename : icon file name width / height : icon file <img> width / height value |
displayAvailableCount | Boolean | false | Display available counts for selectable slot |
displayDateCount | Number | 7 | Define display number of date |
onClickTimeSlot | Function | function(selectedDate) | Method for time slot click Can get selected date for returned value |
onClickNavigator | Function | function(direction) | Method for navigation click Can get direction ( prev / next ) for returned value |