Embed calendars, upcoming-events tables, and meeting agendas anywhere in your EvoCloud site by placing a div with the right CSS classes.
On this page
evo_param_upcoming_events__evo_param_upcoming_events_only__evo_param_upcoming_meetings_only__evo_param_calendar_small__evo_param_calendar_with_eventsevo_param_tabbed_calendar_with_filesevo_param_grid_calendarCalendar IDs are joined with underscores. Use the keyword all to include every calendar on the site.
evo_param_upcoming_events__all <-- every calendar
evo_param_upcoming_events__5 <-- calendar ID 5
evo_param_upcoming_events__5_7_9_12 <-- calendar IDs 5, 7, 9, 12Renders a Bootstrap table of upcoming events from the specified calendars. Best for sidebars and homepage event blocks.
<!-- All events from every calendar -->
<div class="evo_cloud_widget evo_param_upcoming_events__all"></div>
<!-- Events from calendars 5, 7, 9, and 12 -->
<div class="evo_cloud_widget evo_param_upcoming_events__5_7_9_12"></div>
<!-- Same, grouped under a month-name header -->
<div class="evo_cloud_widget evo_param_upcoming_events__5_7_9_12 evo_param_upcoming_events_month_separator"></div>
| CSS Class | Default | Description |
|---|---|---|
evo_param_upcoming_events_month_separator | off | Group events under a month-name title span |
evo_param_description_number_of_characters__<N> | -1 (no limit) | Truncate event description to N characters |
evo_param_upcoming_limit__<N> | 30 | Maximum number of events to render |
evo_param_days_in_future__<N> | 60 | Look-ahead window in days |
evo_param_department_id__<id> | all | Filter events by department |
include_html | off | Allow raw HTML in event descriptions |
Note on include_html: this one class is matched by prefix and intentionally has no evo_param_ on the front — any class starting with include_html enables it. It is only honored by the upcoming_events widget, not by the _only variants.
Same shape as Upcoming Events, but excludes any event flagged as a meeting. Use this when you want the public-events table and the meetings table to be separate widgets on the same page.
<div class="evo_cloud_widget evo_param_upcoming_events_only__all"></div>
<div class="evo_cloud_widget evo_param_upcoming_events_only__5_7_9_12"></div>
<div class="evo_cloud_widget evo_param_upcoming_events_only__5_7_9_12 evo_param_upcoming_events_month_separator"></div>
| CSS Class | Default | Description |
|---|---|---|
evo_param_upcoming_events_month_separator | off | Group events under a month-name title span |
evo_param_description_number_of_characters__<N> | -1 (no limit) | Truncate event description to N characters |
evo_param_upcoming_limit__<N> | 30 | Maximum number of events to render |
evo_param_days_in_future__<N> | 60 | Look-ahead window in days |
evo_param_department_id__<id> | all | Filter events by department |
Same shape as the two above, but renders only events flagged as meetings. Most commonly used for council / board meeting pages.
<div class="evo_cloud_widget evo_param_upcoming_meetings_only__all"></div>
<div class="evo_cloud_widget evo_param_upcoming_meetings_only__5_7_9_12"></div>
<div class="evo_cloud_widget evo_param_upcoming_meetings_only__5_7_9_12 evo_param_upcoming_events_month_separator"></div>
<!-- Look one full year ahead -->
<div class="evo_cloud_widget evo_param_upcoming_meetings_only__5_7_9_12 evo_param_upcoming_events_month_separator evo_param_days_in_future__365"></div>
| CSS Class | Default | Description |
|---|---|---|
evo_param_upcoming_events_month_separator | off | Group meetings under a month-name title span |
evo_param_description_number_of_characters__<N> | -1 (no limit) | Truncate description to N characters |
evo_param_upcoming_limit__<N> | 30 | Maximum number of meetings to render |
evo_param_days_in_future__<N> | 60 | Look-ahead window in days |
evo_param_department_id__<id> | all | Filter meetings by department |
A compact monthly calendar. Each day with at least one matching event is marked with a star (*) and links to the calendar list view for that day. Use evo_param_mini_calendar to render an even more compact "mini" variant.
<!-- All events -->
<div class="evo_cloud_widget evo_param_calendar_small__events_all"></div>
<!-- Only calendars 5, 7, 9, 12 -->
<div class="evo_cloud_widget evo_param_calendar_small__events_5_7_9_12"></div><!-- All events, mini chrome -->
<div class="evo_cloud_widget evo_param_calendar_small__events_all evo_param_mini_calendar"></div>
<!-- Specific calendars, mini chrome -->
<div class="evo_cloud_widget evo_param_calendar_small__events_5_7_9_12 evo_param_mini_calendar"></div> Heads up: there is no standalone evo_param_calendar_mini__ trigger. Older guides showed evo_param_calendar_mini__events_all as if it were a separate widget — that class will silently render nothing. The mini variant is always produced by combining evo_param_calendar_small__events_* with evo_param_mini_calendar.
| CSS Class | Default | Description |
|---|---|---|
evo_param_mini_calendar | off | Switch to compact "mini" rendering (centered day numbers, no star indicator, « / » nav arrows) |
evo_param_department_id__<id> | all | Filter events by department |
A full-width calendar widget: tabbed calendar selector on the left, mini month grid in the middle, and an upcoming-events list on the right. Configure the tabs by adding evo_param_calendar_id__ or evo_param_calendar_title__ classes — one per tab.
<!-- Two tabs by calendar title -->
<div class="evo_cloud_widget evo_param_calendar_with_events
evo_param_calendar_title__concerts
evo_param_calendar_title__council_meetings"></div>
<!-- Tabs by mixed calendar ID and title -->
<div class="evo_cloud_widget evo_param_calendar_with_events
evo_param_calendar_id__27
evo_param_calendar_id__28
evo_param_calendar_title__council_meetings"></div>
<!-- Use the calendars marked "Use on homepage" in the CMS -->
<div class="evo_cloud_widget evo_param_calendar_with_events
evo_param_home_page_calendars"></div>
| CSS Class | Default | Description |
|---|---|---|
evo_param_calendar_id__<id> | none | Add the calendar with this numeric ID as a tab. Repeatable. |
evo_param_calendar_title__<title> | none | Add the calendar whose title matches <title> as a tab. Spaces and punctuation in the calendar title are replaced with underscores when matching. Repeatable. |
evo_param_home_page_calendars | off | Use the set of calendars flagged "Use on homepage" in the CMS. Overrides individual calendar_id__ / calendar_title__ classes. |
Tab order: tabs render left-to-right in the order the evo_param_calendar_id__ / evo_param_calendar_title__ classes appear on the div. The first such class is tab 1, the next is tab 2, and so on.
Title matching: a calendar named Council Meetings is matched by evo_param_calendar_title__council_meetings. The match is case-insensitive and special characters (spaces, punctuation) are normalized to underscores.
Same layout as Calendar With Events, but each entry in the right-hand event list also surfaces the meeting's resources: web meeting info, agenda, minutes, attachments, audio, and video. Use this on council / board meeting pages where residents need quick access to packet files.
<!-- Tabs by calendar title -->
<div class="evo_cloud_widget evo_param_tabbed_calendar_with_files
evo_param_calendar_title__council_meetings
evo_param_calendar_title__planning_commission"></div>
<!-- Tabs by calendar ID -->
<div class="evo_cloud_widget evo_param_tabbed_calendar_with_files
evo_param_calendar_id__27
evo_param_calendar_id__28"></div>
<!-- Homepage calendars -->
<div class="evo_cloud_widget evo_param_tabbed_calendar_with_files
evo_param_home_page_calendars"></div>
| CSS Class | Default | Description |
|---|---|---|
evo_param_calendar_id__<id> | none | Add the calendar with this numeric ID as a tab. Repeatable. |
evo_param_calendar_title__<title> | none | Add the calendar whose title matches <title> as a tab. Repeatable. |
evo_param_home_page_calendars | off | Use the calendars flagged "Use on homepage" in the CMS. |
Coexistence: this widget uses internally-prefixed CSS / IDs so you can put it on the same page as evo_param_calendar_with_events without style or DOM collisions.
Full-page grid calendar — the same UI used by /calendar. Use this when a calendar is the primary content of the page.
<!-- Single calendar -->
<div class="evo_cloud_widget evo_param_grid_calendar evo_param_calendar_ids__10"></div>
<!-- Multiple calendars -->
<div class="evo_cloud_widget evo_param_grid_calendar evo_param_calendar_ids__10_20_21"></div>
<!-- All calendars -->
<div class="evo_cloud_widget evo_param_grid_calendar evo_param_calendar_ids__all"></div>
| CSS Class | Default | Description |
|---|---|---|
evo_param_calendar_ids__<ids|all> | none | Calendars to include. Underscore-joined IDs (e.g. 10_20_21) or the keyword all. |
One per page. Only one evo_param_grid_calendar widget can be used on a single page. A second instance will overwrite the first.
Watch the trailing s: grid calendar uses evo_param_calendar_ids__ (plural) with all IDs in one class. calendar_with_events and tabbed_calendar_with_files use repeated evo_param_calendar_id__ (singular), one per tab. They are not interchangeable.
| If you see… | It probably means… |
|---|---|
| An empty space where the mini calendar should be | You used evo_param_calendar_mini__events_*. Switch to evo_param_calendar_small__events_* evo_param_mini_calendar. |
| Grid calendar shows no events | You wrote evo_param_calendar_id__ (singular). Grid uses evo_param_calendar_ids__ (plural). |
| Calendar With Events shows the wrong tab first | Reorder the evo_param_calendar_id__ / evo_param_calendar_title__ classes on the div — the first one becomes the first tab. |
| Title-based tab not appearing | Replace spaces and punctuation in the calendar title with underscores when writing the class (e.g. Council Meetings → council_meetings). |
| HTML markup printing as literal text in upcoming-events descriptions | Add the include_html class. Only works on upcoming_events, not on _only variants. |
| Two Calendar widgets on the same page interfering with each other | You can only have one Grid Calendar per page. Calendar With Events and Tabbed Calendar With Files can coexist with each other but only one of each per page. |