Skip to main content

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.

​
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.
Last modified on April 14, 2026