ysakmrkm/available-time-slots

UI library of selectable available time slots

available-time-slots

Overview

UI library of selectable available time slots

Usage

<link rel="stylesheet" href="../dist/css/styles.css">

<div id="app"></div>

<script src="../dist/js/main.js"></script>
<script src="../dist/js/locales.js"></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){}
}

More information

Official Site is here

Author

twitter

Licence

MIT

available-time-slots's Issues

Sticky header not stuck at top

Add option for custom navigation element

Support JavaScript frameworks

For framework learning

• Vue (most interested in)
• React
• Angular (low priority)

Selection state is removed

When the view is updated, the selection state is removed.

Add holiday

Now support JP only.
So, need to support Worldwide.

endDate

There is no setting for end date now.
Need to add endDate same as startDate.

Allow for more complex datas

Not only time, count and display data object(or array)

Add other views

• Show only available time text

Add default option for input

Support TypeScript

For TypeScript learning

Support multiple business hours

• AM & PM
• Different from day to day

Enable to change icon file path

Do not change scroll position when after rending

Partial rendering

Currently render() update all DOMs
Change to only update time slots

Change display date number

Now display 7 days.

Support multiple languages

Need support multiple languages

Change setting values before some events occurs

Update README

• option summary
• option details

When holidays are closed

Can't set up business holiday for businessHours now

Enable to resize when window size changed

Date selection via calendar

Need to click many times to select weeks later.

Allow scroll time line into window height

If have a lot of time slots, I must to scroll window because of total height is too high.

Want to use any other datepicker libraries

Resolve dependency

Need to change data acquisition method

The process of randomizing data is hard-coded.
The data acquisition method needs to be changed.

available-time-slots/dist/js/main.js

Lines 193 to 196 in f732b93

	data = JSON.parse(request.responseText);
	data.data = data.data.sort(function() {
	return Math.random() - 0.5;
	});

Add navigation display option

When calendar used, next / prev navigation buttons are not important for move month.

Display number of available slots

Not only can select or not, display number of available slot.