> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Days Of The Week - Web

> Days of the Weeks are form elements that allow users to select days of the week.

> [!NOTE]
>
> For development, import `DaysOfTheWeek` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3?node-id=185-13215).

![](https://mintcdn.com/servicetitan/uz2PQSvO75TRhQ38/images/docs/web/components/shared/image-of-the-days-of-the-week-component-with-sundaysaturday-disabled-monday-selected-and-wednesday-hovered.png?fit=max\&auto=format\&n=uz2PQSvO75TRhQ38\&q=85\&s=c8e7492cf6ad70517034a7ae2f4361dd)

## Anatomy

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

![Anatomy image for the Days of the Week
component](https://mintcdn.com/servicetitan/lX6UhRsjMdTeB7y6/images/docs/web/components/days-of-the-week/design/anatomy-image-for-the-days-of-the-week-component.png?fit=max\&auto=format\&n=lX6UhRsjMdTeB7y6\&q=85\&s=1be447ed2a2a842a8be4db43b6280e17)

1. Label
2. First day of the week (in disabled state)
3. Second day of the week (in checked state)
4. Third day of the week (in checked state)
5. Fourth day of the week (in hovered state, with tooltip with full name)
6. Fifth day of the week (in unchecked state)
7. Sixth day of the week (in unchecked state)
8. Seventh day of the week (in disabled state)
9. Hint/error text (in errored state)
10. Description text

## Options

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

### Default start date

daysoftheweek-playground

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/daysoftheweek-playground?file=src/App.tsx)

```tsx lines theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
import { useState } from "react";

function App() {
  const [selectedDays, setSelectedDays] = useState<number[]>([]);

  return (
    <div style={{ minWidth: "20.5rem" }}>
      <DaysOfTheWeek
        selectedDays={selectedDays}
        onChange={setSelectedDays}
        label="Label text"
        hint="Hint text"
        description="Description text"
        // errorMessage="Error message"
        errorAriaLive="assertive"
        disabled={false}
        firstDay={7}
        required={false}
        moreInfo="More info"
      />
    </div>
  );
}

export default App;
```

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

### Configured start date

daysoftheweek-firstday

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/daysoftheweek-firstday?file=src/App.tsx)

```tsx lines theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
import { useState } from "react";

function App() {
  const [selectedDays, setSelectedDays] = useState<number[]>([]);

  return (
    <div style={{ minWidth: "20.5rem" }}>
      <DaysOfTheWeek
        selectedDays={selectedDays}
        onChange={setSelectedDays}
        firstDay={1}
      />
    </div>
  );
}

export default App;
```

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.

daysoftheweek-data-interactive

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/daysoftheweek-data-interactive?file=src/App.tsx)

```tsx lines theme={null}
import { DaysOfTheWeek, Flex } from "@servicetitan/anvil2";
import { useState } from "react";

function App() {
  const [selectedDaysUnchecked, setSelectedDaysUnchecked] = useState<number[]>(
    [],
  );
  const [selectedDaysChecked, setSelectedDaysChecked] = useState<number[]>([
    1, 2, 3, 4, 5, 6, 7,
  ]);
  const [selectedDaysDisabled, setSelectedDaysDisabled] = useState<number[]>(
    [],
  );

  return (
    <Flex direction="column" gap="8" style={{ minWidth: "20.5rem" }}>
      <DaysOfTheWeek
        selectedDays={selectedDaysUnchecked}
        onChange={setSelectedDaysUnchecked}
        label="All days unchecked"
        errorAriaLive="assertive"
        disabled={false}
        firstDay={7}
      />

      <DaysOfTheWeek
        selectedDays={selectedDaysChecked}
        onChange={setSelectedDaysChecked}
        label="All days checked"
        errorAriaLive="assertive"
        disabled={false}
        firstDay={7}
      />

      <DaysOfTheWeek
        selectedDays={selectedDaysDisabled}
        onChange={setSelectedDaysDisabled}
        label="All days disabled"
        errorAriaLive="assertive"
        disabled={true}
        firstDay={7}
      />
    </Flex>
  );
}

export default App;
```

### Responsive Behavior

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

daysoftheweek-width

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/daysoftheweek-width?file=src/App.tsx)

```tsx lines theme={null}
import { DaysOfTheWeek, Flex } from "@servicetitan/anvil2";
import { useState } from "react";

function App() {
  const [selectedDaysSmall, setSelectedDaysSmall] = useState<number[]>([]);
  const [selectedDaysLarge, setSelectedDaysLarge] = useState<number[]>([]);

  return (
    <Flex direction="column" gap="8">
      <div style={{ width: "328px" }}>
        <DaysOfTheWeek
          selectedDays={selectedDaysSmall}
          onChange={setSelectedDaysSmall}
          label="Smallest size"
          errorAriaLive="assertive"
          moreInfo="More info"
        />
      </div>

      <div style={{ width: "748px" }}>
        <DaysOfTheWeek
          selectedDays={selectedDaysLarge}
          onChange={setSelectedDaysLarge}
          label="Largest size"
          errorAriaLive="assertive"
          moreInfo="More info"
        />
      </div>
    </Flex>
  );
}

export default App;
```

## 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](#accessible-labels). |
| DoUse 2-letter abbreviations | Use 2-letter abbreviations for day names (e.g., Mo, Tu, We); see [Abbreviation](#abbreviation). |
| Don'tMissing accessible label on hover | Don't omit an accessible label for the day on hover; see [Accessible Labels](#accessible-labels). |
| Don'tUneven or long day names | Don't use three-letter abbreviations or full day names with uneven widths; see [Abbreviation](#abbreviation). |

### How to Use

#### Accessible Labels

![Single day of the week with an accessible label in
tooltip](https://mintlify.s3.us-west-1.amazonaws.com/servicetitan/images/docs/web/components/days-of-the-week/web/single-day-of-the-week-with-an-accessible-label-in-tooltip.png)

> [!TIP]
>
> **Do**

Display the full day name on hover

![A hovered single day without an accessible
label](https://mintlify.s3.us-west-1.amazonaws.com/servicetitan/images/docs/web/components/days-of-the-week/web/a-hovered-single-day-without-an-accessible-label.png)

> [!CAUTION]
>
> **Don't**

Omit an accessible label for the day on hover

#### Abbreviation

daysoftheweek-abbreviation-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/daysoftheweek-abbreviation-do?file=src/App.tsx)

```tsx lines theme={null}
import { DaysOfTheWeek, Flex } from "@servicetitan/anvil2";
import { useState } from "react";

function App() {
  const [selectedDays, setSelectedDays] = useState<number[]>([]);

  return (
    <Flex style={{ minHeight: "97px", width: "328px" }} alignItems="center">
      <DaysOfTheWeek
        selectedDays={selectedDays}
        onChange={setSelectedDays}
        errorAriaLive="assertive"
      />
    </Flex>
  );
}

export default App;
```

> [!TIP]
>
> **Do**

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

daysoftheweek-abbreviation-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/daysoftheweek-abbreviation-dont?file=src/App.tsx)

```tsx lines theme={null}
import { ButtonToggle, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="4">
      <Flex gap="4">
        <ButtonToggle size="medium">Sun</ButtonToggle>
        <ButtonToggle size="medium">Mon</ButtonToggle>
        <ButtonToggle size="medium">Tue</ButtonToggle>
        <ButtonToggle size="medium">Wed</ButtonToggle>
        <ButtonToggle size="medium">Thu</ButtonToggle>
        <ButtonToggle size="medium">Fri</ButtonToggle>
        <ButtonToggle size="medium">Sat</ButtonToggle>
      </Flex>

      <Flex gap="4">
        <ButtonToggle size="medium">Sunday</ButtonToggle>
        <ButtonToggle size="medium">Monday</ButtonToggle>
        <ButtonToggle size="medium">Tuesday</ButtonToggle>
        <ButtonToggle size="medium">Wednesday</ButtonToggle>
        <ButtonToggle size="medium">Thursday</ButtonToggle>
        <ButtonToggle size="medium">Friday</ButtonToggle>
        <ButtonToggle size="medium">Saturday</ButtonToggle>
      </Flex>
    </Flex>
  );
}

export default App;
```

> [!CAUTION]
>
> **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](https://anvil.servicetitan.com/docs/accessibility/labels-and-ctas.md#input-field-context-association).

## Code

**Implementation**

daysoftheweek-playground

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/daysoftheweek-playground?file=src/App.tsx)

```tsx lines expandable theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
import { useState } from "react";

function App() {
  const [selectedDays, setSelectedDays] = useState<number[]>([]);

  return (
    <div style={{ minWidth: "20.5rem" }}>
      <DaysOfTheWeek
        selectedDays={selectedDays}
        onChange={setSelectedDays}
        label="Label text"
        hint="Hint text"
        description="Description text"
        // errorMessage="Error message"
        errorAriaLive="assertive"
        disabled={false}
        firstDay={7}
        required={false}
        moreInfo="More info"
      />
    </div>
  );
}

export default App;
```

## Common Examples

### Labeling

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

```tsx theme={null}
<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](https://anvil.servicetitan.com/docs/patterns/forms/web.md#what-help-elements-should-we-use).

### Disabled

#### Fully disabled

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

```tsx theme={null}
() => {
  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.

```tsx theme={null}
() => {
  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:

daysoftheweek-firstday

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/daysoftheweek-firstday?file=src/App.tsx)

```tsx lines expandable theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
import { useState } from "react";

function App() {
  const [selectedDays, setSelectedDays] = useState<number[]>([]);

  return (
    <div style={{ minWidth: "20.5rem" }}>
      <DaysOfTheWeek
        selectedDays={selectedDays}
        onChange={setSelectedDays}
        firstDay={1}
      />
    </div>
  );
}

export default App;
```

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

daysoftheweek-map

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/daysoftheweek-map?file=src/App.tsx)

```tsx lines expandable theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";

function App() {
  return (
    <div style={{ minWidth: "20.5rem" }}>
      <DaysOfTheWeek
        selectedDays={[2]} // Tuesday is selected
        disabled={[6]} // Saturday is disabled
        firstDay={1} // Monday is the first day shown
      />
    </div>
  );
}

export default App;
```

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

**DaysOfTheWeek Props**

```tsx theme={null}
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

**description** `ReactElement | string`

Description text or element to display below the component.

**disabled** `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.

**errorAriaLive** `"polite" | "assertive" | "off"` (default: assertive)

ARIA live setting for the error message.

**errorMessage** `ReactElement | string`

Error message to display when there is an error.

**firstDay** `number` (default: 7)

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

**hint** `ReactElement | string`

Hint text or element to display above the component.

**id** `string`

ID for the component.

**label** `ReactElement | string`

Label text or element.

**labelProps** `FieldLabelProps`

Additional props passed to the [FieldLabel](https://anvil.servicetitan.com/docs/components/field-label/code) component. Supports the `aiMark` prop for displaying [AI-powered field indicators](https://anvil.servicetitan.com/docs/utilities/web/ai-marks.md).

**moreInfo** `ReactElement | string`

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

**onChange** `(selectedDays: number[]) =\> void`

Callback fired when the selection changes.

**required** `boolean`

Whether the field is required.

**selectedDays** `number[]` (default: \[])

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.