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:

Demo

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.

Demo

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

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.

string

ID for the component.

label

ReactElement | string

Label text or element.

labelProps

Additional props to pass to the Label component.

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

Anvil2 Web

Resources

Common Examples

Labeling

Disabled

Fully disabled

Partially disabled

Alternative Starting Day

Static day numbers

Best Practices

Day Numbers

`DaysOfTheWeek` Props

Anvil2 Web

Resources

​Common Examples

​Labeling

​Disabled

​Fully disabled

​Partially disabled

​Alternative Starting Day

​Static day numbers

​Best Practices

​Day Numbers

​DaysOfTheWeek Props

Common Examples

Labeling

Disabled

Fully disabled

Partially disabled

Alternative Starting Day

Static day numbers

Best Practices

Day Numbers

`DaysOfTheWeek` Props