Configuring Calendar Colors

Overview

Calendar Colors allow you to customize the visual appearance of your monthly liturgical calendar by assigning specific colors to different feast ranks. This color-coding helps visitors quickly identify important feast days and liturgical celebrations at a glance. The color configuration system provides control over how each feast rank appears on your calendar.

Accessing Calendar Colors

1. Navigate to Components → Monthly Calendar
2. Click "Edit" next to Calendar Colors in the Customization section
3. The Calendar Colors editor will open with color fields for each feast rank

Understanding Feast Rank Colors

The calendar uses colors to distinguish between different ranks of liturgical days and feast celebrations. Each rank can have its own distinct color to reflect its liturgical importance.

Available Feast Ranks

The system includes nine feast rank categories that you can colorize:

Pascha - Feast of Feasts

• The highest-ranking celebration in the Orthodox calendar
• Easter Sunday
• Should stand out above all other days

Great Feasts of the Lord

• Major celebrations like Nativity, Theophany, Transfiguration
• Twelve Great Feasts related to Christ's life

Minor Feasts of the Lord

• Lesser feasts related to Christ
• Still distinguished from ordinary days

Great Feasts of the Theotokos

• Major Marian feast days like the Dormition, Nativity of the Theotokos

Minor Feasts of the Theotokos

• Lesser Marian celebrations

Sundays of the Year

• Regular Lord's Days throughout the liturgical year

Great Saints

• Major saint commemorations with significant liturgical observance

Well Known Saints

• Common saint commemorations

Lesser Known Saints

• Daily saint commemorations

Why Color-Coding Matters

Liturgical Significance

• Helps communicate the importance of different feast days
• Creates visual distinction between ordinary and special days

User Experience

• Visitors can quickly scan the calendar for important dates
• Special celebrations stand out from regular schedules

Parish Identity

• Match your parish's website design
• Reflect your jurisdiction's traditions

Setting Colors for Each Rank

For each feast rank, you can specify a color using the color input field:

1. Locate the feast rank you want to configure
2. Click the color swatch or enter a color value directly
3. Choose your color using the color picker that appears
4. Repeat for each feast rank you want to customize
5. Save your changes at the bottom of the form

Color Input Methods

Color Picker

• Click the color box to open a visual color picker
• Drag to select your desired color
• Real-time preview of your selection

Hex Color Codes

• Enter 6-digit hexadecimal format: #RRGGBB
• Example: #FFD700 (gold), #800080 (purple)
• Precise color specification

Named Colors

• Standard web color names
• Examples: gold, purple, white, red

RGB Values

• Format: rgb(255, 215, 0) for gold
• Red, Green, Blue values from 0-255

Choosing Effective Colors

Traditional Orthodox Color Associations

Gold/Yellow

• Glory, divinity, resurrection
• Appropriate for: Pascha, Great Feasts of the Lord

White

• Purity, joy, celebration
• Appropriate for: Feasts, Sundays

Blue

• Theotokos, heaven
• Appropriate for: Marian feasts

Purple/Violet

• Often used in some traditions
• Can work for: Various feast days

Creating Visual Hierarchy

Establish clear ranking:

1. Pascha should be most prominent
2. Great Feasts clearly distinguished
3. Regular Sundays consistent but less prominent
4. Saints' days appropriately subtle

Avoid confusion:

• Don't use similar colors for different ranks
• Maintain sufficient contrast between adjacent ranks
• Test with actual calendar data

Example Color Schemes

Traditional Liturgical Scheme:

• Pascha: Gold #FFD700
• Great Feasts of the Lord: #FFA500
• Great Feasts of the Theotokos: Sky Blue #87CEEB
• Sundays: Light Yellow #FFFACD
• Great Saints: Light Gold #FFEB9C

Contemporary Clean Scheme:

• Pascha: Deep Gold #CC9900
• Great Feasts of the Lord: #E6B800
• Great Feasts of the Theotokos: #6699CC
• Sundays: Pale Blue #E6F2FF
• Great Saints: Light Peach #FFE6CC

High Contrast Scheme:

• Pascha: Bright Red #FF0000
• Great Feasts of the Lord: Orange #FF8C00
• Great Feasts of the Theotokos: Royal Blue #4169E1
• Sundays: Light Yellow #FFFACD
• Great Saints: Light Coral #F08080

Testing Your Color Configuration

Preview Your Changes

After saving your color configuration:

1. Return to Monthly Calendar
2. Select a month with various feast types
3. Click "View Month"
4. Review how the colors appear on actual calendar days

Check these aspects:

• Feast days are clearly distinguished by rank
• Text remains readable on all background colors
• Colors appear consistent across the month
• Overall appearance is visually pleasing

Test on Multiple Devices

Desktop browsers:

• Check in Chrome, Firefox, Safari, and Edge
• Verify colors appear as intended

Mobile devices:

• Test on phones and tablets
• Check both portrait and landscape orientation

Readability Considerations

Color Contrast:

• Text must be readable on colored backgrounds
• Light backgrounds typically work best
• Test with actual calendar content

Accessibility:

• Don't rely on color alone to convey information
• Ensure sufficient contrast between text and background
• Consider colorblind accessibility

Saving Your Configuration

1. Review all color selections
2. Click "Save Changes" at the bottom of the form
3. You'll be redirected back to the Monthly Calendar page
4. Colors will be applied to all calendar displays

Note: Changes take effect immediately but you may need to clear your browser cache to see updates on public-facing calendars.

Best Practices

Visual Hierarchy

• Most prominent: Pascha (Feast of Feasts)
• Very prominent: Great Feasts of the Lord and Theotokos
• Moderately prominent: Sundays and Great Saints
• Subtle: Well Known and Lesser Known Saints

Consistency and Tradition

• Consult with your priest about appropriate liturgical colors
• Research your jurisdiction's practices
• Maintain the same colors consistently
• Don't change colors frequently - users learn associations

Practical Tips

• Start simple: Configure major feast ranks first, add details later
• Test thoroughly: View actual calendar months before publishing
• Get feedback: Ask parish members if colors are helpful and clear
• Document choices: Keep a record of your color scheme and hex codes

Troubleshooting

Colors Not Appearing

Check these items:

1. Configuration was saved properly
2. Browser cache has been cleared (Ctrl+F5 or Cmd+Shift+R)
3. Colors are in valid format (hex, named, or rgb)
4. Viewing the correct calendar page

Solution: Re-save configuration, clear cache completely, and refresh the calendar page.

Colors Look Different Than Expected

Possible causes:

• Monitor calibration differences
• Browser rendering variations
• Device screen settings

Solution:

• Test on multiple devices
• Use standard web-safe colors
• Verify hex codes are correct

Poor Readability

Issues:

• Text hard to read on colored backgrounds
• Similar colors too close together

Solution:

1. Choose lighter background colors
2. Ensure sufficient contrast
3. Test with actual calendar content
4. Select more distinct colors for different ranks

Updating Your Colors

When to Update

Consider updating colors when:

• Redesigning your website
• Feedback indicates confusion
• Parish branding changes
• Improving accessibility

Avoid frequent changes - users become familiar with your color system.

Making Changes

1. Navigate back to Calendar Colors
2. Modify the colors you want to change
3. Click "Save Changes"
4. Test the updated calendar display
5. Clear browser cache to see changes