Skip to content

Add SCEvents calendar UI and event modal#2095

Merged
trista-chen-29 merged 5 commits into
devfrom
trista/events_calendar_ui
Apr 24, 2026
Merged

Add SCEvents calendar UI and event modal#2095
trista-chen-29 merged 5 commits into
devfrom
trista/events_calendar_ui

Conversation

@trista-chen-29

@trista-chen-29 trista-chen-29 commented Apr 24, 2026

Copy link
Copy Markdown
Collaborator

Closes #2079
Closes #2081

Changes

  • Implemented a calendar-based UI for SCEvents
  • Events are displayed in a month view similar to Google Calendar
  • Clicking an event opens a modal with:
    • event details (date, time, location, description)
    • registration CTA (for visible events)
    • edit CTA (for event admins only)
  • Added month/year dropdown navigation and previous/next controls
  • Improved visibility handling in the UI to match backend logic

Event interaction behavior

  • Public users can view public published events
  • Members can view member-visible events
  • Officers/admins can see additional events based on permissions
  • Draft events are only visible to event admins and admins
  • Only event admins can edit events

Screenshots

Public / non-member view

  • Only public published events are visible
  • Member-only events are visible in addition to public events
Screenshot 2026-04-24 at 2 27 02 AM Screenshot 2026-04-24 at 2 27 09 AM Screenshot 2026-04-24 at 2 27 19 AM

Member view

  • Member-only events are visible in addition to public events
Screenshot 2026-04-24 at 2 27 41 AM

Officer (not event admin)

  • Can view all published events they have access to
  • Cannot see or edit draft events they do not own
Screenshot 2026-04-24 at 2 50 45 AM

Event admin view

  • Can view draft events
  • Can edit their own events from the modal
Screenshot 2026-04-24 at 2 47 53 AM

Admin (not event admin)

  • Can view draft events
  • Cannot edit unless they are listed as an event admin
Screenshot 2026-04-24 at 2 48 31 AM

Calendar UI

  • Month view with event pills
  • Supports multiple events per day
  • Dropdown navigation for month/year
Screenshot 2026-04-24 at 2 29 00 AM Screenshot 2026-04-24 at 2 29 06 AM

Note

  • Mobile month view is functional, but a dedicated responsive layout would be a good follow-up improvement.
Screenshot 2026-04-24 at 2 49 20 AM Screenshot 2026-04-24 at 2 49 27 AM

@steeevin88 steeevin88 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

awesome!

Comment thread src/Pages/Events/CalendarView.js Outdated
className="inline-flex h-10 items-center justify-center rounded-lg border border-slate-400/40 bg-slate-800 px-3 text-[14px] font-semibold text-slate-100 transition hover:border-slate-300 hover:bg-slate-700 hover:text-white"
>
<span className="mr-2"><PlusIcon /></span>
Create

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super super small nit but can we remove the "create" text, let's just keep it as only the plus icon

@c1ndytat c1ndytat left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BANG

@KhoaNguyen706 KhoaNguyen706 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good to me 🤓

Comment thread src/Pages/Events/CalendarView.js Outdated
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December',
];
const YEAR_RANGE = Array.from({ length: 10 }, (_, i) => 2026 + i);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe

Suggested change
const YEAR_RANGE = Array.from({ length: 10 }, (_, i) => 2026 + i);
const YEAR_RANGE = Array.from({ length: 10 }, (_, i) => new Date().getFullYear() + i);

@trista-chen-29 trista-chen-29 merged commit 855afcc into dev Apr 24, 2026
4 checks passed
@trista-chen-29 trista-chen-29 deleted the trista/events_calendar_ui branch April 24, 2026 21:12
KhoaNguyen706 pushed a commit that referenced this pull request Apr 27, 2026
* Add SCEvents calendar UI and event modal

* Increase width, height and integrate create button into calendar header

* Increase font size

* Remove Create for create event button

* Auto-update years
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create per-page experience Create Calendar UI for SCEvents

5 participants