<timeslot-picker>

NOT YET PRODUCTION READY

A polymer element for choosing timeslots. Timeslots can be variable.

The element can be used to display a slider with timeslots at 30 minutes interval. User can select a slot (Max 6 units). An overlay is shown as slider to select slots

As Polymer 3 demos are not working right now, Please check the demo here.

Properties

Property	type	required	reflected *	notify *	description
`bookings`	Array	yes	false	false	Set of slots already booked
`chosenStartTime`	String	no	true	true	Starting time slot value
`chosenEndTime`	String	no	true	true	Ending time slot value
`chosenUnits`	Number	no	true	true	Number of slots chosen
`noCloseOnOverlayTap`	Boolean	no	false	disable the closing of slider on overlay tap
`maxLimit`	Number	no	false	Maximum number of slots allowed to book. `default value = 6`

bookings property must be an Array of meetings

    bookings: [{
            meetingName: 'Sai\'s Meeting',
            meetingId: 'bbcks',
            meetingStartTime: '3:00 PM',
            units: 4
          },
          {
            meetingName: 'Ranveer\'s Meeting',
            meetingId: 'wqqps',
            meetingStartTime: '7:00 PM',
            units: 2
          },
          {
            meetingName: 'Daman\'s Meeting',
            meetingId: 'kisoe',
            meetingStartTime: '8:00 PM',
            units: 1
          }
        ]

* Please note:

Property with notify: true fires a property-changed event when the value is changed. Example: PropertyName fires property-name-changed event on value change

Reflected attributes updates the element with property attribute when the value changes. Example: PropertyName updates the attribute as property-name="value"

Methods

Method Name	Arguments	Description
`open()`	`slotNumberToBeSelected`: Number	Opens the slider on the mentioned slot
`close()`	`undefined`	Closes the slider

Events

Event	Detail Object	Description
close	not required	Closes the Slider
open	slot: `<number>`	Opens the slider at the mentioned slot

dispatch Event to this element Example:

document.querySelector('timeslot-picker').dispatchEvent(new CustomEvent('open', {
    detail: {
          slot: 2
        }
}))

Styling

CSS variable	description	default
`--timeslot-unit-height`	Timeslot unit height	50px
`--timeslot-unit-width`	Timeslot unit width	50px
`--timeslot-available-bg`	Timeslot Available background color	#fff
`--timeslot-disabled-bg`	Timeslot Available background color	#fff
`--timeslot-unavailable-bg`	Timeslot Unavailable background color	#666
`--timeslot-font-size`	Timeslot indicators and slots text size	10px
`--timeslot-picker-tooltip-background`	Tooltip bubble background color	#000
`--timeslot-picker-tooltip-color`	Tooltip bubble text color	#fff
`--timeslot-picker-scroll-btn-background`	Left and right scroll buttons background	#fff
`--timeslot-picker-scroll-btn-color`	Left and right scroll text background	#000
`--timeslot-overlay-background`	Background color for overlay over the timeslot units	base64PNG
`--timeslot-overlay-container-background`	Background color for the container which contains slider	#777
`--timeslot-overlay-container-border-left`	Timeslot indicators left border	none
`--timeslot-overlay-container-border-right`	Timeslot indicators right border	none
`--timeslot-slider-thumb-background`	Slider thumb backgroud color	base64SVG
`--timeslot-unit-border`	Timeslot Unit Border	1px solid #000
`--timeslot-border-radius`	Timeslot Unit border radius	0
`--timeslot-picker-scroll-left-btn-border-radius`	Left Scroll button border	0
`--timeslot-picker-scroll-right-btn-border-radius`	Right Scroll button border	0
`--timeslot-picker-scroll-btn-font`	font shorthand for Scroll Button	none
`--timeslot-overlay-indicators-color`	Text color for text in overlay slider	#000
`--timeslot-unit-text-margin`	Margin for Text being displayed in a timeslot	2px

npmjs.org

github.com

webcomponents.org