Skip to content

fix(ui): Calendar view respects user-selected timezone#67497

Open
anmolxlight wants to merge 1 commit into
apache:mainfrom
anmolxlight:fix/calendar-view-timezone-67477
Open

fix(ui): Calendar view respects user-selected timezone#67497
anmolxlight wants to merge 1 commit into
apache:mainfrom
anmolxlight:fix/calendar-view-timezone-67477

Conversation

@anmolxlight
Copy link
Copy Markdown
Contributor

Problem

The Calendar view in the Airflow UI always shows Dag runs in UTC, ignoring the user's selected timezone from the TimezoneContext. Runs are grouped by their raw UTC date/hour via string slicing, and the calendar grid bounds are computed using the browser-local timezone.

Root Cause

The Calendar feature tree had no awareness of useTimezone() / TimezoneContext:

  1. API queries — The date range sent to the API used selectedDate directly without timezone conversion
  2. Run groupingcreateDailyDataMap and createHourlyDataMap used run.date.slice(0, 10) / run.date.slice(0, 13) to extract date/hour, ignoring the user's timezone
  3. Grid constructiongenerateDailyCalendarData and generateHourlyCalendarData used dayjs().year(...) instead of dayjs().tz(timezone).year(...), computing grid bounds in browser-local time

Changes

  • calendarUtils.ts — Added dayjs/plugin/timezone and dayjs/plugin/utc imports. Threaded a timezone: string parameter through all exported/internal functions. Replaced run.date.slice(0, 10) / run.date.slice(0, 13) with dayjs(run.date).tz(timezone).format(...). Grid construction now uses dayjs().tz(timezone) instead of bare dayjs().

  • Calendar.tsx — Imported useTimezone, added dayjs tz/utc plugins. Gets selectedTimezone from context. Computes startDate/endDate in the selected timezone via selectedDate.tz(selectedTimezone, true), then converts to UTC with .utc().format(...) for API queries. Passes timezone prop to view components and createCalendarScale.

  • DailyCalendarView.tsx — Accepts timezone prop, passes it to generateDailyCalendarData.

  • HourlyCalendarView.tsx — Accepts timezone prop, passes it to generateHourlyCalendarData.

  • calendarUtils.test.ts — All calculateDataBounds and createCalendarScale calls updated with "UTC" as the 4th argument.

Fixes #67477

Thread selectedTimezone from useTimezone() through the Calendar
component tree. Compute date ranges in the selected timezone before
converting to UTC for API queries. Group Dag runs by their local
date/hour in the selected timezone instead of raw UTC string slicing.

Fixes apache#67477
@boring-cyborg boring-cyborg Bot added the area:UI Related to UI/UX. For Frontend Developers. label May 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Calendar view does not respect user-selected timezone

1 participant