Skip to main content

ns-appointment-picker

Introduction#

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.

Usage#

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#

ns-appointment-picker

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

Specification#

AttributeTypeDefaultOptionsDescription
slotdataarrayArray of objects representing dates.
EventDescription
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:

Design Tokens

You can change the branded look and feel of the ns-appointment-picker by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "background-color": "#FFFFFF",
  "border-color": "#C8C9C7",
  "header": {
    "color": "#FFFFFF",
    "background-color": "#005EB8",
    "typography": "heading-5"
  },
  "slot-picker": {
    "background-color": "#F7F7F7",
    "border-color": "#C8C9C7"
  }
}

Feedback#

  • 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.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!