Skip to main content



ns-appointment-picker is used to select a date and time slot for an appointment.

ns-appointment-picker is used to select a date and time slot for an appointment. The component is comprised of an ns-calendar to pick the date, and an ns-slot-picker to show the available time slots.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use this when the customer needs to select a date and a time slot for an appointmentUse to select an appointment slot on a single date. Use ns-slot-picker instead
Use ns-slot-picker to surface the best suitable slots for a customer before presenting the full appointment picker, where appropriate.Don't force customers to use the appointment picker first if there is very poor appointment availability. Present the next available appointments in a slot picker first.
Use ns-highlighter alongside ns-appointment-picker to surface any important notifications regarding a customer booking.
Use multiple appointment pickers in ns-tabs so users can easily access different types of bookings.


View example on Storybook

The main property/attribute of ns-appointment-picker is slotData. This would typically be set by setting the property through code as it is a fairly complex object.

Usage example#


Ans-calendar - Calendar component
Bns-slot-picker - Slot picker component


slotdataarrayArray of objects representing dates.
changeDispatched when a specific slot is selected

Slot Data#

The slotData array should consist of objects containing a date property and a slots property.

date: String - eg. 2020-01-28 (28th January 2020) slots: Array of objects with a name and value property

const slots = [{
name: '9am to 12pm',
value: '0900-1200'
}, {
name: '10am to 2pm',
value: '1000-1400'
}, {
name: '12am to 5pm',
value: '1200-1700'
const slotData = [{ date: '2020-01-28', slots: slots }, { date: '2020-01-29', slots: slots }];

Component placement#

The ns-appointment-picker component can be used in the following components:


  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.