Event Calendar Widget

Build a simple event calendar widget that displays an always-visible calendar embedded directly on the page. Users should be able to view upcoming events and select dates to see event details.

Requirements

The calendar widget should:

• Display the calendar permanently embedded on the page, not as a popup
• Allow users to select a date to see if any events are scheduled for that day
• Show event information when a date with an event is selected
• Pre-populate with a few test events on specific dates
• Use a clean, professional appearance

Implementation

@generates

Create a calendar widget component that embeds an always-visible date picker on the page and displays event information for selected dates.

API

/**
 * Initializes the event calendar widget
 * @param {string} containerId - The ID of the HTML element to contain the calendar
 * @param {Array<Object>} events - Array of event objects with date and description
 * @returns {Object} Calendar instance for further manipulation
 */
function initializeCalendar(containerId, events) {
  // IMPLEMENTATION HERE
}

module.exports = { initializeCalendar };

Test Cases

• When the calendar is initialized, it appears immediately visible on the page without requiring any user action @test
• When a date with an event is selected, the event information is displayed to the user @test
• The calendar remains visible even after a date is selected, unlike popup calendars that close after selection @test

Dependencies { .dependencies }

flatpickr { .dependency }

Provides date picker functionality with multiple display modes and customization options.