Skip to content

Implement monthly calendar view with events #10

@peterlipt

Description

@peterlipt

Description:
Create a responsive, interactive monthly calendar component that displays events from the Payload CMS events collection. The calendar shows the current month by default and highlights days that include events.

Functionality:
• Show a monthly grid view (7-day weeks, full month).
• Calendar always starts in the current month, but users can navigate forward/backward across months and years (e.g. December → January).

Display:
• Dot markers for each individual event on a given day (multiple dots possible).
• Horizontal bar for multi-day events (spanning the full range).
• On hover (desktop) or tap (mobile), show a single info card per day.
• If multiple events occur on that day, all are listed within the same card, separated clearly.
• Each entry shows:
• Event title (title_hu / title_en)
• Short description (description_hu / description_en)
• Full date range if it’s a multi-day event

Data Source:
• Events are pulled from the Payload CMS events collection.
• Each event has:
• title (Hungarian and English)
• shortDescription (Hungarian and English)
• date: either a single day or a date range
• No timezone handling — all times are interpreted as Europe/Budapest.

Requirements:
• Fully responsive on all screen sizes
• Bilingual support must be implemented (based on current language setting)
• Loading state while data is being fetched
• Fallback display if event fetch fails or there are no events in the month
• Accessibility and performance best practices applied

UI Notes:
• Multi-event day: multiple dots, one shared card
• Multi-day events: single horizontal bar across relevant days
• Highlight the current day

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions