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

twitter

Licence

MIT