0.0.37 • Published 1 year ago
available-time-slots v0.0.37
available-time-slots
Overview
UI library of selectable available time slots
Usage
<link rel="stylesheet" href="../dist/css/styles.css">
<!-- if calendar option is true -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<div id="app"></div>
<script src="../dist/js/main.js"></script>
<script src="../dist/js/locales.js"></script>
<!-- if calendar option is true -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
target = document.getElementById('app');
AvailableTimeSlots = new AvailableTimeSlots(target);
AvailableTimeSlots.init();
</script>
Options
Default options are following.
prevHtml = '<div id="ats-prev-week" class="ats-nav__item ats-nav__item__prev"><</div>';
nextHtml = '<div id="ats-next-week" class="ats-nav__item ats-nav__item__next">></div>';
{
availabileTimeSlotResource: '',
availabileTimeSlots: [[], [], [], [], [], [], []],
isMultiple: false,
navigation: true,
prevElem: '',
nextElem: '',
selectedDates: [],
startDate: new Date(),
slotMinTime: '00:00',
slotMaxTime: '24:00',
slotSpan: 30,
businessHours: [0, 23],
locale: 'en',
scrollable: false,
calendar: false,
iconFilePath: './image/',
iconCalendar: {
fileName: 'calendar.svg',
width: 40,
height: 40
},
iconCross: {
fileName: 'cross.svg',
width: 20,
height: 20
},
iconCircle: {
fileName: 'circle.svg',
width: 20,
height: 20
},
displayAvailableCount: false,
onClickTimeSlot: function(selectedDateArray){},
onClickNavigator: function(clickNavigationDirection){}
}
Dependency
If calendar
option is true
, nedd to use flatpickr
More information
Official Site is here
Author
Licence
0.0.37
1 year ago
0.0.33
2 years ago
0.0.34
2 years ago
0.0.35
2 years ago
0.0.36
2 years ago
0.0.20
2 years ago
0.0.21
2 years ago
0.0.22
2 years ago
0.0.23
2 years ago
0.0.24
2 years ago
0.0.25
2 years ago
0.0.30
2 years ago
0.0.31
2 years ago
0.0.27
2 years ago
0.0.28
2 years ago
0.0.29
2 years ago
0.0.18
2 years ago
0.0.19
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago