Event setup

In this guide we will setup your neleto instance to manage events. Since events are basically just blog posts but with a start and end date, this setup is not much different from setting up blog posts, so if you've already done that you should be able to complete this without problems, even without this guide.

Prerequisites

Your instance user needs to have the role developer or admin to be able to manage settings and components.

You need to finish your initial setup of your neleto instance before you can start using events. For more information see setup.

You should also familiarize yourself with Components and Pages.

Create a component to render an event

You will first need to create a component specifically to render an event. Luckily your neleto instance already comes with a preset for this. To use this preset, navigate to the components page in the admin ui and click on + New from template. You should see a list of available presets, with one of the being called Event content. Click on the preset named Event content to create a component based on this preset. You can now edit this new component to match the styling of your website, or just click Save and close to close the modal. This component will now render an event, if included in the correct page.

Create a page to display any event

In addition to the event content component, you will need a page, which serves as a path to render events on.

To create this page, navigate to the pages page in the admin ui and click on + New. You should land on the pagebuilder, where we need to do a few things.

Just like the page to render posts, the route of this page must have a parameter called slug. You can achieve this with a path similar to this: /event/:slug. Notice the :slug part, this is the path parameter, indicated by the : and its name is slug. The first part (/event) can be anything you want, it can also be more than one word, separated by a /. We recommend to at least use one word before the parameter, to reduce the risk of collisions with other pages, since the :slug parameter will be replaced with the slug of the event being visited. For example when someone visits an event with a slug of my-fun-event, and the event page has a route of /event/:slug, the resulting url will look like this: /event/my-fun-event.

The second thing you need to do is include your new Event content component in this page. To do this, switch to the elements tab in the pagebuilder and click on + Create element. You should see a popover with a list of all the components on your instance. One of them should be the Event content. If you can't see it, feel free to use the search at the top of the popover to search for it. When you found it, click on it to create an element with this component. If you're using the preset component without modifications, you don't need to change anything on the element itself.

The third thing you need to do is set the status to Public, otherwise visitors won't be able to see your events.

And the last thing, you need to set the render mode to Dynamic, since the slug parameter will be different for each event. If it stays on Prerendered, you might encounter issues with visitors not seing the event they clicked on.

You can now add additional elements to this page or nest your event content component inside other elements. When you're done, save this page and it will be ready to display events.

Link the event page in the settings

Your newly created page now needs to be registered in the settings, for neleto to know how to generate event links. To do this, navigate to the settings page, you can find this in the bottom left corner of the admin ui (if you're not inside a builder). On the settings page, you should'nt need to scroll down, since the page section is all the way at the top. In this section, you should find a drop down called Event post page. If your event page's status is Public, you should see its title in this drop down when clicking on it. Click on your event page in the drop down to register it for rendering events.

You can now save your settings. Your neleto instance is now ready to display events. Although we recommend also creating a page to show an overview of all your events, which we'll do in the next section.

Create a page to display a list of events

The only requirement for this page is that it will need an element with the component Event list.

Create an event list component

neleto also provides a preset for this component, to use it navigate to the components page in the admin ui and click on + New from template again. You should see a preset named Event list, click on it to create it. This is a really simple component by default, it only has one property, where you can specify the list of events shown. In the template we iterate over all events in this property with the {{#each ...}}...{{/each}} block and render a simple link for each event. The helper event_path turns the event into a link to the event page using the page you registered in the settings.

You could leave the component as is, but you might want to extend it to additionally show the title, start and end date and hero image of each event.

When you're done editing the component, click on Save and close.

Using the event list component

To use your new event list component, either create a new page dedicated to a list of events, or include it in an existing page.

In both cases you just need to switch the the Elements tab in the pagebuilder and click on + Create element at the position you want your list of posts to show up. Then select the component Event list and you're essentially done. You can now also narrow down the list of events using the rules input on the element, because by default it will show every event you create and publish.