Skip to content

Files

Latest commit

 

History

History
951 lines (715 loc) · 33.8 KB

Calendar.mdx

File metadata and controls

951 lines (715 loc) · 33.8 KB

{/* Copyright 2020 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs'; export default Layout;

import docs from 'docs:react-aria-components'; import i18nDocs from 'docs:@internationalized/date'; import ariaDocs from 'docs:@react-aria/calendar'; import statelyDocs from 'docs:@react-stately/calendar'; import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import packageData from 'react-aria-components/package.json'; import Anatomy from '@react-aria/calendar/docs/calendar-anatomy.svg'; import ChevronRight from '@spectrum-icons/workflow/ChevronRight'; import {Divider} from '@react-spectrum/divider'; import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard'; import Button from '@react-spectrum/docs/pages/assets/component-illustrations/ActionButton.svg'; import InternationalizedDate from '@react-spectrum/docs/pages/assets/component-illustrations/InternationalizedDate.svg';

category: Date and Time keywords: [input, form, field, date, time] type: component

Calendar

{docs.exports.Calendar.description}

<HeaderInfo packageData={packageData} componentNames={['Calendar']} />

Example

import {Calendar, Heading, Button, CalendarGrid, CalendarCell} from 'react-aria-components';

<Calendar aria-label="Appointment date">
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <CalendarGrid>
    {date => <CalendarCell date={date} />}
  </CalendarGrid>
</Calendar>
Show CSS 
.react-aria-Calendar {
  --highlight-background: slateblue;
  --highlight-foreground: white;
  --text-color: var(--spectrum-alias-text-color);
  --text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --text-color-invalid: var(--spectrum-global-color-red-600);
  --pressed-color: var(--spectrum-global-color-gray-200);
  --unavailable-color: var(--spectrum-global-color-red-600);
  --invalid-color: var(--spectrum-global-color-static-red-600);

  width: fit-content;
  max-width: 100%;
  color: var(--text-color);

  & header {
    display: flex;
    align-items: center;
    margin: 0 4px .5rem 4px;

    .react-aria-Heading {
      flex: 1;
      margin: 0;
      text-align: center;
      font-size: 1.375rem;
    }
  }

  .react-aria-Button {
    width: 2rem;
    height: 2rem;
    padding: 0;
  }

  .react-aria-CalendarCell {
    width: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 6px;
    cursor: default;
    outline: none;
    border: 2px solid var(--spectrum-alias-background-color-default);
    margin: -1px;

    &[data-outside-month] {
      display: none;
    }

    &[data-pressed] {
      background: var(--pressed-color);
    }

    &[data-focus-visible] {
      box-shadow: 0 0 0 2px var(--highlight-background);
    }

    &[data-selected] {
      background: var(--highlight-background);
      color: var(--highlight-foreground);
    }

    &[data-disabled] {
      color: var(--text-color-disabled);
    }

    &[data-unavailable] {
      text-decoration: line-through;
      color: var(--unavailable-color);
    }

    &[data-invalid] {
      background: var(--invalid-color);
      color: var(--highlight-foreground);
    }
  }

  [slot=errorMessage] {
    font-size: 12px;
    color: var(--text-color-invalid);
  }
}

.react-aria-Button {
  --button-background: var(--spectrum-global-color-gray-50);
  --button-backgound-pressed: var(--spectrum-global-color-gray-100);
  --button-border: var(--spectrum-global-color-gray-400);
  --button-border-disabled: var(--spectrum-alias-border-color-disabled);
  --focus-ring-color: slateblue;
  --text-color-disabled: var(--spectrum-alias-text-color-disabled);

  background: var(--button-background);
  border: 1px solid var(--button-border);
  color: var(--text-color);
  box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);
  border-radius: 4px;
  appearance: none;
  vertical-align: middle;
  font-size: 1rem;
  padding: 0.4rem;
  text-align: center;
  margin: 0;
  outline: none;

  &[data-focus-visible] {
    border-color: var(--focus-ring-color);
    box-shadow: 0 0 0 1px var(--focus-ring-color);
  }

  &[data-pressed] {
    background: var(--button-backgound-pressed);
  }

  &[data-disabled] {
    border-color: var(--button-border-disabled);
    color: var(--text-color-disabled);
  }
}

@media (forced-colors: active) {
  .react-aria-Calendar {
    forced-color-adjust: none;

    --highlight-background: Highlight;
    --highlight-foreground: HighlightText;
    --text-color: ButtonText;
    --text-color-disabled: GrayText;
    --text-color-invalid: LinkText;
    --unavailable-color: GrayText;
    --invalid-color: LinkText;
    --pressed-color: Canvas;
    --spectrum-alias-background-color-default: Canvas;
  }

  .react-aria-Button {
    --button-border: ButtonBorder;
    --button-border-disabled: GrayText;
    --button-background: ButtonFace;
    --button-backgound-pressed: ButtonFace;
    --focus-ring-color: Highlight;
    --text-color-disabled: GrayText;
  }
}

Features

There is no standalone calendar element in HTML. <input type="date"> is close, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. Calendar helps achieve accessible and international calendar components that can be styled as needed.

  • Flexible – Display one or more months at once, or a custom time range for use cases like a week view. Minimum and maximum values, unavailable dates, and non-contiguous selections are supported as well.
  • International – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more. Locale-specific formatting, number systems, and right-to-left support are available as well.
  • Accessible – Calendar cells can be navigated and selected using the keyboard, and localized screen reader messages are included to announce when the selection and visible date range change.
  • Customizable – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.

Read our blog post for more details about the internationalization, accessibility, and user experience features implemented by Calendar.

Anatomy

A calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating between date ranges. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date.

Calendar also supports an optional error message element, which can be used to provide more context about any validation errors. This is linked with the calendar via the aria-describedby attribute.

import {Calendar, Heading, Button, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, Text} from 'react-aria-components';

<Calendar>
  <Button slot="previous" />
  <Heading />
  <Button slot="next" />
  <CalendarGrid>
    <CalendarGridHeader>
      {day => <CalendarHeaderCell />}
    </CalendarGridHeader>
    <CalendarGridBody>
      {date => <CalendarCell date={date} />}
    </CalendarGridBody>
  </CalendarGrid>
  <Text slot="errorMessage" />
</Calendar>

Note that much of this anatomy is shared with range calendars. If you have both, the styling and internal components such as CalendarCell can be shared.

Concepts

Calendar makes use of the following concepts:

Composed components

A Calendar uses the following components, which may also be used standalone or reused in other components.

Reusable wrappers

If you will use a Calendar in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

This example also shows how to use the errorMessage slot to render help text in case of a validation error (see below for details).

import type {CalendarProps, DateValue} from 'react-aria-components';
import {Text} from 'react-aria-components';

interface MyCalendarProps<T extends DateValue> extends CalendarProps<T> {
  errorMessage?: string
}

function MyCalendar<T extends DateValue>({errorMessage, ...props}: MyCalendarProps<T>) {
  return (
    <Calendar {...props}>
      <header>
        <Button slot="previous">◀</Button>
        <Heading />
        <Button slot="next">▶</Button>
      </header>
      <CalendarGrid>
        {date => <CalendarCell date={date} />}
      </CalendarGrid>
      {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
    </Calendar>
  );
}

<MyCalendar aria-label="Event date" />

Value

A Calendar has no selection by default. An initial, uncontrolled value can be provided to the Calendar using the defaultValue prop. Alternatively, a controlled value can be provided using the value prop.

Date values are provided using objects in the @internationalized/date package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.

Calendar supports values with both date and time components, but only allows users to modify the date. By default, Calendar will emit objects in the onChange event, but if a or object is passed as the value or defaultValue, values of that type will be emitted, changing only the date and preserving the time components.

import {parseDate} from '@internationalized/date';

function Example() {
  let [value, setValue] = React.useState(parseDate('2020-02-03'));

  return (
    <div style={{display: 'flex', gap: 20, flexWrap: 'wrap'}}>
      <MyCalendar
        aria-label="Date (uncontrolled)"
        defaultValue={parseDate('2020-02-03')} />
      <MyCalendar
        aria-label="Date (controlled)"
        value={value}
        onChange={setValue} />
    </div>
  );
}

International calendars

Calendar supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the Unicode calendar locale extension, passed to the I18nProvider component.

Selected dates passed to onChange always use the same calendar system as the value or defaultValue prop. If no value or defaultValue is provided, then dates passed to onChange are always in the Gregorian calendar since this is the most commonly used. This means that even though the user selects dates in their local calendar system, applications are able to deal with dates from all users consistently.

The below example displays a Calendar in the Hindi language, using the Indian calendar. Dates emitted from onChange are in the Gregorian calendar.

import {I18nProvider} from '@react-aria/i18n';

function Example() {
  let [date, setDate] = React.useState<DateValue | null>(null);
  return (
    <I18nProvider locale="hi-IN-u-ca-indian">
      <MyCalendar aria-label="Date" value={date} onChange={setDate} />
      <p>Selected date: {date?.toString()}</p>
    </I18nProvider>
  );
}

Events

Calendar accepts an onChange prop which is triggered whenever a date is selected by the user. The example below uses onChange to update a separate element with a formatted version of the date in the user's locale. This is done by converting the date to a native JavaScript Date object to pass to the formatter.

import {getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from '@react-aria/i18n';

function Example() {
  let [date, setDate] = React.useState(parseDate('2022-07-04'));
  let formatter = useDateFormatter({dateStyle: 'full'});

  return (
    <>
      <MyCalendar aria-label="Event date" value={date} onChange={setDate} />
      <p>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</p>
    </>
  );
}

Multi-month

Multiple CalendarGrid elements can be rendered to show multiple months at once. The visibleDuration prop should be provided to the Calendar component to specify how many months are visible, and each CalendarGrid accepts an offset prop to specify its starting date relative to the first visible date.

<Calendar aria-label="Appointment date" visibleDuration={{months: 3}}>
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
    <CalendarGrid>
      {date => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{months: 1}}>
      {date => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{months: 2}}>
      {date => <CalendarCell date={date} />}
    </CalendarGrid>
  </div>
</Calendar>

Page behavior

The pageBehavior prop allows you to control how the calendar navigates between months. By default, the calendar will navigate by visibleDuration, but by setting pageBehavior to single, pagination will be by one month.

<Calendar aria-label="Appointment date" visibleDuration={{months: 3}} pageBehavior="single">
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
    <CalendarGrid>
      {date => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{months: 1}}>
      {date => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{months: 2}}>
      {date => <CalendarCell date={date} />}
    </CalendarGrid>
  </div>
</Calendar>

Validation

By default, Calendar allows selecting any date. The minValue and maxValue props can also be used to prevent the user from selecting dates outside a certain range.

This example only accepts dates after today.

import {today} from '@internationalized/date';

<MyCalendar aria-label="Appointment date" minValue={today(getLocalTimeZone())} />

Unavailable dates

Calendar supports marking certain dates as unavailable. These dates remain focusable with the keyboard so that navigation is consistent, but cannot be selected by the user. In this example, they are displayed in red. The isDateUnavailable prop accepts a callback that is called to evaluate whether each visible date is unavailable.

This example includes multiple unavailable date ranges, e.g. dates when no appointments are available. In addition, all weekends are unavailable. The minValue prop is also used to prevent selecting dates before today.

import {today, isWeekend} from '@internationalized/date';
import {useLocale} from '@react-aria/i18n';

function Example() {
  let now = today(getLocalTimeZone());
  let disabledRanges = [
    [now, now.add({days: 5})],
    [now.add({days: 14}), now.add({days: 16})],
    [now.add({days: 23}), now.add({days: 24})],
  ];

  let {locale} = useLocale();
  let isDateUnavailable = (date: DateValue) => isWeekend(date, locale) || disabledRanges.some((interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);

  return <MyCalendar aria-label="Appointment date" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />
}

Error message

Calendar tries to avoid allowing the user to select invalid dates in the first place (see Validation and Unavailable dates above). However, if according to application logic a selected date is invalid, the isInvalid prop can be set. This alerts assistive technology users that the selection is invalid, and can be used for styling purposes as well. In addition, the errorMessage slot may be used to help the user fix the issue.

This example validates that the selected date is a weekday and not a weekend according to the current locale.

import {today, isWeekend} from '@internationalized/date';
import {useLocale} from 'react-aria';

function Example() {
  let [date, setDate] = React.useState(today(getLocalTimeZone()));
  let {locale} = useLocale();
  let isInvalid = isWeekend(date, locale);

  return (
    <MyCalendar
      aria-label="Appointment date"
      value={date}
      onChange={setDate}
      /*- begin highlight -*/
      isInvalid={isInvalid}
      errorMessage={isInvalid ? 'We are closed on weekends' : undefined}
      /*- end highlight -*/
    />
  );
}

Controlling the focused date

By default, the selected date is focused when a Calendar first mounts. If no value or defaultValue prop is provided, then the current date is focused. However, Calendar supports controlling which date is focused using the focusedValue and onFocusChange props. This also determines which month is visible. The defaultFocusedValue prop allows setting the initial focused date when the Calendar first mounts, without controlling it.

This example focuses July 1, 2021 by default. The user may change the focused date, and the onFocusChange event updates the state. Clicking the button resets the focused date back to the initial value.

import {CalendarDate} from '@internationalized/date';

function Example() {
  let defaultDate = new CalendarDate(2021, 7, 1);
  let [focusedDate, setFocusedDate] = React.useState(defaultDate);

  return (
    <>
      <button style={{marginBottom: 20}} onClick={() => setFocusedDate(defaultDate)}>Reset focused date</button>
      <MyCalendar focusedValue={focusedDate} onFocusChange={setFocusedDate} />
    </>
  );
}

Disabled

The isDisabled boolean prop makes the Calendar disabled. Cells cannot be focused or selected.

<MyCalendar aria-label="Event date" isDisabled />

Read only

The isReadOnly boolean prop makes the Calendar's value immutable. Unlike isDisabled, the Calendar remains focusable.

<MyCalendar aria-label="Event date" value={today(getLocalTimeZone())} isReadOnly />

Labeling

An aria-label must be provided to the Calendar for accessibility. If it is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.

Internationalization

In order to internationalize a Calendar, a localized string should be passed to the aria-label prop. For languages that are read right-to-left (e.g. Hebrew and Arabic), keyboard navigation is automatically flipped. Ensure that your CSS accounts for this as well. Dates are automatically formatted using the current locale.

Props

Calendar

Heading

A <Heading> accepts all HTML attributes.

Button

A <Button> accepts its contents as children. Other props such as onPress and isDisabled will be set by the Calendar.

Show props

CalendarGrid

A <CalendarGrid> renders an individual month within a <Calendar>. It accepts a function as its children, which is called to render a <CalendarCell> for each date. This renders a default <CalendarGridHeader>, which displays the weekday names in the column headers. This can be customized by providing a <CalendarGridHeader> and <CalendarGridBody> as children instead of a function.

CalendarGridHeader

A <CalendarGridHeader> renders the header within a <CalendarGrid>, displaying a list of weekday names. It accepts a function as its children, which is called with a day name abbreviation to render a <CalendarHeaderCell> for each column header.

Show props

CalendarHeaderCell

A <CalendarHeaderCell> renders a column header within a <CalendarGridHeader>. It typically displays a weekday name.

Show props

CalendarGridBody

A <CalendarGridBody> renders the body within a <CalendarGrid>. It accepts a function as its children, which is called to render a <CalendarCell> for each date.

Show props

CalendarCell

A <CalendarCell> renders an individual date within a <CalendarGrid>.

Show props

Styling

React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc. By default, all components include a builtin className attribute which can be targeted using CSS selectors. These follow the react-aria-ComponentName naming convention.

.react-aria-Calendar {
  /* ... */
}

A custom className can also be specified on any component. This overrides the default className provided by React Aria with your own.

<CalendarGrid className="my-calendar-grid">
  {/* ... */}
</CalendarGrid>

In addition, some components support multiple UI states (e.g. focused, placeholder, readonly, etc.). React Aria components expose states using data attributes, which you can target in CSS selectors. For example:

.react-aria-CalendarCell[data-selected] {
  /* ... */
}

.react-aria-CalendarCell[data-invalid] {
  /* ... */
}

The className and style props also accept functions which receive states for styling. This lets you dynamically determine the classes or styles to apply, which is useful when using utility CSS libraries like Tailwind.

<CalendarCell className={({isSelected}) => isSelected ? 'bg-blue-600' : 'bg-gray-600'} />

Render props may also be used as children to alter what elements are rendered based on the current state. For example, you could add an additional element when a date is unavailable.

<CalendarCell>
  {({formattedDate, isUnavailable}) => (
    <>
      {isUnavailable && <UnavailableIcon />}
      <span>{formattedDate}</span>
    </>
  )}
</CalendarCell>

The states, selectors, and render props for each component used in a Calendar are documented below.

Calendar

A Calendar can be targeted with the .react-aria-Calendar CSS selector, or by overriding with a custom className. It supports the following states and render props:

Button

A Button can be targeted with the .react-aria-Button CSS selector, or by overriding with a custom className. The next and previous buttons can be targeted specifically with the [slot=previous] and [slot=next] selectors. Buttons support the following states:

CalendarGrid

A CalendarGrid can be targeted with the .react-aria-CalendarGrid CSS selector, or by overriding with a custom className. When a function is provided as children, a default <CalendarGridHeader> and <CalendarGridBody> are rendered. If you need to customize the styling of the header cells, you can render them yourself.

import {CalendarGridHeader, CalendarHeaderCell, CalendarGridBody} from 'react-aria-components';

<Calendar aria-label="Appointment date">
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <CalendarGrid>
    <CalendarGridHeader>
      {day => <CalendarHeaderCell style={{color: 'var(--blue)'}}>{day}</CalendarHeaderCell>}
    </CalendarGridHeader>
    <CalendarGridBody>
      {date => <CalendarCell date={date} />}
    </CalendarGridBody>
  </CalendarGrid>
</Calendar>

CalendarGridHeader

A CalendarGridHeader can be targeted with the .react-aria-CalendarGridHeader CSS selector, or by overriding with a custom className.

CalendarHeaderCell

A CalendarHeaderCell can be targeted with the .react-aria-CalendarHeaderCell CSS selector, or by overriding with a custom className.

CalendarGridBody

A CalendarGridBody can be targeted with the .react-aria-CalendarGridBody CSS selector, or by overriding with a custom className.

CalendarCell

A CalendarCell can be targeted with the .react-aria-CalendarCell CSS selector, or by overriding with a custom className. It supports the following states:

Text

The error message element within a Calendar can be targeted with the [slot=errorMessage] CSS selector, or by adding a custom className.

Advanced customization

Composition

If you need to customize one of the components within a Calendar, such as CalendarGrid or CalendarCell, in many cases you can create a wrapper component. This lets you customize the props passed to the component.

function MyCalendarCell(props) {
  return <CalendarCell {...props} className="my-item" />
}

Contexts

All React Aria Components export a corresponding context that can be used to send props to them from a parent element. This enables you to build your own compositional APIs similar to those found in React Aria Components itself. You can send any prop or ref via context that you could pass to the corresponding component. The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence (following the rules documented in mergeProps).

<ContextTable components={['Calendar']} docs={docs} />

This example uses CalendarContext to create a composite component containing a calendar and buttons representing preset dates. The hook can be used to consume contexts that support the slot prop.

import {CalendarContext, useSlottedContext} from 'react-aria-components';

function CalendarPicker({children}) {
  let [value, onChange] = React.useState(null);
  let [focusedValue, onFocusChange] = React.useState(null);

  return (
    /*- begin highlight -*/
    <CalendarContext.Provider value={{value, onChange, focusedValue, onFocusChange}}>
    {/*- end highlight -*/}
      <div className="calendar-picker">
        {children}
      </div>
    </CalendarContext.Provider>
  );
}

interface PresetProps {
  date: CalendarDate,
  children: React.ReactNode
}

function Preset({date, children}: PresetProps) {
  /*- begin highlight -*/
  let context = useSlottedContext(CalendarContext)!;
  /*- end highlight -*/
  let onPress = () => {
    context.onFocusChange(date);
    context.onChange(date);
  };

  return (
    <Button onPress={onPress}>{children}</Button>
  );
}

Now you can combine a Calendar and one or more Preset components in a CalendarPicker.

import {startOfWeek, startOfMonth} from '@internationalized/date';
import {useLocale} from 'react-aria';

function Example() {
  let {locale} = useLocale();
  let now = today(getLocalTimeZone());

  return (
    <CalendarPicker>
      <Preset date={now}>Today</Preset>
      <Preset date={startOfWeek(now.add({weeks: 1}), locale)}>Next week</Preset>
      <Preset date={startOfMonth(now.add({months: 1}))}>Next month</Preset>
      <MyCalendar aria-label="Meeting date" />
    </CalendarPicker>
  );
}
Show CSS 
.calendar-picker {
  > .react-aria-Button {
    margin: 0 4px 8px 4px;
  }
}

Custom children

Calendar passes props to its child components, such as the heading and buttons, via their associated contexts. These contexts are exported so you can also consume them in your own custom components. This enables you to reuse existing components from your app or component library together with React Aria Components.

<ContextTable components={['Heading', 'Button', 'Text']} docs={docs} />

This example consumes from HeadingContext in an existing styled heading component to make it compatible with React Aria Components. The hook merges the local props and ref with the ones provided via context by Calendar.

import type {HeadingProps} from 'react-aria-components';
import {HeadingContext, useContextProps} from 'react-aria-components';

const MyCustomHeading = React.forwardRef((props: HeadingProps, ref: React.ForwardedRef<HTMLHeadingElement>) => {
  // Merge the local props and ref with the ones provided via context.
  ///- begin highlight -///
  [props, ref] = useContextProps(props, ref, HeadingContext);
  ///- end highlight -///

  // ... your existing Heading component
  return <h2 {...props} ref={ref} />;
});

Now you can use MyCustomHeading within a Calendar, in place of the builtin React Aria Components Heading.

<Calendar>
  {/*- begin highlight -*/}
  <MyCustomHeading />
  {/*- end highlight -*/}
  {/* ... */}
</Calendar>

State

Calendar provides a object to its children via CalendarStateContext. This can be used to access and manipulate the calendar's state.

This example shows a CalendarValue component that can be placed within a Calendar to display the currently selected date as a formatted string.

import {CalendarStateContext} from 'react-aria-components';
import {useDateFormatter} from 'react-aria';

function CalendarValue() {
  /*- begin highlight -*/
  let state = React.useContext(CalendarStateContext)!;
  /*- end highlight -*/
  let date = state.value?.toDate(getLocalTimeZone());
  let formatted = date ? useDateFormatter().format(date) : 'None';
  return <small>Selected date: {formatted}</small>;
}

<Calendar>
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <CalendarGrid>
    {date => <CalendarCell date={date} />}
  </CalendarGrid>
  {/*- begin highlight -*/}
  <CalendarValue />
  {/*- end highlight -*/}
</Calendar>

Hooks

If you need to customize things even further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See useCalendar for more details.

This example uses the hook to build a single week calendar view.

import type {CalendarGridProps} from 'react-aria-components';
import {CalendarStateContext} from 'react-aria-components';
import {useCalendarGrid} from 'react-aria';

function WeekCalendarGrid(props: CalendarGridProps) {
  let state = React.useContext(CalendarStateContext)!;
  let {gridProps} = useCalendarGrid(props, state);

  return (
    <table {...gridProps}>
      <tbody>
        <tr>
          {state.getDatesInWeek(0).map((date, i) => <CalendarCell key={i} date={date} />)}
        </tr>
      </tbody>
    </table>
  );
}

WeekCalendarGrid can be used within a Calendar in place of the default CalendarGrid component.

<Calendar visibleDuration={{weeks: 1}} defaultValue={today(getLocalTimeZone())}>
  <div className="week">
    <Heading />
    <Button slot="previous">◀</Button>
    <WeekCalendarGrid />
    <Button slot="next">▶</Button>
  </div>
</Calendar>
Show CSS 
.week {
  display: grid;
  grid-template-areas:
    "heading heading heading"
    "previous grid next";
  align-items: center;
  justify-items: center;
  gap: 8px;

  .react-aria-Heading {
    grid-area: heading;
    margin: 0;
    font-size: 1.2rem;
  }

  .react-aria-CalendarCell[data-outside-month] {
    display: block;
  }
}