Calendar

Displays dates in a structured format, allowing users to view, select, and interact with specific days.

@arctic-kit/snow

View source code

View storybook

Usage

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Color

import { useState } from 'react';
import { Calendar } from '@arctic-kit/snow';

function Demo() {
  const [value, setValue] = useState(new Date());
  return <Calendar selected={value} onSelect={setValue} color="primary" />;
}

API Reference

Props	Type	Default
`className`	`string \| undefined`	---
`color`	`SnowColor`	---
`hasBorder`	`boolean \| undefined`	`true`
`maxDate`	`Date \| undefined`	---
`minDate`	`Date \| undefined`	---
`onMonthChange`	`((month: number) => void) \| undefined`	---
`onSelect`	`(date: Date) => void`	---
`onYearChange`	`((year: number) => void) \| undefined`	---
`selected`	`Date \| undefined`	---
`style`	`CSSProperties \| undefined`	---

Button Group Card