> ## 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 – Code
> Days of the Weeks are form elements that allow users to select days of the week.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
;
}
};
```tsx lines expandable theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [selectedDays, setSelectedDays] = useState([]);
return (
);
}
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}
```
For more information on how to use these these props, check out our [forms pattern documentation](/docs/web/patterns/forms#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 (
);
};
```
#### Partially disabled
The `DaysOfTheWeek` can be marked `disabled={number[]}` to disable specific days of the week.
```tsx theme={null}
() => {
const [selectedDays, setSelectedDays] = useState([]);
return (
);
};
```
### 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:
```tsx lines expandable theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [selectedDays, setSelectedDays] = useState([]);
return (
);
}
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.
```tsx lines expandable theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
function App() {
return (
);
}
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.
```tsx theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
function ExampleComponent() {
const [selectedDays, setSelectedDays] = useState([]);
return (
); }
```
## `DaysOfTheWeek` Props
Description text or element to display below the component.
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.
ARIA live setting for the error message.
Error message to display when there is an error.
The first day of the week (1-7, where 1 is Monday and 7 is Sunday).
Hint text or element to display above the component.
ID for the component.
Label text or element.
Additional props passed to the [FieldLabel](/docs/web/components/field-label/code) component. Supports the `aiMark` prop for displaying [AI-powered field indicators](/docs/web/utilities/ai-marks).
Additional info to display in a tooltip next to the label.
Callback fired when the selection changes.
Whether the field is required.
The selected days (1-7, where 1 is Monday and 7 is Sunday).
