What This Screen Does

This is where you see all your events in one place. Think of it like a bulletin board showing every event your organization has created — past, present, and future. You can search for events, filter them by date, sort them by different columns, and quickly jump to viewing or editing any event. You can also create new events or cancel existing ones from here.

How to Get There

Open the dashboard.
In the left-hand menu, click Event.
You are now on the Event List screen, showing an overview of all events.

Step-by-Step Guide

1. View the Event List

When the page loads, you will see a table (data grid) showing all your events.
By default, events are sorted by their Begins date in descending order (newest first).
The list shows 10 events per page. You can change this to 5 or 25 using the page size selector at the bottom of the table.

2. Understand the Table Columns

Each row in the table represents one event. Here is what each column shows:

Column	What It Shows
Title	The name of the event. If the event has an image, a small thumbnail appears next to the title. Click the title to open the event details.
Open for sign up on	The date and time when sign-ups open for this event.
Closed for sign up on	The date and time when sign-ups close. If blank, there is no closing date set.
Begins	The date and time the event starts.
Ends	The date and time the event ends.
Number of participants	How many people have signed up for this event.
Status	A colored badge showing the current state of the event (see below).
Actions	Buttons to view, edit, or cancel the event.

3. Understand Event Statuses

The Status column shows a colored chip that tells you the current state of the event:

Status	Color	Meaning
Active	Green	The event is scheduled and has not started yet. Sign-ups may be open.
Ongoing	Blue	The event has started but has not ended yet.
Held	Grey	The event has ended.
Event cancelled	Red	The event was cancelled by an administrator.

4. Search for an Event

At the top of the table, you will find a search box with a magnifying glass icon.
Type any part of an event name to filter the list.
The search runs automatically as you type — no need to press Enter.
To clear the search, delete the text from the search box.

5. Filter by Date Range

Click the Filters button (with the filter icon) on the right side above the table.
A panel slides out from the right.
Set a Start date to show only events from that date onward.
Set an End date to show only events up to that date.
By default, the start date is set to 6 months ago and the end date is empty (no upper limit).
If your end date is earlier than your start date, you will see an error message: “End date must be later than start date.”
To clear your filters, click the reset button (circular arrow icon) in the filter panel.
Close the panel by clicking the X button.

6. Sort the Table

Click any column header to sort the table by that column.
Click again to reverse the sort direction (ascending/descending).
Your current sort preference is saved in the page URL so it persists if you refresh.

7. Change Pages

At the bottom of the table, use the pagination controls to move between pages.
You can choose to display 5, 10, or 25 events per page.

8. View an Event

Click the eye icon in the Actions column on the right side of any row.
You will be taken to the event detail page for that event.
Alternatively, click the event title in the first column.

9. Edit an Event

Click the three dots menu (⋮) in the Actions column.
A small menu appears with two options.
Click Edit to go to the event edit screen.
Note: The three dots menu does not appear for cancelled events.

10. Cancel an Event

Click the three dots menu (⋮) in the Actions column.
Click Cancel event (shown in red).
A confirmation dialog appears asking: “Are you sure you want to cancel [Event Name]?”
Click Cancel event in the dialog to confirm.
Click outside the dialog or the close button to go back without cancelling.
Once cancelled, the event status changes to Event cancelled and the three dots menu will no longer appear for that event.

11. Create a New Event

Click the + New event button in the top-right corner of the page.
You will be taken to the event creation screen.

What Happens Behind the Scenes

When the Page Loads

You navigate to /events
        |
        v
Page reads URL query parameters (sortBy, search, startDate, endDate)
        |
        v
API call: GET /api/events with pagination, sort, date filters, and search
        |
        v
Server returns event list + total count in headers
        |
        v
Table displays the events with pagination
        |
        v
URL is updated with current filter/sort state (so you can bookmark or share it)

When You Cancel an Event

You click "Cancel event" in the confirmation dialog
        |
        v
API call: EventService.cancel({ id: eventId })
        |
        v
Server marks the event as Archived (cancelled)
        |
        v
Success notification: "Event cancelled!"
        |
        v
Page redirects to /events
        |
        v
Event list reloads — the cancelled event now shows a red "Event cancelled" status

Troubleshooting

“I do not see any events in the list”

Check the date filter. By default, only events from the last 6 months are shown. If your events are older, adjust the Start date in the Filters panel.
Make sure you have the correct gym/location selected in the dashboard header. Events are filtered by the currently selected gym.
If you just created an event, try refreshing the page.

“My search is not returning any results”

The search looks at event data returned by the server. Make sure you are spelling the event name correctly.
Clear the search box and try again with fewer characters.
Check that your date filters are not excluding the event you are looking for.

“The End date filter shows an error”

The End date must be later than the Start date. If you see the error “End date must be later than start date,” adjust one of the two dates so the range makes sense.

“I cannot see the Edit or Cancel options for an event”

If the event has already been cancelled, the three dots menu (⋮) will not appear. Cancelled events cannot be edited or cancelled again.
Make sure you are looking at the correct row — the actions column is on the far right side of the table.

“I clicked Cancel event but nothing happened”

Make sure you clicked the Cancel event button inside the confirmation dialog, not just the menu item.
If you see an error, check your internet connection and try again.
If the problem persists, the event may have already been cancelled by someone else. Refresh the page to see the latest status.

“The page is loading very slowly”

If you have a large number of events, try narrowing the date range using the Filters panel.
Reduce the page size to 5 events per page to speed up loading.
Check your internet connection.

“I accidentally cancelled an event”

Cancelling an event cannot be undone from this screen. Contact your system administrator to discuss restoring the event if needed.
In the future, double-check the event name in the confirmation dialog before clicking Cancel event.

“My sort or filter settings are lost when I navigate back”

Sort and filter settings are saved in the URL as query parameters. If you use the browser back button, they should be preserved.
If you navigate to the events page from the menu, the page resets to default settings (sorted by Begins, descending, last 6 months).