Cally is a set of small, feature-rich calendar components designed to be lightweight, versatile, and customizable. With a focus on HTML-friendliness, Cally aims to provide building blocks for developers to create their own unique calendar experiences.

Here are some key features and benefits of Cally:

• Small bundle size: Less than 8.5KB min/gzip, ensuring minimal impact on website performance.

• Full feature set: Supports single dates, ranges, and multiple month displays, providing flexibility in calendar design.

• Framework-independent: Easily integrated into any project, regardless of the chosen framework.

• Minimal dependencies: Relies on only one dependency, simplifying development and reducing potential conflicts.

• Accessibility: Designed with keyboard and screen reader support, ensuring usability for all users.

• Localizability: Uses Intl.DateTimeFormat, CSS logical properties, and RTL support for internationalization.

• Themeability: Offers CSS parts and custom properties for extensive customization options.

• Composability: Doesn't impose specific DOM structures, allowing for seamless integration with other components.

Cally provides several components to facilitate calendar creation:

• <calendar-date>: For displaying single dates.

• <calendar-range>: For displaying date ranges.

• <calendar-month>: Represents a single month and can be used within both <calendar-date> and

• <calendar-range> components.

To display multiple months, developers can use multiple <calendar-month> components within <calendar-range> or <calendar-date>, adjusting the months attribute and using the offset attribute to specify the relative position of each month.

Cally emphasizes layout flexibility by allowing developers to customize the arrangement of months using CSS techniques like flexbox or grid.

Cally is not intended to be a complete date picker solution but instead provides the fundamental components for building one.