Skip to content

feat(calendar): enhance Air calendar UI with quick wins and UX improvements#12

Merged
qasim-nylas merged 4 commits intomainfrom
fix-air-cal-i001
Feb 1, 2026
Merged

feat(calendar): enhance Air calendar UI with quick wins and UX improvements#12
qasim-nylas merged 4 commits intomainfrom
fix-air-cal-i001

Conversation

@qasim-nylas
Copy link
Collaborator

@qasim-nylas qasim-nylas commented Jan 31, 2026

Summary

Enhances the Air calendar UI with several quick wins and UX improvements:

  • Dynamic header: Updates "Today's Schedule" header when clicking different days
  • Event count badges: Shows number of events on each calendar day
  • Today indicator: Pulsing dot on current day for easy identification
  • Relative time indicators: Shows "Starting now", "in X min", "Today" for upcoming events
  • Join Meeting button: Quick access to video conference links with Google Meet styling
  • Edit button: Gear icon in top-right corner of event cards (appears on hover)
  • Improved event loading: Better skeleton states and error handling

Technical Changes

  • calendar-ui.js: Added renderEventCard with edit button, join meeting link, relative time
  • calendar-grid.css: Added styles for badges, indicators, edit button positioning
  • calendar-data.js: Improved event filtering and data handling

Bug Fixes

  • Fixed Join Meeting button opening Edit Modal (added stopPropagation)
  • Fixed edit button positioning (inline styles to override CSS conflicts)

Test Coverage

  • Added 14 new Playwright E2E tests for event card UI features
  • Tests cover: edit button, join meeting button, event count badges, today indicator, relative time indicators
  • Updated air-selectors.js with new calendar element selectors

Test Plan

  • Calendar view loads correctly
  • Event count badges appear on days with events
  • Today indicator pulses on current day
  • Clicking a day updates the header and shows that day's events
  • Join Meeting button opens meeting link in new tab (does not open modal)
  • Edit button appears on hover in top-right corner
  • Edit button opens Edit Event modal
  • Relative time shows correctly for upcoming events
  • All 46 calendar Playwright tests pass

- 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.
@qasim-nylas qasim-nylas changed the title fix(calendar): improve dynamic header and event loading feat(calendar): enhance Air calendar UI with quick wins and UX improvements Jan 31, 2026
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.
@qasim-nylas qasim-nylas merged commit 2449d56 into main Feb 1, 2026
6 checks passed
@qasim-nylas qasim-nylas deleted the fix-air-cal-i001 branch February 1, 2026 05:15
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.

1 participant