How to create a custom Events Module Layout Print

  • Modules, Events, Module Layout
  • 1

If you need to display the Events List View in different ways you can create your own custom Module Layout. 

  • Navigate to Design > Module Layouts page under the Content section in the sidebar menu. Under each tab you will see multiple default layouts that can be edited and customized. The Default platform Module Layouts cannot be deleted. Although they can be edited.
  • To get started, click the Events tab and then click the Add Custom Layout button at the bottom of the page.

    Events custom layout window

  • Start by entering a Name for your new Module Layout in the Layout Name field and enter a Decription in the Layout Description field to help other users understand what the layout is used for.
  • The Template HTML field is where you enter your custom HTML code for the Module Layout. To the right you will see the Available Tags box. Clicking the tags will place the clicked tag within your layout wherever the cursor is located. These tags are a way to add dynamic content to your custom Module Layout. Including one of these tags in your HTML will insert any content that particular field would have. When you change the content it will change dynamically in your layout.
  • When you are finished click the Save button or click Cancel button if you want to discard your custom layout.
  • Your custom Module Layout will now appear in the Events Module Layouts list. You will notice that your new custom layout is not labeled as a "Default Layout" and has a Trashcan icon for deleting in the "Action" column.

    Events Module Layout list window

  • Lastly wherever your {bb_events} tag is to be displayed you need to add the layout="" parameter to the tag using the Name of the custom layout. For example: {bb_events layout="Custom Events List"}. See {bb_events} Module for more details.

    Events tag on Web Page

  • The final result is the display of an Unordered List on the Web Page.

    Events displayed on Web Page

Available Tags

  • {{eventId}} – System generated ID of the event.
  • {{eventTitle}} – Renders the event title with a hyperlink.
  • {{eventTitleNoLink}} – Render the event title without a hyperlink.
  • {{eventContent}} – Description of the event.
  • {{eventCapacity}} – Total number of seats available for the event.
  • {{eventCapacityEmpty}} – Calculated number of remaining seats available for the event.
  • {{eventCapacityDescription}} – Description for number of seats available. Possible value are: Seats Available; Filling Up; Almost Full; Full.
  • {{eventFee}} – Renders the fee to attend the event.
  • {{eventPercentFull}} – Calculated percentage of the total seats reserved for the event.
  • {{eventDate}} - Full date format. Customize by using: {{eventDate | date: 'mm dd, yyyy'}} and standard .NET date formatting options.
  • {{eventStartDate}} – Start date of the event using the Month, Day, Year format.
  • {{eventEndDate}} – End date of the event using the Month, Day, Year format.
  • {{eventPublishDate}} – Date the event should be published to the website. This allows you to enter events in advance and then have them display when you want the event to display.
  • {{eventLastUpdated}} – Date the event was last updated.
  • {{eventUrlWithHost}} – URL to the event including the primary domain.
  • {{eventUrl}} – Relative URL to the event.
  • {{eventTags}} – List of tags that this event is assigned. Tags can be used for sorting data.
  • {{eventSecureZones}} – Renders a comma separated list of secure zones that the event has been assigned to.
  • {{eventAddFavorite | addimage: "path/add_image.jpg" | removeimage: "path/remove_image.jpg"}} – Adds an Event to your favorites lists. Displays only when a user is logged in.
  • {{eventCounter}} – Incremental count of the event booking.
  • {{eventType}} – Displays the assigned event types.
  • {{eventRegistrationForm}} – Displays the assigned event registration form. (Future release)
  • {{eventRequiresPayment}} – Renders a "true" if checked, a "false" if not. (Future release)
  • {{eventPaymentForm}} – Renders the name of the webform that is used to collect payment. (Future release)

 


Was this answer helpful?

« Back

Powered by WHMCompleteSolution