### Programmatic Calendar Navigation

Source: https://tech.skbkontur.ru/kontur-ui/llms-full.txt

Demonstrates how to use a ref to the Calendar component to trigger month scrolling programmatically.

```tsx
const initialValue = '02.09.2023';
  const [value, setValue] = React.useState(initialValue);
  const calendarRef = React.useRef<Calendar>(null);

  return (
    <>
      <Gapped gap={8} verticalAlign="top">
        <Calendar value={value} ref={calendarRef} onValueChange={setValue} />

        <Gapped vertical gap={8}>
          <Button onClick={() => calendarRef.current?.scrollToMonth(1, 2023)}>I квартал</Button>
          <Button onClick={() => calendarRef.current?.scrollToMonth(4, 2023)}>II квартал</Button>
          <Button onClick={() => calendarRef.current?.scrollToMonth(7, 2023)}>III квартал</Button>
          <Button onClick={() => calendarRef.current?.scrollToMonth(10, 2023)}>IV квартал</Button>
        </Gapped>
      </Gapped>
    </>
  );
```

--------------------------------

### Customizing Calendar Day Rendering

Source: https://tech.skbkontur.ru/kontur-ui/llms-full.txt

Uses ThemeContext to override calendar styles and provides a custom renderDay function to display dynamic content within calendar cells.

```tsx
const theme = React.useContext(ThemeContext);

  function renderDay(props: CalendarDayProps) {
    const [date, month] = props.date.split('.').map(Number);
    const randomDay = date % 6 === 0 || date % 7 === 0 || date % 8 === 0;
    const randomPrice = Math.round((date / month) * 1000);

    return (
      <CalendarDay {...props}>
        <div style={{ fontSize: theme.calendarCellFontSize }}>{date}</div>
        <div style={{ fontSize: '11px', fontFeatureSettings: 'tnum', fontVariantNumeric: 'tabular-nums' }}>
          {randomDay ? <>{randomPrice}&thinsp;₽</> : <span style={{ color: theme.tokenTextColorDisabled }}>—</span>}
        </div>
      </CalendarDay>
    );
  }

  const [value, setValue] = React.useState<string | null>(null);

  return (
    <ThemeContext.Provider
      value={ThemeFactory.create(
        {
          calendarCellWidth: '56px',
          calendarCellHeight: '56px',
          calendarCellLineHeight: '1.5',
          calendarWrapperHeight: '600px',
          calendarCellBorderRadius: '8px',
        },
        theme,
      )}
    >
      <Calendar value={value} renderDay={renderDay} onValueChange={setValue} />
    </ThemeContext.Provider>
  );
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.