fix: no weekends selected color
Guillermo Pages
4 months ago
parent
cca9b10a45
commit
6cb241b5d2
@ -0,0 +1,219 @@
|
||||
# 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
|
||||
Loading…
Reference in New Issue