timeslot-picker v0.9.24

\<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

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

Events

dispatch Event to this element Example:

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

Styling

npmjs.org

github.com

webcomponents.org