### Install Component (npm)

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

Install the chakra-dayzed-datepicker component using npm.

```bash
npm i chakra-dayzed-datepicker
```

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

### Install Component (Yarn)

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

Install the chakra-dayzed-datepicker component using Yarn.

```bash
yarn add chakra-dayzed-datepicker
```

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

### Install Dependencies (npm)

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

Install date-fns and dayzed using npm. These are required peer dependencies.

```bash
npm i date-fns dayzed
```

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

### Install Dependencies (Yarn)

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

Install date-fns and dayzed using Yarn. These are required peer dependencies.

```bash
yarn add date-fns dayzed
```

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

### Example Datepicker Props Configuration

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

An example of how to apply custom styles and behaviors to datepicker elements using propsConfigs. This allows for extensive theming and customization.

```js
propsConfigs={{
  dateNavBtnProps: {
    colorScheme: "blue",
    variant: "outline"
  },
  dayOfMonthBtnProps: {
    defaultBtnProps: {
      borderColor: "red.300",
      _hover: {
        background: 'blue.400',
      }
    },
    isInRangeBtnProps: {
      color: "yellow",
    },
    selectedBtnProps: {
      background: "blue.200",
      color: "green",
    },
    todayBtnProps: {
      background: "teal.400",
    }
  },
  inputProps: {
    size: "sm"
  },
  popoverCompProps: {
    popoverContentProps: {
      background: "gray.700",
      color: "white",
    },
  },
  calendarPanelProps: {
    wrapperProps: {
      borderColor: 'green',
    },
    contentProps: {
      borderWidth: 0,
    },
    headerProps: {
      padding: '5px',
    },
    dividerProps: {
      display: "none",
    },
  },
  weekdayLabelProps: {
    fontWeight: 'normal'
  },
  dateHeadingProps: {
    fontWeight: 'semibold'
  }
}}
```

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

### Install chakra-dayzed-datepicker and dependencies

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Install the datepicker library, date-fns, and peer dependencies like @chakra-ui/react, react, and react-dom.

```bash
npm install chakra-dayzed-datepicker date-fns
# peer dependencies
npm install @chakra-ui/react react react-dom
```

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

### Inline Range Calendar with RangeCalendarPanel

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Utilize `RangeCalendarPanel` for an embedded, always-visible range picker with hover preview. It manages internal hover state and requires custom logic for selecting start and end dates. Configure display and date ranges via `dayzedHookProps` and `configs`.

```tsx
import React, { useState } from 'react';
import { Box } from '@chakra-ui/react';
import {
  RangeCalendarPanel,
  OnDateSelected,
  Month_Names_Short,
  Weekday_Names_Short,
} from 'chakra-dayzed-datepicker';
import { format } from 'date-fns';

const today = new Date();

export default function InlineRangeCalendar() {
  const [selectedDates, setSelectedDates] = useState<Date[]>([today, today]);

  const handleOnDateSelected: OnDateSelected = ({ selectable, date }) => {
    if (!selectable) return;
    const newDates = [...selectedDates];
    if (newDates.length === 2) {
      setSelectedDates([date]);
    } else if (newDates.length === 1) {
      const [first] = newDates;
      setSelectedDates(first < date ? [first, date] : [date, first]);
    } else {
      setSelectedDates([date]);
    }
  };

  const label = selectedDates.length === 2
    ? `${format(selectedDates[0], 'yyyy-MM-dd')} – ${format(selectedDates[1], 'yyyy-MM-dd')}`
    : selectedDates[0] ? format(selectedDates[0], 'yyyy-MM-dd') : '';

  return (
    <Box>
      <Box mb={2}>{label}</Box>
      <RangeCalendarPanel
        selected={selectedDates}
        dayzedHookProps={{
          showOutsideDays: false,
          onDateSelected: handleOnDateSelected,
          selected: selectedDates,
          monthsToDisplay: 2,
        }}
        configs={{
          dateFormat: 'MM/dd/yyyy',
          monthNames: Month_Names_Short,
          dayNames: Weekday_Names_Short,
          firstDayOfWeek: 0,
        }}
      />
    </Box>
  );
}
```

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

### Datepicker Configuration Options

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

Provides non-Chakra UI specific configurations for the datepicker, such as date formatting, custom day and month names, and the first day of the week.

```javascript
configs={{
  dateFormat: 'yyyy-MM-dd',
  dayNames: 'abcdefg'.split(''), // length of 7
  monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
  firstDayOfWeek: 2, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
}}
```

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

### Configure calendar behavior with configs

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Customize non-Chakra-specific calendar settings like date format, month/weekday names, and the first day of the week using the `configs` prop. This is useful for internationalization and specific display requirements.

```tsx
import { RangeDatepicker } from 'chakra-dayzed-datepicker';

// French locale example
<RangeDatepicker
  selectedDates={selectedDates}
  onDateChange={setSelectedDates}
  configs={{
    dateFormat: 'dd/MM/yyyy',
    monthNames: [
      'Janvier','Février','Mars','Avril','Mai','Juin',
      'Juillet','Août','Septembre','Octobre','Novembre','Décembre',
    ],
    dayNames: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
    firstDayOfWeek: 1, // 0=Sun, 1=Mon, … 6=Sat
    monthsToDisplay: 2,
  }}
/>
```

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

### Basic Single Datepicker Usage

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

Demonstrates how to use the SingleDatepicker component. Requires React's useState hook for managing the selected date.

```jsx
import { SingleDatepicker } from "chakra-dayzed-datepicker";

const [date, setDate] = useState(new Date());

<SingleDatepicker
  name="date-input"
  date={date}
  onDateChange={setDate}
/>
```

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

### Basic Range Datepicker Usage

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

Demonstrates how to use the RangeDatepicker component. It manages an array of dates for selection. Note that during selection, the array might temporarily hold a single intermediate date.

```jsx
import { RangeDatepicker } from "chakra-dayzed-datepicker";

const [selectedDates, setSelectedDates] = useState<Date[]>([new Date(), new Date()]);

<RangeDatepicker
  selectedDates={selectedDates}
  onDateChange={setSelectedDates}
/>
```

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

### Exported Date Name Constants

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Use these pre-built English name arrays for months and weekdays to configure the datepicker's display. They can be passed directly to the `configs.monthNames` and `configs.dayNames` properties.

```tsx
import {
  Month_Names_Short,
  Month_Names_Full,
  Weekday_Names_Short,
} from 'chakra-dayzed-datepicker';

// Use in configs
<SingleDatepicker
  date={date}
  onDateChange={setDate}
  configs={{
    monthNames: Month_Names_Full,
    dayNames: Weekday_Names_Short,
    firstDayOfWeek: 1,
    dateFormat: 'MMMM d, yyyy',
  }}
/>
```

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

### Inline Single Month Calendar with CalendarPanel

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Use `CalendarPanel` for an always-visible single calendar grid. It requires manual state management and event handling for date selection. Configure display options and date constraints via `dayzedHookProps` and `configs`.

```tsx
import React, { useState } from 'react';
import { Box } from '@chakra-ui/react';
import {
  CalendarPanel,
  OnDateSelected,
  Month_Names_Short,
  Weekday_Names_Short,
} from 'chakra-dayzed-datepicker';
import { subDays, addDays, format } from 'date-fns';

const today = new Date();

export default function InlineCalendar() {
  const [date, setDate] = useState(today);

  const handleDateSelected: OnDateSelected = ({ selectable, date }) => {
    if (selectable && date instanceof Date && !isNaN(date.getTime())) {
      setDate(date);
    }
  };

  return (
    <Box>
      <Box mb={2}>Selected: {format(date, 'yyyy-MM-dd')}</Box>
      <CalendarPanel
        dayzedHookProps={{
          showOutsideDays: true,
          onDateSelected: handleDateSelected,
          selected: date,
          minDate: subDays(today, 8),
          maxDate: addDays(today, 8),
        }}
        configs={{
          dateFormat: 'yyyy-MM-dd',
          monthNames: Month_Names_Short,
          dayNames: Weekday_Names_Short,
          firstDayOfWeek: 0,
        }}
      />
    </Box>
  );
}
```

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

### Configure DayOfMonth Button Props

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

For versions prior to npm@0.1.6, dayOfMonthBtnProps extends ButtonProps and supports selectedBg. Use this to customize the appearance of date buttons.

```typescript
dayOfMonthBtnProps: {
    borderColor: "red.300",
    selectedBg: "blue.200",
    _hover: {
      bg: 'blue.400',
    }
  },
```

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

### RangeDatepicker with default button trigger

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Implement the RangeDatepicker component with its default button trigger. Configure date range, display format, and number of months.

```tsx
import React, { useState } from 'react';
import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { RangeDatepicker } from 'chakra-dayzed-datepicker';

export default function App() {
  const [selectedDates, setSelectedDates] = useState<Date[]>([
    new Date(),
    new Date(),
  ]);

  return (
    <ChakraProvider value={defaultSystem}>
      {/* Default button trigger */}
      <RangeDatepicker
        id="range-default"
        selectedDates={selectedDates}
        onDateChange={setSelectedDates}
        minDate={new Date('2024-01-01')}
        maxDate={new Date('2025-12-31')}
        closeOnSelect={true}
        configs={{ dateFormat: 'yyyy-MM-dd', monthsToDisplay: 2 }}
      />

      {/* Input trigger variant */}
      <RangeDatepicker
        id="range-input"
        triggerVariant="input"
        selectedDates={selectedDates}
        onDateChange={setSelectedDates}
        propsConfigs={{
          inputProps: { size: 'sm', width: '18rem' },
        }}
      />

      {/* Reset to empty */}
      <button onClick={() => setSelectedDates([])}>Clear</button>
    </ChakraProvider>
  );
}
```

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

### Datepicker Props Configuration Structure

Source: https://github.com/aboveyunhai/chakra-dayzed-datepicker/blob/main/README.md

Defines the structure for customizing various datepicker elements using propsConfigs. This includes navigation buttons, date cells, input fields, and calendar panels.

```typescript
dayOfMonthBtnProps = {
  defaultBtnProps,
  isInRangeBtnProp,
  selectedBtnProps,
  todayBtnProps
}

popoverCompProps = {
  popoverContentProps,
  popoverBodyProps
}
```

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

### SingleDatepicker with default button trigger

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Use the SingleDatepicker component with its default button trigger. Configure date constraints and formatting.

```tsx
import React, { useState } from 'react';
import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { SingleDatepicker } from 'chakra-dayzed-datepicker';
import { subDays, addDays, startOfDay } from 'date-fns';

const today = new Date();

export default function App() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <ChakraProvider value={defaultSystem}>
      {/* Default button trigger */}
      <SingleDatepicker
        id="single-default"
        name="booking-date"
        date={date}
        onDateChange={setDate}
        minDate={subDays(today, 7)}
        maxDate={addDays(today, 30)}
        disabledDates={
          new Set([
            startOfDay(subDays(today, 3)).getTime(),
            startOfDay(subDays(today, 1)).getTime(),
          ])
        }
        closeOnSelect={true}
        defaultIsOpen={false}
        configs={{ dateFormat: 'yyyy-MM-dd' }}
      />

      {/* Input trigger variant */}
      <SingleDatepicker
        id="single-input"
        triggerVariant="input"
        date={date}
        onDateChange={setDate}
        configs={{ dateFormat: 'MM/dd/yyyy' }}
        propsConfigs={{
          inputProps: { size: 'sm', width: '12rem' },
          triggerIconBtnProps: { colorScheme: 'blue' },
        }}
      />
    </ChakraProvider>
  );
}
```

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

### Render datepicker popover in a portal

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Use `usePortal={true}` and `portalRef` to render the datepicker's popover outside its parent container, preventing clipping issues within modals or elements with `overflow: hidden`. The `portalRef` should point to the DOM node of the modal or container.

```tsx
import React, { useRef, useState } from 'react';
import { SingleDatepicker, RangeDatepicker } from 'chakra-dayzed-datepicker';

function ModalWithDatepicker() {
  const modalRef = useRef(null);
  const [date, setDate] = useState(new Date());
  const [range, setRange] = useState<Date[]>([new Date(), new Date()]);

  return (
    <div ref={modalRef} style={{ overflow: 'hidden', position: 'relative' }}>
      <SingleDatepicker
        date={date}
        onDateChange={setDate}
        usePortal={true}
        portalRef={modalRef}
      />
      <RangeDatepicker
        selectedDates={range}
        onDateChange={setRange}
        usePortal={true}
        portalRef={modalRef}
      />
    </div>
  );
}

```

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

### Override Chakra UI styles with propsConfigs

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Use `propsConfigs` to apply custom Chakra UI styles to individual elements of the datepicker, such as buttons, navigation, and popover components. This allows for full control over colors, variants, sizes, and pseudo-element styles.

```tsx
import { SingleDatepicker } from 'chakra-dayzed-datepicker';

<SingleDatepicker
  date={date}
  onDateChange={setDate}
  propsConfigs={{
    // The button/input that opens the popover
    triggerBtnProps: { colorScheme: 'teal', variant: 'solid' },

    // Navigation arrows (< >) in the calendar header
    dateNavBtnProps: { colorScheme: 'blue', variant: 'outline' },

    // Day-of-month buttons — four independent state layers
    // Precedence: default < isInRange < selected < today
    dayOfMonthBtnProps: {
      defaultBtnProps: {
        borderColor: 'gray.200',
        _hover: { background: 'blue.400', color: 'white' },
      },
      isInRangeBtnProps: {
        background: 'blue.100',
        color: 'blue.800',
        borderColor: 'blue.300',
      },
      selectedBtnProps: {
        background: 'blue.500',
        color: 'white',
      },
      todayBtnProps: {
        borderColor: 'orange.400',
        fontWeight: 'bold',
      },
    },

    // Popover container and body
    popoverCompProps: {
      popoverContentProps: {
        background: 'gray.800',
        color: 'white',
        boxShadow: 'lg',
      },
      popoverBodyProps: { padding: '1rem' },
    },

    // Internal calendar grid layout
    calendarPanelProps: {
      wrapperProps: { gap: 4 },
      contentProps: { borderWidth: 0 },
      headerProps: { padding: '8px' },
      dividerProps: { display: 'none' },
    },

    // Weekday label row (Sun, Mon, …)
    weekdayLabelProps: { fontWeight: 'normal', color: 'gray.500' },

    // Month/year heading
    dateHeadingProps: { fontWeight: 'semibold', fontSize: 'md' },
  }}
/>
```

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

### Custom Trigger UI with Children Render-Prop

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Replace the default button or input trigger with custom UI by providing a `children` function. This function receives the current date and must return a `Popover.Trigger`-compatible React node, allowing for fully customized trigger elements while maintaining managed popover state.

```tsx
import { SingleDatepicker } from 'chakra-dayzed-datepicker';
import { Avatar } from '@chakra-ui/react';
import { format } from 'date-fns';

<SingleDatepicker date={date} onDateChange={setDate}>
  {(currentDate) => (
    <button style={{ border: '1px dashed gray', padding: '4px 12px', borderRadius: 6 }}>
      {currentDate ? `📅 ${format(currentDate, 'MMM d, yyyy')}` : 'Pick a date'}
    </button>
  )}
</SingleDatepicker>
```

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

### Block specific dates with disabledDates

Source: https://context7.com/aboveyunhai/chakra-dayzed-datepicker/llms.txt

Prevent users from selecting specific dates by passing a `Set` of millisecond timestamps to the `disabledDates` prop. This applies to both click and keyboard interactions, and also affects direct input.

```tsx
import { startOfDay, subDays } from 'date-fns';
import { SingleDatepicker } from 'chakra-dayzed-datepicker';

const today = new Date();

const blockedDates = new Set([
  startOfDay(subDays(today, 5)).getTime(), // five days ago
  startOfDay(subDays(today, 3)).getTime(), // three days ago
  startOfDay(today).getTime(),             // today itself
]);

<SingleDatepicker
  date={date}
  onDateChange={setDate}
  disabledDates={blockedDates}
/>
```

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