Skip to main content

Options

You can set following options.

OptionTypeDefaultDescription
availabileTimeSlotResourceArray[]Set resource data here
Details is here
isMultipleBooleanfalseEnable to select multiple slots
navigationBooleantrueDisplay navigation for move from current date to past/future
prevElemString''String used to specify an element in querySelector to identify navigation to the past
nextElemString''String used to specify an element in querySelector to identify navigation to the future
startDateDatenew Date()Set start date
slotMinTimeString'00:00'String for describe start time by format is hh:mm
slotMaxTimeString'24:00'String for describe end time by format is hh:mm
slotSpanNumber60Define slot division time interval
businessHoursArray[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) 
[
  [[10,  24]],
  [[10,  14], [16, 22]],
  [[10,  14], [16, 22]],
  [[10,  14], [16, 22]],
  [[10,  14], [16, 22]],
  [[10,  14], [16, 22]],
  [[10,  24]]
]
If array length is 7, a different time can be set for each day
Index 0 is sunday
localeString'en'Select locale.
Now support only 'en' / 'ja'
scrollableBoolean / StringfalseBoolean : Change container height to prevent window from scrolling (add space to bottom same as x-axis space)
String : Fix container height by specified value
calendarBooleanfalseDisplay datepicker for select start date
Now using flatpickr
iconFilePathString'./image/'Path string for icon images base path
iconCalendarObject{
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
iconCrossObject{
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
iconCircleObject{
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
displayAvailableCountBooleanfalseDisplay available counts for selectable slot
displayDateCountNumber7Define display number of date
onClickTimeSlotFunctionfunction(selectedDate)Method for time slot click
Can get selected date for returned value
onClickNavigatorFunctionfunction(direction)Method for navigation click
Can get direction (prev / next) for returned value