Knowledgebase

Overview

The Event Calendar is a modern, interactive calendar interface that displays your liturgical calendar, services, and parish events in multiple view formats. It provides a clean, responsive design with powerful features like search, tooltips, and flexible customization options.

What is the Event Calendar?

The Event Calendar is an advanced calendar display system that combines:

• Multiple View Modes - Month grid, Day detail, and List views
• Interactive Elements - Click-to-navigate dates, search functionality, and informational tooltips
• Smart Integration - Automatically displays liturgical services, feasts, fasting information, and parish news
• Responsive Design - Adapts beautifully to desktop, tablet, and mobile devices
• Visual Customization - Control colors, fonts, and layout to match your parish website

Accessing the Event Calendar

1. Log into your Site Manager
2. Navigate to the page where you want to add a calendar
3. Click "Add Section"
4. Choose "Component - Upcoming Calendar"
5. In the Layout dropdown, select "Event Calendar"

View Modes

The Event Calendar offers three distinct ways to display your calendar:

Month View

• Traditional month grid showing all days
• Each day displays feast names, service times, and events
• Click any date to view full details for that day
• Color-coded fasting periods (optional)
• Old Calendar dates shown alongside New Calendar (if enabled)

Day View

• Detailed view of a single day
• Expandable sections for each event with full descriptions
• Service times and locations
• Fasting information
• Images and extended content for each event

List View

• Chronological listing of upcoming events
• Shows next 30 days by default (configurable)
• Compact format perfect for "What's Coming Up" displays
• Includes all services, feasts, and parish events

Responsive Default

• Automatically chooses the best view for each device
• Mobile users see List view (easier to read on small screens)
• Desktop users see Month view (better overview)

Configuration Options

Basic Settings

Default View

• Choose which view loads first: Day, List, Month, or Responsive
• Responsive automatically selects List for mobile, Month for desktop

Font Color

• Default: Inherits from your page theme
• Light: White/light text (for dark backgrounds)
• Dark: Black/dark text (for light backgrounds)

Show Day Colors

• No day colors: Clean, minimal appearance
• Full day background colored: Days tinted by fasting/feast type
• Just the date number with colored border: Subtle badge-style indicators

Show Fasting

• No fasting information: Hide fasting details
• Show fasting text: Display text descriptions (e.g., "Fast - Wine and Oil")
• Show fasting icons: Display icons representing fasting type

Calendar Height

• Adjust from 400px to 800px
• Recommended: 600px for most layouts

Corner Radius

• Control the roundness of cards and elements
• Range from sharp (0px) to very round (20px)
• Default: 8px for modern, friendly appearance

Color Customization

Primary Color

• Accent color for active tabs, highlights, and interactive elements
• Default: Blue (#007bff)

Border Color

• Divider lines between days and sections
• Default: Light gray (#dee2e6)

Calendar Background

• Overall background color of the calendar
• Leave blank to use white

Header Background

• Background color for the top navigation bar
• Leave blank to use Primary Color

Today Cell Background

• Highlight color for the current day
• Leave blank for a subtle tint of the Highlight color

Highlight / Accents

• Used for month chips, hover effects, badges
• Leave blank to use Primary Color

Display Options

Show Search ☑

• Adds a search bar at the top
• Users can search for specific events, saints, or services
• Results update instantly

Show Navigation ☑

• Shows Previous/Next arrows and Today button
• Allows users to move through months and dates

Show Today Button ☑

• Quick link to return to the current date
• Especially useful after browsing future months

Responsive Design ☑

• Automatically adapts layout for mobile devices
• Strongly recommended to keep checked

Show OC Date ☑

• Displays Old Calendar date alongside New Calendar
• Only appears if your parish is set to Old Calendar

Month Text on Mobile ☑

• When unchecked, month view shows "+N" badge instead of event text on mobile
• Saves space on small screens
• When checked, shows full event text even on mobile

Show Tooltips ☑

• Enables interactive popups for saints, feasts, and liturgical terms
• See the Calendar Tooltips Feature Guide for details

Show Sync ☑

• Displays buttons to sync calendar to iCal or Google Calendar
• Users can add your parish calendar to their personal calendars

Show Print ☑

• Link to printer-friendly version of the month
• Opens traditional monthly calendar layout

Advanced Options

Custom CSS

• Add your own CSS code to fine-tune the calendar appearance
• For advanced users comfortable with CSS
• Example use: Adjust spacing, fonts, or specific element styles

Using the Calendar

Navigation

Previous/Next Arrows

• Move backward or forward by one day, week, or month (depending on view)

Title Click (e.g., "September 2025")

• Opens a date picker popup
• Quickly jump to any date or month
• Shows today's date highlighted

Today Button

• Returns to the current date in current view
• Quick way to get back after browsing

View Tabs (List / Month / Day)

• Switch between different display modes
• Your choice persists as you navigate

Search Functionality

1. Type a search term in the search box at the top
2. Press Enter or click the search icon
3. Calendar filters to show only matching events
4. Examples of searches:
   • Saint names: "John Chrysostom"
   • Service types: "Vespers", "Liturgy"
   • Feast days: "Nativity", "Pentecost"
   • Parish events: "Bible Study", "Coffee Hour"

Search Tips:

• Searches the next 30 days from current date
• Not case-sensitive
• Partial matches work (searching "vest" finds "Vesperal Liturgy")
• Supports aliases (searching "Matins" also finds "Orthros")

Tooltips

When tooltips are enabled (default), you'll see:

• Underlined terms - Saints, feasts, liturgical terms
• Hover or click - See detailed information popup
• Learn more links - Click through for full articles

Tooltips show:

• Brief description
• Optional icon or photo
• "More information" link when available

See the Calendar Tooltips Feature Guide for more details about managing tooltip content.

Day Colors

When "Show Day Colors" is enabled:

Background Mode (Full day background colored)

• Entire day cell is tinted with the fasting/feast color
• Provides strong visual indication of liturgical seasons
• Colors defined in Components → Monthly Calendar → Manage Feast Colors

Badge Mode (Just the date number with colored border)

• More subtle visual approach
• Colored border around the date number
• Maintains clean, uncluttered appearance

Color Meanings:

• Standard colors represent fasting levels
• Special seasons (Bright Week, Paschal Season) have distinct colors
• Feast days may override default colors

Fasting Display

When "Show Fasting" is enabled:

Text Mode

• Shows descriptions like:
  • "Fast - Wine and Oil"
  • "Fast - Fish, Wine, and Oil"
  • "Fast Free"
  • "Strict Fast"

Icon Mode

• Visual icons representing fasting types:
  • Cross icon: Regular fast
  • Grapes icon: Wine and oil permitted
  • Fish icon: Fish permitted
  • No icon: Fast-free period
• Hover over icon to see text description

Best Practices

Choosing the Right View

Month View is best when:

• Users need to see the whole month at a glance
• Planning ahead for multiple weeks
• Checking feast days and fasting periods
• Viewing on desktop or tablet

Day View is best when:

• Displaying detailed information about services
• Today's schedule on the homepage
• Mobile users who want full details
• When events have long descriptions or images

List View is best when:

• Showing "What's Coming Up This Week"
• Mobile-first layouts
• Sidebar widgets with limited width
• When you want chronological, scannable format

Color Scheme Selection

Match Your Website Theme:

• Use your parish colors for Primary and Highlight
• Choose Border and Background colors that complement your page
• Test both light and dark Font Color options to ensure readability

Consider Contrast:

• Ensure text is readable against backgrounds
• Light text on dark calendars, dark text on light calendars
• Test on actual devices in different lighting

Use Day Colors Wisely:

• Background mode: Best for liturgical focus, educational purposes
• Badge mode: Better for modern, clean designs
• No colors: Most minimal, lets content speak

Mobile Optimization

Recommended Settings for Mobile:

• Default View: Responsive (auto-selects List on mobile)
• Responsive Design: ☑ Checked
• Month Text on Mobile: ☐ Unchecked (shows +N badge instead)
• Show Search: ☑ Checked (very useful on mobile)

Testing:

• Always preview on an actual phone
• Check that touch targets are large enough
• Verify text is readable without zooming

Performance Tips

• Keep custom CSS minimal
• Use corner radius moderately (very high values can slow rendering)
• If calendar loads slowly, reduce the height setting

Comparison with Liturgical Calendar

The Event Calendar (option 5) is the modern replacement for the older Liturgical Calendar (option 4):

Event Calendar advantages:

• Multiple view modes (Month, Day, List)
• Built-in search functionality
• Interactive date picker
• Better mobile experience
• More customization options
• Cleaner, more modern design
• Integrated tooltip system

When to use Liturgical Calendar instead:

• You prefer the traditional printed-calendar appearance
• Users are familiar with the old interface
• You need maximum simplicity
• Legacy compatibility

We recommend using the Event Calendar for all new implementations.

Troubleshooting

Calendar appears too small

• Increase Calendar Height in settings
• Check that parent container isn't limiting width

Colors don't match my theme

• Adjust Primary Color and Border Color settings
• Try different Font Color option (Light/Dark/Default)
• Add custom CSS if needed for fine-tuning

Events not showing in search

• Verify the event date is within the next 30 days
• Check spelling of search terms
• Make sure the event is actually on the calendar

Mobile view looks crowded

• Uncheck "Month Text on Mobile" to use +N badges
• Consider using List as default view for mobile users
• Use Responsive default view setting

Old Calendar dates not appearing

• Verify your parish is set to Old Calendar in Parish Settings
• Check "Show OC Date" is enabled in calendar settings

Related Articles

• Calendar Tooltips Feature Guide - Managing interactive popups
• Rebuilding the Calendar Tooltip Cache - Updating tooltip links