Days Of The Week

For development, import DaysOfTheWeek from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

The Days of the Week consists of ten primary elements that work together to allow users to select days of the week.

Label
First day of the week (in disabled state)
Second day of the week (in checked state)
Third day of the week (in checked state)
Fourth day of the week (in hovered state, with tooltip with full name)
Fifth day of the week (in unchecked state)
Sixth day of the week (in unchecked state)
Seventh day of the week (in disabled state)
Hint/error text (in errored state)
Description text

Options

The Days of the Week supports configurable start date configurations to accommodate various week representation scenarios.

Default start date

By default, Days of the Week starts the week on Sunday.

Configured start date

This behavior is configurable. The first day of the week here is set to Monday.

Behavior

The Days of the Week responds to user interaction with distinct visual states and responsive width behaviors.

Visual States

Day States

Each day of the week can be unchecked, checked, or disabled. On hover, the day of the week displays the full name of the day.

Responsive Behavior

Days of the Week shrinks to 328px wide and grows to a maximum of 748px wide.

Usage Guidelines

Standard	Requirement
DoSelecting days within forms	Use Days of the Week for selecting one or multiple days of the week within forms. Use for event-related scenarios that require selecting days of the week.
DoShow accessible labels on hover	Display the full day name on hover; see Accessible Labels.
DoUse 2-letter abbreviations	Use 2-letter abbreviations for day names (e.g., Mo, Tu, We); see Abbreviation.
Don’tMissing accessible label on hover	Don’t omit an accessible label for the day on hover; see Accessible Labels.
Don’tUneven or long day names	Don’t use three-letter abbreviations or full day names with uneven widths; see Abbreviation.

How to Use

Accessible Labels

Single day of the week with an accessible label in
tooltip

Display the full day name on hover

A hovered single day without an accessible
label

Don’t

Omit an accessible label for the day on hover

Abbreviation

Use 2-letter abbreviations for day names (e.g., Mo, Tu, We)

Don’t

Use three letter name abbreviations, or full day names with uneven widths.

Content

Content within the Days of the Week should clearly communicate day selections through consistent abbreviations.

How to abbreviate days of the week

To keep interfaces clear and scannable, use two-letter abbreviations for days of the week (e.g., Mo, Tu, We). These are concise, easy to read at a glance, and align with how similar tools present this information.
When possible, pair the abbreviation with a tooltip that shows the full day name on hover. This improves accessibility and helps avoid confusion, especially for less common abbreviations like “Tu” or “Th.”

Which day starts the week

By default, weeks start on Sunday in the date recurrence picker. This setting is configurable from within the component.

Keyboard Interaction

Users can navigate the Days of the Week using standard keyboard controls.

Key	Interaction
Space or Enter	Toggles checked state

Accessibility

Anvil provides most of the accessibility needs for Days of the Week out of the box, and only needs some additional considerations for library users. For more guidance on form field labels and context, see input field context association best practices.

Code

Implementation
DaysOfTheWeek Props

Common Examples

Labeling

DaysOfTheWeek can be given optional labeling props to help users understand the context around the component.

<DaysOfTheWeek
  label="Label text"
  hint="Hint text"
  description="Description text"
  moreInfo="More info"
/>

For more information on how to use these these props, check out our forms pattern documentation.

Disabled

Fully disabled

The DaysOfTheWeek can be marked disabled to disable all of the days.

() => {
  const [selectedDays, setSelectedDays] = useState([]);
  return (
    <DaysOfTheWeek
      selectedDays={selectedDays}
      onChange={setSelectedDays}
      disabled
    />
  );
};

Partially disabled

The DaysOfTheWeek can be marked disabled={number[]} to disable specific days of the week.

() => {
  const [selectedDays, setSelectedDays] = useState([]);
  return (
    <DaysOfTheWeek
      selectedDays={selectedDays}
      onChange={setSelectedDays}
      disabled={[6, 7]} // 6 = Saturday, 7 = Sunday
      hint="Select a weekday"
    />
  );
};

Alternative Starting Day

Depending on your needs, the DaysOfTheWeek component can accept an alternative starting day via the firstDay prop. Here’s an example showing Monday as the first day of the week:

Static day numbers

When using the firstDay prop, it’s important to recognize that the numbers used to index days remain static. This prop only adjusts how the buttons are layout out visually.This means that props like selectedDays and disabled continue to treat Monday as 1, Tuesday as 2, and so on.

Best Practices

Day Numbers

Take notice of the numbers used for selectedDays, onChange, firstDay, and disabled. If you are familiar with the Date object’s getDay method, you may find them surprising at first.We use numbers 1-7 to number days, beginning with Monday as 1 proceeding through Sunday as 7. This is an intentional decision based on a goal to remain consistent the Intl.Locale.prototype.getWeekInfo() and Temporal.PlainDate.prototype.dayOfWeek APIs.This is a implementation choice rooted in consideration of the ever evolving and improving web standards. We acknowledge that Date.prototype.getDay() uses 0-6 for Sunday-Saturday but we do not plan on matching this API. We prefer the more powerful and complete Intl and Temporal APIs.

import { DaysOfTheWeek } from "@servicetitan/anvil2";

function ExampleComponent() {
const [selectedDays, setSelectedDays] = useState([]);
return (

<DaysOfTheWeek
  selectedDays={selectedDays}
  onChange={setSelectedDays}
  firstDay={7}
  disabled={false}
  required={false}
/>
); }

`DaysOfTheWeek` Props

ReactElement | string

Description text or element to display below the component.

boolean | number[]

default:"false"

Whether the component is disabled. Can be a boolean to disable all days, or an array of day numbers (1-7) to disable specific days.

"polite" | "assertive" | "off"

default:"assertive"

ARIA live setting for the error message.

ReactElement | string

Error message to display when there is an error.

number

default:"7"

The first day of the week (1-7, where 1 is Monday and 7 is Sunday).

ReactElement | string

Hint text or element to display above the component.

string

ID for the component.

ReactElement | string

Label text or element.

FieldLabelProps

Additional props passed to the FieldLabel component. Supports the aiMark prop for displaying AI-powered field indicators.

ReactElement | string

Additional info to display in a tooltip next to the label.

(selectedDays: number[]) => void

Callback fired when the selection changes.

boolean

Whether the field is required.

number[]

default:"[]"

The selected days (1-7, where 1 is Monday and 7 is Sunday).

Concepts & Guidelines

Anvil2

Resources

Days Of The Week - Web

Anatomy

Options

Default start date

Configured start date

Behavior

Visual States

Day States

Responsive Behavior

Usage Guidelines

How to Use

Accessible Labels

Abbreviation

Content

How to abbreviate days of the week

Which day starts the week

Keyboard Interaction

Accessibility

Code

Common Examples

Labeling

Disabled

Fully disabled

Partially disabled

Alternative Starting Day

Static day numbers

Best Practices

Day Numbers

`DaysOfTheWeek` Props

​Anatomy

​Options

​Default start date

​Configured start date

​Behavior

​Visual States

​Day States

​Responsive Behavior

​Usage Guidelines

​How to Use

​Accessible Labels

​Abbreviation

​Content

​How to abbreviate days of the week

​Which day starts the week

​Keyboard Interaction

​Accessibility

​Code

​Common Examples

​Labeling

​Disabled

​Fully disabled

​Partially disabled

​Alternative Starting Day

​Static day numbers

​Best Practices

​Day Numbers

​DaysOfTheWeek Props

Anatomy

Options

Default start date

Configured start date

Behavior

Visual States

Day States

Responsive Behavior

Usage Guidelines

How to Use

Accessible Labels

Abbreviation

Content

How to abbreviate days of the week

Which day starts the week

Keyboard Interaction

Accessibility

Code

Common Examples

Labeling

Disabled

Fully disabled

Partially disabled

Alternative Starting Day

Static day numbers

Best Practices

Day Numbers

`DaysOfTheWeek` Props