# Calendar Component Usage Guide

## 🎨 Custom Color Schemes

### Basic Active Colors (Simple)
For highlighting specific dates with custom colors:

```tsx
import { Year, ActiveColors } from 'react-calendario';

const activeColors: ActiveColors = {
  headerBg: '#D4EDDA',
  headerColor: '#155724',
  contentBg: '#28A745',
  contentColor: '#FFFFFF'
};

<Year 
  year={2025}
  activeDates={[new Date(2025, 0, 1), new Date(2025, 11, 25)]}
  activeColors={activeColors}
/>
```

### Comprehensive Color Scheme (Advanced)
Full control over colors for every state and day type:

```tsx
import { Year, ColorScheme } from 'react-calendario';

const colorScheme: ColorScheme = [
  // Weekday colors
  { 
    type: 'weekday', 
    state: 'default',  // Normal weekday
    colors: { 
      header: { backgroundColor: '#2c3e50', color: '#ffffff' },
      content: { backgroundColor: '#ffffff', color: '#2c3e50' }
    }
  },
  { 
    type: 'weekday', 
    state: 'rangeStart',  // First day of selected range
    colors: {
      header: { backgroundColor: '#2980b9', color: '#ffffff' },
      content: { backgroundColor: '#3498db', color: '#ffffff' }
    }
  },
  { 
    type: 'weekday', 
    state: 'rangeMid',  // Middle days of selected range
    colors: {
      header: { backgroundColor: '#5dade2', color: '#ffffff' },
      content: { backgroundColor: '#aed6f1', color: '#1a5490' }
    }
  },
  
  // Weekend colors
  { 
    type: 'weekend', 
    state: 'default',  // Normal weekend
    colors: {
      header: { backgroundColor: '#7f8c8d', color: '#ffffff' },
      content: { backgroundColor: '#ecf0f1', color: '#34495e' }
    }
  },
  { 
    type: 'weekend', 
    state: 'rangeStart',  // Weekend that starts a range
    colors: {
      header: { backgroundColor: '#2980b9', color: '#ffffff' },
      content: { backgroundColor: '#3498db', color: '#ffffff' }
    }
  },
  // ... more states
];

<Year 
  year={2025}
  colorScheme={colorScheme}
/>
```

#### Available States:
- `default` - Normal day appearance
- `selected` - Day is part of a completed selection (deprecated, use `rangeMid`)
- `selecting` - Day is being hovered during selection (important for weekends!)
- `rangeStart` - First day of a range
- `rangeEnd` - Last day of a range  
- `rangeMid` - Middle days of a selected range
- `active` - Special highlighted days (holidays, events)

#### Day Types:
- `weekday` - Monday through Friday
- `weekend` - Saturday and Sunday (or custom weekend days)

## 🌍 Locale Support

### Basic Usage
```tsx
import { Year } from 'react-calendario';
import { fr, de, ja, es } from 'date-fns/locale';

// French
<Year year={2025} locale={fr} />

// German
<Year year={2025} locale={de} />

// Japanese
<Year year={2025} locale={ja} />

// Spanish
<Year year={2025} locale={es} />
```

### What Gets Localized:
- Month names (January → Janvier → Januar → 一月)
- Day headers based on style:
  - `expanded`: Full names (MONDAY → LUNDI → MONTAG)
  - `compacted`: 3-letter (MON → LUN → MO)
  - `tiny`: Single letter (M → L → M)
- Date formats in tooltips and labels

### Available Locales:
All date-fns locales are supported. Common ones include:
- `enUS` - English (US) - Default
- `es` - Spanish
- `fr` - French
- `de` - German
- `it` - Italian
- `pt` - Portuguese
- `ja` - Japanese
- `ko` - Korean
- `zhCN` - Chinese (Simplified)
- `ru` - Russian
- `ar` - Arabic
- `nl` - Dutch
- `pl` - Polish
- `tr` - Turkish
- `sv` - Swedish
- `nb` - Norwegian

## 🎯 Combined Example

Using both features together:

```tsx
import { Year, ColorScheme } from 'react-calendario';
import { fr } from 'date-fns/locale';

const frenchHolidayScheme: ColorScheme = [
  // Regular days with French aesthetic
  { 
    type: 'weekday', 
    state: 'default',
    colors: { 
      header: { backgroundColor: '#002395', color: '#ffffff' },  // French blue
      content: { backgroundColor: '#ffffff', color: '#002395' }
    }
  },
  // Weekends in subtle gray
  { 
    type: 'weekend', 
    state: 'default',
    colors: {
      header: { backgroundColor: '#95a5a6', color: '#ffffff' },
      content: { backgroundColor: '#ecf0f1', color: '#34495e' }
    }
  },
  // French holidays in red
  { 
    type: 'weekday', 
    state: 'active',
    colors: {
      header: { backgroundColor: '#ed2939', color: '#ffffff' },  // French red
      content: { backgroundColor: '#c0392b', color: '#ffffff' }
    }
  },
  { 
    type: 'weekend', 
    state: 'active',
    colors: {
      header: { backgroundColor: '#c0392b', color: '#ffffff' },
      content: { backgroundColor: '#ed2939', color: '#ffffff' }
    }
  }
];

const frenchHolidays = [
  new Date(2025, 0, 1),   // Jour de l'An
  new Date(2025, 4, 1),   // Fête du Travail
  new Date(2025, 6, 14),  // Fête Nationale
  new Date(2025, 11, 25)  // Noël
];

<Year 
  year={2025}
  locale={fr}
  colorScheme={frenchHolidayScheme}
  activeDates={frenchHolidays}
  dayHeaderStyle="compacted"
/>
```

## 📝 Tips

1. **Color Scheme Fallbacks**: You don't need to define every state. The system intelligently falls back:
   - Weekend states → Weekday states of same type
   - Missing states → Default state
   - Weekend default → Weekday default

2. **Performance**: ColorScheme is more efficient than inline styles for large calendars

3. **Accessibility**: Ensure sufficient color contrast between background and text colors

4. **Locale + Colors**: Combine locale with themed colors for culturally appropriate calendars

5. **Weekend Customization**: Weekend days are automatically detected and styled differently, including when they're part of a selected range