https://github.com/ysakmrkm/available-time-slots

UI library of selectable available time slots
https://github.com/ysakmrkm/available-time-slots

javascript js library reservation time-slot-booking time-slot-service time-slots ui user-interface

Last synced: 2 days ago
JSON representation

UI library of selectable available time slots

• Host: GitHub
• URL: https://github.com/ysakmrkm/available-time-slots
• Owner: ysakmrkm
• License: mit
• Created: 2022-02-18T02:56:54.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-01T07:41:02.000Z (almost 2 years ago)
• Last Synced: 2024-10-07T11:13:47.308Z (about 1 month ago)
• Topics: javascript, js, library, reservation, time-slot-booking, time-slot-service, time-slots, ui, user-interface
• Language: CoffeeScript
• Homepage:
• Size: 711 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# available-time-slots

[![Build](https://github.com/ysakmrkm/available-time-slots/actions/workflows/test.yml/badge.svg)](https://github.com/ysakmrkm/available-time-slots/actions/workflows/test.yml)

![gif](https://github.com/ysakmrkm/available-time-slots/blob/main/image/screenshot.gif)

## Overview

UI library of selectable available time slots

## Usage

```html



	target = document.getElementById('app');

	AvailableTimeSlots = new AvailableTimeSlots(target);

	AvailableTimeSlots.init();

```

## Options

Default options are following.

```javascript

prevHtml = '
<
';

nextHtml = '
>
';

{

	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](https://ysakmrkm.github.io/available-time-slots/)

## Author

[twitter](https://twitter.com/ysakmrkm)

## Licence

[MIT](https://github.com/ysakmrkm/available-time-slots/blob/main/LICENSE)