feat: add interactive calendar with event support #366
Conversation
|
@raza-khan0108 is attempting to deploy a commit to the Suman Kunwar's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds a new interactive calendar example to the examples folder, demonstrating DOM manipulation, Date object handling, and localStorage usage for beginners. The calendar allows users to navigate between months, view the current date, and add/delete events for specific dates with persistence.
Changes:
- Added interactive calendar widget with month navigation and current date highlighting
- Implemented event management system with localStorage persistence
- Created responsive UI using CSS Grid layout with modal dialogs
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 16 comments.
| File | Description |
|---|---|
| examples/interactive-calendar/index.html | HTML structure for calendar grid, navigation controls, and event modal |
| examples/interactive-calendar/style.css | CSS styling with grid layout, modal styles, and responsive design |
| examples/interactive-calendar/script.js | JavaScript logic for calendar rendering, event management, and localStorage integration |
| examples/interactive-calendar/README.md | Documentation covering features, usage instructions, and technical implementation details |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| saveEventBtn.addEventListener('click', () => { | ||
| if (eventInput.value.trim()) { | ||
| events[clickedDate] = eventInput.value; | ||
| localStorage.setItem('events', JSON.stringify(events)); | ||
| } | ||
| closeModal(); | ||
| renderCalendar(); | ||
| }); |
There was a problem hiding this comment.
Potential data loss issue. When saving an event, if the user enters only whitespace and then clicks save, the event is not saved (due to the trim check), but the modal closes and the calendar re-renders. However, if an existing event is present and the user clears it to whitespace and clicks save, the old event remains. Consider also deleting the event when the trimmed value is empty to provide consistent behavior.
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Interactive Calendar</title> | ||
| <link rel="stylesheet" href="style.css"> |
There was a problem hiding this comment.
Inconsistent file naming convention. Other examples in the repository use 'styles.css' (plural), but this example uses 'style.css' (singular). For consistency with existing examples like Weather-app and Stopwatch-app, consider renaming to 'styles.css'.
|
|
||
| Open index.html in your browser. | ||
|
|
||
| # 🔮 Future Improvements |
There was a problem hiding this comment.
Inconsistent heading level. This should be "## 🔮 Future Improvements" (level 2) to match the other main sections in the document, not "# 🔮 Future Improvements" (level 1).
| # 🔮 Future Improvements | |
| ## 🔮 Future Improvements |
|
|
||
| - **Dynamic Rendering:** Automatically generates the correct grid for any month and year. | ||
| - **Navigation:** Browse through past and future months. | ||
| - **Current Date Highlighting:** visual indicator for today's date. |
There was a problem hiding this comment.
Lowercase sentence beginning. The sentence should start with a capital letter: "Visual indicator for today's date."
| - **Current Date Highlighting:** visual indicator for today's date. | |
| - **Current Date Highlighting:** Visual indicator for today's date. |
| <span id="month-prev" class="nav-btn"><</span> | ||
| <h2 id="month-year"></h2> | ||
| <span id="month-next" class="nav-btn">></span> |
There was a problem hiding this comment.
Accessibility issue: The navigation buttons use symbols (< and >) without accessible labels. Screen reader users won't know what these buttons do. Add aria-label attributes to the spans, such as aria-label="Previous month" and aria-label="Next month".
| <span id="month-prev" class="nav-btn"><</span> | |
| <h2 id="month-year"></h2> | |
| <span id="month-next" class="nav-btn">></span> | |
| <span id="month-prev" class="nav-btn" aria-label="Previous month"><</span> | |
| <h2 id="month-year"></h2> | |
| <span id="month-next" class="nav-btn" aria-label="Next month">></span> |
| <span id="month-prev" class="nav-btn"><</span> | ||
| <h2 id="month-year"></h2> | ||
| <span id="month-next" class="nav-btn">></span> |
There was a problem hiding this comment.
Accessibility issue: Interactive elements (navigation buttons and day cells) lack proper keyboard accessibility. The .nav-btn spans should be buttons or have role="button" with tabindex="0" and keyboard event handlers. Similarly, day cells should be keyboard navigable. Users who cannot use a mouse will not be able to interact with the calendar.
| <div class="calendar-dates" id="calendar-dates"></div> | ||
| </div> | ||
|
|
||
| <div id="event-modal" class="modal hidden"> |
There was a problem hiding this comment.
Accessibility issue: The modal lacks proper ARIA attributes. The modal should have role="dialog", aria-modal="true", and aria-labelledby pointing to the heading element. This helps screen readers understand the modal's purpose and behavior.
| <div id="event-modal" class="modal hidden"> | |
| <div id="event-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="selected-date"> |
| width: 100%; | ||
| height: 60px; | ||
| margin: 10px 0; | ||
| padding: 5px; |
There was a problem hiding this comment.
The box-sizing property is not set, which can cause unexpected width calculations with the textarea element that has width: 100% and padding. Consider adding 'box-sizing: border-box;' to the textarea rule or universally with a reset rule to prevent the element from exceeding its container width.
| padding: 5px; | |
| padding: 5px; | |
| box-sizing: border-box; |
|
|
||
| <div id="event-modal" class="modal hidden"> | ||
| <div class="modal-content"> | ||
| <span class="close-btn">×</span> |
There was a problem hiding this comment.
Accessibility issue: The close button uses the × symbol without an accessible label. Add an aria-label="Close" attribute to help screen reader users understand the button's purpose.
| <span class="close-btn">×</span> | |
| <span class="close-btn" aria-label="Close">×</span> |
| } | ||
|
|
||
| // Add Click Event for Modal | ||
| dayDiv.addEventListener('click', () => openModal(dateString)); |
There was a problem hiding this comment.
The event listener is attached to each day cell individually, which creates many event listeners. For better performance, especially with larger calendars, consider using event delegation by attaching a single listener to the parent datesElement and checking the event target. This reduces memory usage and improves performance.
1 participant
📝 Description
This PR adds a Simple Interactive Calendar to the
examples/folder.It is designed to help beginners practice DOM manipulation,
Dateobject handling, and dynamic UI rendering.🎯 Features Implemented
localStorage.💡 Concepts Demonstrated
new Date(year, month, 0)to calculate days in a month.divson navigation.📸 Screenshots
(Optional: You can drag and drop a screenshot of your calendar here so the reviewer can see it quickly)
✅ Checklist
Screenshots
