|
|
|
|
@ -1,58 +1,155 @@
|
|
|
|
|
# React Calendar Component
|
|
|
|
|
# react-calendario
|
|
|
|
|
|
|
|
|
|
A modern, flexible calendar component built with React, TypeScript, and SCSS modules.
|
|
|
|
|
|
|
|
|
|
## Demo
|
|
|
|
|
|
|
|
|
|
Check out the live demo at [calendar.code.meow.ch](https://calendar.code.meow.ch)
|
|
|
|
|
A modern, flexible, and highly customizable calendar component library for React with TypeScript support.
|
|
|
|
|
|
|
|
|
|
## Features
|
|
|
|
|
|
|
|
|
|
- 📅 Multiple calendar views:
|
|
|
|
|
- Full year view with configurable month grid
|
|
|
|
|
- Single month view with customizable layout
|
|
|
|
|
- Week view with interactive options
|
|
|
|
|
- Date range picker with hover preview
|
|
|
|
|
- 🎨 Visual customization:
|
|
|
|
|
- Four header styles: expanded, compacted, tiny, and numeric
|
|
|
|
|
- Configurable day sizes (XS to XL)
|
|
|
|
|
- Adjustable font proportions
|
|
|
|
|
- Optional magnify effect for selected dates
|
|
|
|
|
- Weekend highlighting
|
|
|
|
|
- 🔧 Functional options:
|
|
|
|
|
- Month cutoff handling (dimmed, truncated, or show all)
|
|
|
|
|
- Interactive date range selection
|
|
|
|
|
- Hover states and preview
|
|
|
|
|
- Responsive design for all screen sizes
|
|
|
|
|
- 🛠 Technical features:
|
|
|
|
|
- Built with React + TypeScript
|
|
|
|
|
- SCSS modules for styling
|
|
|
|
|
- date-fns for date manipulation
|
|
|
|
|
- Zero external dependencies beyond core requirements
|
|
|
|
|
- 📅 **Multiple Views**: Year, Month, Week, and custom date ranges
|
|
|
|
|
- 🎨 **Highly Customizable**: Multiple header styles, sizes, and visual options
|
|
|
|
|
- 🔍 **Interactive**: Date selection, range picking, and click handlers
|
|
|
|
|
- 📱 **Responsive**: Works on all screen sizes
|
|
|
|
|
- 🎯 **TypeScript**: Full type safety and IntelliSense support
|
|
|
|
|
- 🎨 **Themeable**: Customizable colors and styles
|
|
|
|
|
- 📦 **Lightweight**: Minimal dependencies
|
|
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm install
|
|
|
|
|
npm install react-calendario date-fns classnames
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Development
|
|
|
|
|
or
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm run dev
|
|
|
|
|
yarn add react-calendario date-fns classnames
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Quick Start
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import { Month } from 'react-calendario';
|
|
|
|
|
|
|
|
|
|
function App() {
|
|
|
|
|
return (
|
|
|
|
|
<Month
|
|
|
|
|
date={new Date()}
|
|
|
|
|
dayHeaderStyle="expanded"
|
|
|
|
|
size="l"
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Usage Examples
|
|
|
|
|
## Components
|
|
|
|
|
|
|
|
|
|
### Date Range Picker
|
|
|
|
|
### Year
|
|
|
|
|
|
|
|
|
|
Display a full year calendar with customizable month grid.
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
import { Year } from './components/calendar/Year';
|
|
|
|
|
import { DateRange } from './types/calendar';
|
|
|
|
|
import { Year } from 'react-calendario';
|
|
|
|
|
|
|
|
|
|
<Year
|
|
|
|
|
year={2024}
|
|
|
|
|
dayHeaderStyle="tiny"
|
|
|
|
|
monthCutoff="truncate"
|
|
|
|
|
size="m"
|
|
|
|
|
fontProportion={100}
|
|
|
|
|
magnify={true}
|
|
|
|
|
/>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Month
|
|
|
|
|
|
|
|
|
|
Display a single month with various layout options.
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import { Month } from 'react-calendario';
|
|
|
|
|
|
|
|
|
|
<Month
|
|
|
|
|
date={new Date()}
|
|
|
|
|
dayHeaderStyle="expanded"
|
|
|
|
|
direction="column"
|
|
|
|
|
monthCutoff="dimmed"
|
|
|
|
|
size="xl"
|
|
|
|
|
/>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Week
|
|
|
|
|
|
|
|
|
|
Display a single week view.
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import { Week } from 'react-calendario';
|
|
|
|
|
|
|
|
|
|
<Week
|
|
|
|
|
startDate={new Date()}
|
|
|
|
|
headerStyle="compacted"
|
|
|
|
|
referenceMonth={0}
|
|
|
|
|
size="l"
|
|
|
|
|
/>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### DateRange
|
|
|
|
|
|
|
|
|
|
Display a custom date range with optional selection and interactivity.
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import { DateRange } from 'react-calendario';
|
|
|
|
|
|
|
|
|
|
<DateRange
|
|
|
|
|
from={new Date(2024, 0, 15)}
|
|
|
|
|
to={new Date(2024, 0, 22)}
|
|
|
|
|
included={true}
|
|
|
|
|
selected={true}
|
|
|
|
|
headerStyle="tiny"
|
|
|
|
|
size="l"
|
|
|
|
|
onDateClick={(date) => console.log('Clicked:', date)}
|
|
|
|
|
activeDates={[new Date(2024, 0, 17)]}
|
|
|
|
|
/>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Props
|
|
|
|
|
|
|
|
|
|
### Common Props
|
|
|
|
|
|
|
|
|
|
All components share these common props:
|
|
|
|
|
|
|
|
|
|
| Prop | Type | Default | Description |
|
|
|
|
|
|------|------|---------|-------------|
|
|
|
|
|
| `size` | `'xl' \| 'l' \| 'm' \| 's' \| 'xs' \| 'xxs'` | `'l'` | Day cell size |
|
|
|
|
|
| `fontProportion` | `number` | `100` | Font size percentage (10-100) |
|
|
|
|
|
| `magnify` | `boolean` | `false` | Enable magnify effect on selection |
|
|
|
|
|
| `weekendDays` | `number[]` | `[6, 0]` | Weekend day indices (0=Sunday) |
|
|
|
|
|
|
|
|
|
|
### Header Styles
|
|
|
|
|
|
|
|
|
|
| Style | Description |
|
|
|
|
|
|-------|-------------|
|
|
|
|
|
| `'expanded'` | Full day names (e.g., "Monday") |
|
|
|
|
|
| `'compacted'` | Three-letter abbreviations (e.g., "Mon") |
|
|
|
|
|
| `'tiny'` | Two-letter abbreviations (e.g., "Mo") |
|
|
|
|
|
| `'none'` | Numbers only |
|
|
|
|
|
|
|
|
|
|
### Size Options
|
|
|
|
|
|
|
|
|
|
- `'xxs'`: Extra extra small (20px height, 1:1.5 header:content ratio)
|
|
|
|
|
- `'xs'`: Extra small (24px height)
|
|
|
|
|
- `'s'`: Small (28px height)
|
|
|
|
|
- `'m'`: Medium (32px height)
|
|
|
|
|
- `'l'`: Large (36px height)
|
|
|
|
|
- `'xl'`: Extra large (48px height)
|
|
|
|
|
|
|
|
|
|
## Advanced Usage
|
|
|
|
|
|
|
|
|
|
### Date Range Selection
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
import { Year } from 'react-calendario';
|
|
|
|
|
|
|
|
|
|
function DateRangePicker() {
|
|
|
|
|
const [dateRange, setDateRange] = useState<DateRange>({
|
|
|
|
|
const [dateRange, setDateRange] = useState({
|
|
|
|
|
startDate: null,
|
|
|
|
|
endDate: null,
|
|
|
|
|
selecting: false,
|
|
|
|
|
@ -60,158 +157,85 @@ function DateRangePicker() {
|
|
|
|
|
anchorDate: null
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const handleDateSelect = (date: Date) => {
|
|
|
|
|
setDateRange(prev => {
|
|
|
|
|
if (!prev.selecting) {
|
|
|
|
|
return {
|
|
|
|
|
startDate: date,
|
|
|
|
|
endDate: date,
|
|
|
|
|
selecting: true,
|
|
|
|
|
hoverDate: date,
|
|
|
|
|
anchorDate: date
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
// Complete the selection
|
|
|
|
|
return {
|
|
|
|
|
startDate: prev.anchorDate,
|
|
|
|
|
endDate: date,
|
|
|
|
|
selecting: false,
|
|
|
|
|
hoverDate: null,
|
|
|
|
|
anchorDate: null
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
const handleDateSelect = (date) => {
|
|
|
|
|
// Your range selection logic
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Year
|
|
|
|
|
year={2024}
|
|
|
|
|
dayHeaderStyle="tiny"
|
|
|
|
|
monthCutoff="truncate"
|
|
|
|
|
weekendDays={[6, 0]}
|
|
|
|
|
dateRange={dateRange}
|
|
|
|
|
onDateSelect={handleDateSelect}
|
|
|
|
|
onDateHover={(date) => setDateRange(prev => ({ ...prev, hoverDate: date }))}
|
|
|
|
|
size="l"
|
|
|
|
|
fontProportion={100}
|
|
|
|
|
magnify={true}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Single Month View
|
|
|
|
|
### Interactive Date Range with Active States
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { Month } from './components/calendar/Month';
|
|
|
|
|
import { DateRange } from 'react-calendario';
|
|
|
|
|
|
|
|
|
|
function SingleMonth() {
|
|
|
|
|
return (
|
|
|
|
|
<Month
|
|
|
|
|
date={new Date()}
|
|
|
|
|
dayHeaderStyle="expanded"
|
|
|
|
|
direction="column"
|
|
|
|
|
monthCutoff="dimmed"
|
|
|
|
|
weekendDays={[6, 0]}
|
|
|
|
|
size="xl"
|
|
|
|
|
fontProportion={100}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
function InteractiveCalendar() {
|
|
|
|
|
const [activeDates, setActiveDates] = useState([]);
|
|
|
|
|
|
|
|
|
|
### Week View
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { Week } from './components/calendar/Week';
|
|
|
|
|
const handleDateClick = (date) => {
|
|
|
|
|
setActiveDates(prev => {
|
|
|
|
|
const exists = prev.some(d => d.getTime() === date.getTime());
|
|
|
|
|
return exists
|
|
|
|
|
? prev.filter(d => d.getTime() !== date.getTime())
|
|
|
|
|
: [...prev, date];
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function WeekView() {
|
|
|
|
|
return (
|
|
|
|
|
<Week
|
|
|
|
|
startDate={new Date()}
|
|
|
|
|
headerStyle="compacted"
|
|
|
|
|
referenceMonth={new Date().getMonth()}
|
|
|
|
|
weekendDays={[6, 0]}
|
|
|
|
|
size="l"
|
|
|
|
|
fontProportion={100}
|
|
|
|
|
<DateRange
|
|
|
|
|
from={new Date(2024, 0, 1)}
|
|
|
|
|
to={new Date(2024, 0, 31)}
|
|
|
|
|
onDateClick={handleDateClick}
|
|
|
|
|
activeDates={activeDates}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Compact Year View
|
|
|
|
|
## Styling
|
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import { Year } from './components/calendar/Year';
|
|
|
|
|
The components use CSS modules and CSS variables for theming. You can override the default styles by:
|
|
|
|
|
|
|
|
|
|
function CompactYear() {
|
|
|
|
|
return (
|
|
|
|
|
<Year
|
|
|
|
|
year={2024}
|
|
|
|
|
dayHeaderStyle="tiny"
|
|
|
|
|
monthCutoff="truncate"
|
|
|
|
|
weekendDays={[6, 0]}
|
|
|
|
|
size="xs"
|
|
|
|
|
fontProportion={80}
|
|
|
|
|
magnify={true}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
1. Using the built-in props for common customizations
|
|
|
|
|
2. Overriding CSS variables in your global styles
|
|
|
|
|
3. Applying custom CSS classes
|
|
|
|
|
|
|
|
|
|
## Component Props
|
|
|
|
|
|
|
|
|
|
### Year Component
|
|
|
|
|
```typescript
|
|
|
|
|
interface YearProps {
|
|
|
|
|
year: number;
|
|
|
|
|
dayHeaderStyle: 'expanded' | 'compacted' | 'tiny' | 'none';
|
|
|
|
|
monthDayOfWeekHeaderStyle?: HeaderStyle;
|
|
|
|
|
monthCutoff?: 'dimmed' | 'truncate' | undefined;
|
|
|
|
|
weekendDays?: number[];
|
|
|
|
|
dateRange?: DateRange;
|
|
|
|
|
onDateSelect?: (date: Date) => void;
|
|
|
|
|
onDateHover?: (date: Date) => void;
|
|
|
|
|
size?: 'xl' | 'l' | 'm' | 's' | 'xs';
|
|
|
|
|
fontProportion?: number;
|
|
|
|
|
magnify?: boolean;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
### CSS Variables
|
|
|
|
|
|
|
|
|
|
### Month Component
|
|
|
|
|
```typescript
|
|
|
|
|
interface MonthProps {
|
|
|
|
|
date: Date;
|
|
|
|
|
dayHeaderStyle: HeaderStyle;
|
|
|
|
|
direction: 'row' | 'column';
|
|
|
|
|
monthCutoff?: MonthCutoffType;
|
|
|
|
|
weekendDays?: number[];
|
|
|
|
|
dateRange?: DateRange;
|
|
|
|
|
onDateSelect?: (date: Date) => void;
|
|
|
|
|
onDateHover?: (date: Date) => void;
|
|
|
|
|
size?: DaySize;
|
|
|
|
|
fontProportion?: number;
|
|
|
|
|
magnify?: boolean;
|
|
|
|
|
```css
|
|
|
|
|
:root {
|
|
|
|
|
--color-primary: #2196f3;
|
|
|
|
|
--color-primary-dark: #1976d2;
|
|
|
|
|
--color-selected: #e3f2fd;
|
|
|
|
|
/* ... and more */
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Styling
|
|
|
|
|
|
|
|
|
|
The component uses SCSS modules for styling. Key style files:
|
|
|
|
|
|
|
|
|
|
- `src/components/calendar/shared/_colors.scss`: Color variables
|
|
|
|
|
- `src/components/calendar/shared/_variables.scss`: Layout variables
|
|
|
|
|
- Individual component SCSS modules for specific styling
|
|
|
|
|
## TypeScript
|
|
|
|
|
|
|
|
|
|
## Browser Support
|
|
|
|
|
Full TypeScript support with exported types:
|
|
|
|
|
|
|
|
|
|
- Chrome (latest)
|
|
|
|
|
- Firefox (latest)
|
|
|
|
|
- Safari (latest)
|
|
|
|
|
- Edge (latest)
|
|
|
|
|
```tsx
|
|
|
|
|
import type {
|
|
|
|
|
DateRange,
|
|
|
|
|
HeaderStyle,
|
|
|
|
|
DaySize,
|
|
|
|
|
MonthCutoffType
|
|
|
|
|
} from 'react-calendario';
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## License
|
|
|
|
|
|
|
|
|
|
MIT
|
|
|
|
|
|
|
|
|
|
## Contributing
|
|
|
|
|
|
|
|
|
|
Contributions are welcome! Please feel free to submit a Pull Request.
|
Guillermo Pages
5 months ago