Events Dashboard UI Guide

Location

Navigate to Dashboard → Events

Main Sections

Calendar view, event list, create button, filter tabs, search, and quick actions

Calendar Features

• • Monthly View: Full month displayed with event indicators
• • Color Coding: Each event type has a unique color for easy identification
• • Event Indicators: Dots or small cards show events on each day
• • Navigation: Previous/next month buttons or month/year picker
• • Today Marker: Current day highlighted for reference

Interacting with Calendar

• • Click a day to see events on that day
• • Click an event to open detail view
• • Drag date range to filter events in that period
• • Toggle event type filters to show/hide categories

Calendar Modes

• • Month View: Standard month display (default)
• • Week View: Detailed view of a single week
• • Agenda View: List of upcoming events in chronological order

List Columns

• • Event Name: Title of the event with optional thumbnail
• • Type: Event category (Game, Meeting, Holiday, etc.)
• • Date & Time: When the event occurs (local time conversion shown)
• • Status: Upcoming, Active, Past, Canceled
• • RSVPs: Count of "Going", "Interested", "Not Attending"
• • Recurrence: If repeating: "Weekly", "Monthly", "None"
• • Actions: Edit, view, delete, manage RSVPs buttons

List Filtering

• • Status Filter: UPCOMING, ACTIVE, PAST, CANCELED, ALL
• • Type Filter: Announcement, Holiday, Milestone, Game, Community, etc.
• • Date Range: Pick date range to limit results
• • Search: Search by event name or description

Sorting Options

• • By date (ascending or descending)
• • By type (alphabetical)
• • By RSVP count (most to least RSVPs)
• • By creation date (newest or oldest first)

Event Creation Form

Multi-step form with the following sections:

• • Basic Info: Title, type, description, color theme
• • Date & Time: Start datetime, duration, timezone picker
• • Images: Thumbnail and banner upload areas
• • Channel & Announcements: Create event channel toggle, announcement channel SearchableSelect, post announcement toggle
• • RSVP Settings: Enable RSVP toggle, RSVP limit, anonymous RSVP, deadline
• • Reminders: Enable reminders toggle, reminder times, reminder channel SearchableSelect
• • Recurrence: Recurrence type dropdown, end condition, day selection

Form Elements

• • Text Inputs: Event name, description, message content
• • Datetime Pickers: Clickable fields showing calendar and time selectors
• • SearchableSelect Dropdowns: Channels, timezones, reminders, event types
• • Toggle Switches: Booleans like "Create Channel", "Enable RSVP", "Enable Reminders"
• • Checkboxes: Multi-select options like days of week
• • File Upload: Drag-and-drop areas for images with preview

Buttons

• • Green "Create Event" Button: Primary action, black text, bottom of form
• • "Save Draft" Link: Save without publishing
• • "Cancel" Link: Exit form without saving

Thumbnail Upload

Square image for event lists and calendars

• • Recommended: 256x256px
• • Max file size: 5MB
• • Formats: PNG, JPG, WebP
• • Drag-and-drop or click to browse
• • Preview shows after upload

Banner Upload

Wide image for event detail pages

• • Recommended: 1200x400px
• • Max file size: 10MB
• • Formats: PNG, JPG, WebP
• • Drag-and-drop or click to browse
• • Preview shows after upload

RSVP Overview

• • Total RSVP count and breakdown
• • "X Going, Y Interested, Z Not Attending, N No Response"
• • RSVP capacity filled (if limited)
• • Deadline time remaining (if deadline set)

RSVP List

Detailed list of who RSVPed what:

• • Member name and avatar
• • RSVP status (color-coded: green=Going, yellow=Interested, red=Not, gray=No Response)
• • RSVP time (when they responded)
• • Search/filter by member name

Manual RSVP Management

As event organizer, you can:

• • Add member RSVPs manually
• • Change RSVP status for members
• • Mark members as attended/no-show after event

Analytics Metrics

• • Total RSVPs: Count of all RSVP responses
• • RSVP Rate: Percentage of server members who RSVPed
• • Attendance Rate: Percentage of "Going" who attended (post-event)
• • Peak Interest: Busiest times for RSVP activity
• • Trending Members: Most active in event discussions

Charts & Graphs

• • RSVP Breakdown Chart: Pie chart showing Going/Interested/Not/No Response
• • RSVP Timeline: Line graph of RSVP count over time
• • Engagement Graph: Message count in event channel over time

Export Analytics

Download event data as CSV for analysis in spreadsheets or data tools

Sections in Detail View

• • Event banner image (if provided)
• • Event title, type, and color indicator
• • Date/time with timezone conversion
• • Duration and "Days until event" counter
• • Full description with markdown formatting
• • RSVP summary and breakdown
• • Quick action buttons (Edit, Delete, View Analytics, etc.)

Action Buttons

• • Edit: Open event editor
• • View Analytics: Open analytics dashboard
• • Manage RSVPs: View and manage all RSVPs
• • View Channel: Link to event-specific channel (if created)
• • Send Reminder: Manually send reminder message
• • Cancel Event: Cancel with notification
• • Delete: Delete event permanently

Date Picker

• • Click field to open calendar
• • Navigate months with arrows
• • Click date to select
• • Quick shortcuts (Today, Tomorrow, Next Week, etc.)

Time Picker

• • Hour selector (scroll or type)
• • Minute selector (15-minute increments or custom)
• • AM/PM toggle
• • 24-hour format option

Timezone Selector

SearchableSelect dropdown with major timezones. Search to find yours quickly.

SearchableSelect Dropdowns

All dropdowns (channels, timezones, event types) support searching. Type to filter, click to select.

Green Buttons

All primary actions (Create Event, Save Changes, Send Reminder) use green buttons with black text.

Status Badges

Color-coded status indicators: UPCOMING (blue), ACTIVE (green), PAST (gray), CANCELED (red)

Toggle Switches

Used for boolean settings like "Create Channel", "Enable RSVP", "Enable Reminders"

Color Indicators

Events display their assigned color as a small dot or bar for quick visual identification