<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