feat(calendar): enhance Air calendar UI with quick wins and UX improvements#12
Merged
qasim-nylas merged 4 commits intomainfrom Feb 1, 2026
Merged
feat(calendar): enhance Air calendar UI with quick wins and UX improvements#12qasim-nylas merged 4 commits intomainfrom
qasim-nylas merged 4 commits intomainfrom
Conversation
- Increase event fetch limit to 200 to cover full month view - Update events panel header dynamically based on selected date: - Shows "Today's Schedule" when clicking on today's date - Shows formatted date (e.g., "Wednesday, January 28") for other days - Change default sidebar view from "Today" to "Week" - Replace hardcoded title/date with "Loading..." placeholders that get populated dynamically by JavaScript
1. Event count badges - Show number of events per day instead of simple dots, making it easy to see busy days at a glance 2. Join Meeting button - Replace plain video call links with prominent gradient buttons for one-click meeting joins 3. Relative time indicators - Show contextual time labels: - "Starting now" (red, pulsing) for events within 5 min - "in X min" (yellow) for events within 30 min - "in X hrs" (purple) for events within 3 hours - "Today" / "Tomorrow" for same/next day events 4. Pulsing today indicator - Add animated pulse effect to today's date for better visual recognition
- Add gear icon edit button to event cards in top-right corner - Button appears on hover, opens Edit Event modal when clicked - Fix Join Meeting link to only open meeting URL without triggering edit modal (added event.stopPropagation()) - Add CSS styles for edit button positioning and hover states - Use inline styles to override conflicting button styles from buttons.css The edit button provides quick access to modify events directly from the calendar week view, while the Join Meeting button now correctly opens only the meeting link without side effects.
Add comprehensive E2E tests for the new calendar event card functionality: Edit Button: - Verify edit button appears on hover with correct opacity transition - Verify absolute positioning in top-right corner (8px from edges) - Verify click opens event modal with populated title - Verify click event does not propagate to parent card Join Meeting Button: - Verify button exists for events with conferencing URLs - Verify target="_blank" attribute for external links - Verify click does not trigger event modal (stopPropagation) Event Count Badge: - Verify badges appear on calendar days with events - Verify absolute positioning in bottom-right corner Today Indicator: - Verify pulsing indicator appears on current day - Verify todayPulse animation is applied Relative Time Indicator: - Verify indicators show for upcoming events - Verify starting-soon has gradient warning styling - Verify starting-now has urgentPulse animation Also adds new selectors to air-selectors.js for event card elements.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Enhances the Air calendar UI with several quick wins and UX improvements:
Technical Changes
calendar-ui.js: Added renderEventCard with edit button, join meeting link, relative timecalendar-grid.css: Added styles for badges, indicators, edit button positioningcalendar-data.js: Improved event filtering and data handlingBug Fixes
Test Coverage
Test Plan