#617 Menu Item Event

Parent Category:
Menu items
Last Updated:
Allon Moritz (laoneo), Friday, 28 June 2019 15:58 (3 weeks ago.)
Wednesday, 22 February 2012 10:15 (Wednesday, 22 February 2012)


The Event menu item shows a single event details page. On the top are share buttons rendered to help promoting your site on different social media networks. Beside them are action buttons displayed which do allow to export the event to Google calendar or as .ics file. If the visitor wants to send the event page, there is an E-Mail button available which opens a new window to send the link to a friend. For those who like to print out the details page, we have a optimized print view, which can be opened directly through the print button.

Event detail page

Admin actions

If you are logged in as admin then you will see some more action buttons which do allow you to manage the event.

  • Delete Series
    Delete the whole series of events this event belongs to.
  • Delete
    Delete the event.
  • Edit Event
    Opens the edit form page.
  • Bookings
    Opens the bookings list which shows all the bookings they have a ticket for this event.
  • Tickets
    Opens the tickets list which shows all tickets of this event.
  • Invite
    Invite other users or whole groups for the event.
Event detail page actions

Booking part

If bookings are activated for the event and the visitor has the permission to book the event, then a link will be shown to guide the visitor to the booking form. The booking part of the event detail age does show all the relevant booking information like the different prices, discounts and the capacity.

Event detail page booking part

Location map

For every location where the event is happening a map is shown and the location details like the address and description. It is also possible to show all the locations in a single map to have a compact event details view. In both views you can navigate to the location view which shows the full information panel including a resource view for the location.

Event detail page maps


The different blocks like the image, information panel, location part or buttons are built stacked when inspecting the HTML markup. With CSS grid we are positioning them the way we want. This means for the site admin, that it is easy possible to rearrange them with just CSS to perfectly fit your template, no template overrides are needed. You can then also define trough media queries your layout to have it optimized for every screen size. For example when you want to move the map below the description, use the following CSS code in your template's custom.css file (or what way your template offers to add your own CSS):

.com-dpcalendar-event__locations { 
    grid-column: 1 / 3;
Event details page layout


The settings can be configured globally in the DPCalendar options or per menu item. If the value is empty in the menu item, then it will be inherited from the global options.

Comments (0)

Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
More information Ok Decline