The Day Timeline displays events from one or more consecutive days as cards arranged around a vertical time axis. It is designed for programmes where chronology, duration and visual event information are more important than a traditional table.
Create this page: in the Joomla administrator, create or edit a menu item and select JEM → Day Timeline as the menu item type.
When to Use Day Timeline
| View | Best use | Presentation |
|---|
| Day Calendar |
A conventional daily event list. |
List/table-oriented output using the standard Day view. |
| Day Timetable |
Conferences, classrooms, rooms or stages where events must be compared by time slot. |
A timetable grid organised by time and venue. |
| Day Timeline |
Agendas, cultural programmes, guided routes and multi-day schedules where each event needs a visual card. |
Cards placed to the left, right or alternately around a vertical time axis. |
Frontend Navigation
The timeline provides navigation without requiring separate menu items for every date:
- Previous/next period: moves by the current number of displayed days.
- Previous/next week: moves seven days when week navigation is enabled.
- Today: returns to the current date.
- Days selector: lets the visitor choose 1, 2, 3, 4, 5, 6, 7, 15 or 30 days. A custom configured value is also retained.
- Compact/details toggle: lets the visitor switch the event-card presentation without changing the menu item.
When the page is opened in a category or venue context, JEM preserves the corresponding catid or locid while navigating.
If Show empty days is disabled, previous and next navigation can jump directly to the nearest date containing a visible event instead of stopping on empty periods.
Date, Range and Time Grid
| Option | Default | Effect |
|---|
Day Offset
days |
0 |
Adds the specified number of days to today's date when no explicit date is supplied. Use 0 for today. |
Days to show
timeline_days_to_show |
1 |
Displays between 1 and 30 consecutive days, beginning with the selected date. |
Show empty days
timeline_show_empty_days |
No |
When enabled, every day in the selected range is rendered even when it contains no events. |
Show week navigation
show_week_navigation |
Yes |
Adds previous-week and next-week controls beside the normal period navigation. |
Hour display
timetable_hour_display |
Only hours with events |
Shows only relevant event times or renders the complete configured hour range. |
Start hour
timetable_range_start |
08:00 |
First visible hour when the full range is displayed. Use a value from 00:00 to 24:00. |
End hour
timetable_range_end |
22:00 |
End of the full time range. If it is not later than the start, JEM creates a minimum valid range. |
Major time mark interval
timetable_grid_interval |
60 minutes |
Distance between main time labels. Allowed range: 5 to 240 minutes. |
Subinterval minutes
timetable_grid_subinterval |
15 minutes |
Adds minor marks between main labels. Use 0 to disable them. A subinterval equal to or greater than the main interval is ignored. |
Timeline Layout
| Option | Default | Values and behaviour |
|---|
Timeline event position
timeline_side |
Right |
Right, Left or Alternate around the vertical axis. |
Right event text alignment
timeline_right_text_align |
Left |
Left, centre or right alignment inside cards placed on the right. |
Left event text alignment
timeline_left_text_align |
Right |
Left, centre or right alignment inside cards placed on the left. |
Timeline width
timeline_width |
80% |
Percentage of the available page width used by the timeline. Allowed range: 40% to 100%. |
Timeline line colour
timeline_line_color |
#6c757d |
Hexadecimal colour used for the vertical axis. |
Timeline line style
timeline_line_style |
Solid |
Solid, dotted, dashed, double, groove or ridge. |
Event frame
timeline_event_frame |
Yes |
Shows or hides the border around each event card. |
Event height mode
timeline_event_height_mode |
Same height |
Same height produces uniform cards. Duration uses event duration to influence the visual height. |
Card layout
timeline_card_layout |
Compact |
Compact presents a visual summary. Details presents labelled rows for title, category, type, venue and description. |
Day and Event Colours
| Option | Default | Effect |
|---|
Day background
timeline_day_background |
Alternate |
None, Alternate, Special Day or Alternate + Special Day. Special Day modes use the configured Type of Day colour when available. |
Alternate day background colour
timeline_alternate_day_background_color |
#f3f4f6 |
Background used by alternating day sections. It is available for either alternate mode. |
Event background source
timetable_event_background |
Category |
Uses the event's first valid category colour, event type colour, venue colour or one fixed custom colour. |
Event colour display
timeline_event_color_mode |
Side bar |
Shows the chosen event colour as a side bar or uses it for the complete card background. JEM selects a contrasting text colour for coloured backgrounds. |
Custom event background
timetable_event_background_custom |
#6bbf59 |
Fixed colour in Custom mode and fallback when the selected category, type or venue does not provide a usable colour. |
Special Days: matching Special Days can be shown as badges beside each date. When a Special Day background mode is selected, its Type of Day colour can also colour the day section. Special Days must first be enabled and configured in JEM Settings.
Event Card Content
| Option | Default | Effect |
|---|
Show category
timeline_show_category |
Yes |
Displays the event categories. |
Category display
timeline_category_display |
Text |
Displays categories as normal text/links or as colour badges. |
Show venue
timeline_show_venue |
Yes |
Displays venue and city information. |
Show type
timeline_show_type |
Yes |
Displays the event type as a badge, including its configured icon and colour where available. |
Show detail icons
timeline_show_detail_icons |
Yes |
Adds icons to category, venue and city metadata in Compact mode. |
Show event intro text
timeline_show_event_intro |
Yes |
Displays a plain-text extract from the event intro text. |
Intro text limit
timeline_event_intro_limit |
300 characters |
Limits the Compact-mode extract from 0 to 1,000 characters. Use 0 for no truncation. |
Show Read More
timeline_show_event_readmore |
Yes |
Adds a link when the intro text has been truncated. |
Read More style
timeline_readmore_style |
Button |
Displays the Read More action as text or as a button. |
Show event image / position
timeline_show_event_image
timeline_event_image_position |
Yes / Left |
Displays the event image on the left or right of the card when an image is assigned. |
Show venue image / position
timeline_show_venue_image
timeline_venue_image_position |
No / Right |
Optionally displays the assigned venue image on the left or right of the card. |
Event Filtering
| Filter | Default | Behaviour |
|---|
Featured only
onlyfeatured |
No |
Limits the timeline to featured events. |
Category filter mode
categoryswitch |
Exclude |
Defines whether the selected categories are included or excluded. |
Filter Categories
categoryswitchcats |
None |
Categories used by the include/exclude mode. With no excluded categories, all accessible categories remain available. |
Filter venues
timeline_filter_venues |
None |
Shows only events assigned to the selected venues. |
Filter types
timeline_filter_types |
None |
Shows only events assigned to the selected event types. |
Filter countries
timeline_filter_countries |
None |
Shows only events whose venues belong to the selected countries. |
JEM also applies normal publication state, event/category/venue access, date and user-permission rules. A menu filter never makes inaccessible content visible.
Page Text
Show Introtext (showintrotext) and Introtext (introtext) add editorial content above the timeline. Show footer text (showfootertext) and Footer Text (footertext) add content below it. Both visibility options are disabled by default. These fields are useful for programme instructions, legend explanations or contact information.
Dates, Times and Multi-day Events
- Timed events are ordered by date, start time, end time and title.
- Events without a start time are presented in the All day area.
- A multi-day event can appear on every day that overlaps the selected timeline range.
- The Timeline view does not choose an event timezone. It displays the event date and time prepared from that event's configured time reference.
- If an event uses Venue timezone, verify the timezone stored in its venue. Joomla publication start/end dates remain a separate concern.
Practical Configurations
Single-day cultural agenda
- Days to show: 1
- Event position: Alternate
- Card layout: Compact
- Event colour: Category / Side bar
- Show event image: Yes
Seven-day programme
- Days to show: 7
- Show empty days: Yes
- Day background: Alternate + Special Day
- Card layout: Details
- Show week navigation: Yes
Multi-venue festival
- Event background source: Venue
- Show venue: Yes
- Show venue image: Yes / Right
- Show category: Yes / Badge
- Filter countries or venues when necessary.
Minimal mobile agenda
- Timeline width: 100%
- Event position: Right
- Card layout: Compact
- Event and venue images: No
- Intro limit: 120
Troubleshooting
| Problem | What to check |
|---|
| No events are displayed. |
Check the selected date, featured/category/venue/type/country filters, publication state and access levels. |
| Some days disappear. |
Enable Show empty days. Without it, days with neither events nor visible Special Day information can be omitted. |
| The full hour range is not shown. |
Select All hours in range and verify the start hour, end hour and interval values. |
| Cards have unexpected colours. |
Check the selected colour source and the colour stored in the first category, event type or venue. The custom colour is used as fallback. |
| Images are missing. |
Confirm that the corresponding event or venue has an assigned image and that the correct image option is enabled. |
| Special Day colour is not used. |
Enable Special Days globally, assign a colour to its Type of Day and select a Special Day background mode. |
| An event appears at an unexpected time. |
Review the event time reference and its venue/custom/Joomla timezone rather than changing the timeline layout. |
Before Publishing
- Test the menu item with one-day and multi-day ranges.
- Check timed, all-day and multi-day events.
- Verify previous, next, week and Today navigation.
- Try both Compact and Details card layouts.
- Check colour contrast with real category, type, venue and Special Day colours.
- Test desktop and mobile widths.
- Test as a guest and as a user with restricted content access.
- Verify print output if the print action is enabled.
Related Documentation
Development References
