Event Calendar

Creating Components

On this page:

Event Calendar example

Custom Title

Event Calendar Link

What is an Event Calendar?

The Event Calendar is used to display your upcoming events on your page. Visitors can navigate your calendar by scrolling through months with the arrow keys or highlight the current day by clicking the "today" button.  Visitors can also choose how they view your events by toggling between a calendar or list view. Clicking the name of the Event will take visitors to the event listing itself for more details.

How to add an Event Calendar 

  1. Click the edit link at the top of the page 

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the component. (Add a section if needed). 

  3. Click the plus icon.

    Example of the plus icon with a red square around the icon

  4. Select Event Calendar from the menu

    The Event calendar dropdown select

Content 

  1. Add a custom Title for your Event Calendar. (required)

    Example of the event title field

  2. Optional: Filter the events displayed in the view. In the Filter events by field, start by typing an event type, category, topic, or tag. Select the term.

    Example of the event filter by field

  3. Optional: Add a URL to the event calendar component. Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com.

    Example of the URL field

  4. Add Link Text for the URL. 

    Example of the link text field


     

Styles

  1. Toggle to the Styles tab. 

    Example of the Styles option selected
  2. Select the amount of additional space you would like above the component. 

  3. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

    Example of the top and bottom margin drop-down section with a red box around it

Save

  1. Click Save.

  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.

  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
     

    Example: of the Done button outlined