Event Component
The Event Component helps you easily create engaging and visually appealing event listings for your website. With this tool, you can showcase your events in an eye-catching and user-friendly way.
The component comes with customizable features, such as a calendar widget that adds a visual touch to your events, and an option for visitors to add your events to their calendars with just a click, increasing the chances that they'll participate.
Whether you're organizing a seminar, a student event, or a community gathering, this component will help your event stand out and encouraging interaction.
Example:
Component Options
Event name and subtitle: This is where you'll input the main title of your event, along with an optional subtitle to give additional information at a glance.
Event Date: Choose the starting date and, if needed, an end date to clearly outline the length of your event, especially useful if it extends over several days.
Event Time: Here, you can set what time your event begins and ends. Setting a time is optional, but is required to use the add-to-calendar button.
Location & Description:
Please input the location of the event to guide participants to the correct location. If your event will be hosted on Zoom, ensure to include the direct Zoom meeting link.
Utilize the rich text editor to create a description, ensuring you provide all essential information about your event, making it accessible and clear to all attendees.
Optional Image
Adding an image can significantly enhance your event's visibility on the website. Please note that images will be automatically adjusted to fit a 16:9 aspect ratio. For optimal results, we recommend using an image size of 800 x 450 pixels to ensure a perfect fit.
Additional Options:
Add to Calendar Button: Toggle this feature on to let visitors easily save your event to their calendars with a click. An event end time must also be specified to enable this feature.
Widget Display: Choose between three color styles (Blue | Black | Clean) including the option to disable the display.
Widget Text Override: This option lets you personalize how the date is displayed on the widget, giving you control over its presentation for a unique touch.
Display Examples
Compact Display:
The compact view is enabled when the component is used within a column snippet.
Black Widget Style
Clean Widget Style
Disabled Widget Example:
Different End Date Display:
Usage Guidance
The Event Component is suggested for featuring major events on a webpage. If you are hoping to integrate a fully functioning calendar on your page, please consider using the Live25 calendar with Event Services.
Uploaded images display best in a 16:9 ratio, a flexible size is 800 x 350 px.
Implementation
- Open a page in Modern Campus CMS and enter editing mode.
- Place your cursor where you would like to place an event.
- From the toolbar, select the component icon , which resembles an atom symbol.
- From the list of components, select the Event component.
- Fill in the required fields and select your options.
- Save and preview.