Skip to main content

Event Elements

Specialized Bricks elements for displaying event information.

Event Occurrences Element​

Display upcoming dates for a single event—perfect for event detail pages.

Event Occurrences Element

Adding the Element​

  1. On your single event template, add the LRE Event Occurrences element
  2. Configure display mode and styling

Display Modes​

List Mode​

Shows occurrences as a formatted list.

List Settings:

SettingDescription
LayoutVertical or Horizontal
Show WeekdayDisplay day name
Show TimeDisplay event time
Max ItemsLimit number shown
Link DatesMake dates clickable
Separator StyleLine between items (solid, dashed, dotted, double)
Separator ColorLine color

Styling Controls:

  • Container: width, padding, background, border, border radius
  • Item: padding, gap between items
  • Typography: separate controls for date, weekday, and time

Mini Calendar Mode​

Shows a compact monthly calendar highlighting occurrence dates.

Mini Calendar Mode

Calendar Settings:

SettingDescription
Dot ColorColor of occurrence indicators
Show NavigationPrev/Next month arrows
Custom Arrow IconsUse your uploaded calendar arrows

Styling Controls:

  • Width and padding
  • Day cell backgrounds (normal, today, occurrence)
  • Typography for headers and dates
  • Border and border radius

Common Settings​

SettingDescription
Number of OccurrencesHow many dates to show (max 375)
Exclude CurrentHide the currently viewed occurrence
Empty MessageText when no upcoming dates
Date FormatPHP date format string

Use Cases​

  • Event detail page: Show "Other Dates" for recurring events
  • Sidebar widget: Quick view of upcoming sessions
  • Registration page: Let users see all available dates

Countdown Element​

Display a contextual countdown or relative time label for upcoming events.

Adding the Element​

  1. Search for LRE Countdown in the elements panel
  2. Add it inside a query loop or on a single event template

Display Modes​

Smart Label​

Natural-language output based on proximity: "Today at 2:00 pm", "Tomorrow at 9:00 am", "Starting in 45 minutes", or "Happening now".

Countdown Units​

Structured countdown with individual time units that tick live:

3 days  12 hours  45 minutes  30 seconds

Compact Badge​

Minimal badge-style display for event cards:

3d 12h 45m

Content Settings​

SettingDescription
Display ModeSmart Label, Countdown Units, or Compact Badge
Show DaysToggle days unit
Show HoursToggle hours unit
Show MinutesToggle minutes unit
Show SecondsToggle seconds unit

Styling​

Full control over typography, colors, spacing, and per-unit styling. Status-aware color controls let you style the "Happening now" state differently from an active countdown.

Styling controls are available in both Countdown Units and Compact Badge modes.

See Countdown & Relative Time for full details.

Pagination Element​

Add pagination to your Recurring Events query loops.

Setup​

  1. Ensure your query loop has "Posts Per Page" set
  2. Add the LRE Pagination element below your query loop
  3. Select your query loop as the target

Settings​

SettingDescription
Target QueryWhich query loop to paginate
Show Page NumbersDisplay numbered page links
Show Prev/NextNavigation arrows
Previous TextText for previous button
Next TextText for next button
Max Page LinksHow many page numbers to show

Styling​

Full control over:

  • Button/number appearance
  • Active page styling
  • Hover states
  • Spacing and alignment
  • Disabled state

Behavior​

  • Updates via AJAX (no page reload)
  • Works with active filters
  • Updates URL for shareable links
  • Scrolls to top of query loop on page change

Element Best Practices​

Performance​

  1. Limit occurrences — Don't request more than needed
  2. Use pagination — Don't show hundreds of events at once
  3. Lazy load images — Enable browser lazy loading

Accessibility​

  1. Meaningful labels — Use descriptive text for navigation
  2. Keyboard navigation — Test that filters work with keyboard
  3. Screen reader text — Add context for assistive technology

Mobile​

  1. Stack filters — Use column layout on mobile
  2. Touch-friendly — Ensure adequate tap targets
  3. Test date picker — Flatpickr works on mobile, but verify

Responsive Design​

Use Bricks' responsive controls to adjust:

  • Number of columns in query loops
  • Filter layout (row → column on mobile)
  • Typography sizes
  • Spacing