feat(google-calendar): add color-coded events support

[nicomiguelino]

User description

This PR adds support for color-coded events in the Google Calendar Edge App.

Changes

• Add colorId and backgroundColor fields to CalendarEvent interface
• Fetch event colors from Google Calendar Colors API with caching
• Apply event-specific colors to all calendar views (daily, weekly, schedule)
• Fallback to default color (#e6e7e7) when colorId is not specified

Implementation Details

• Created colors.ts utility to fetch and map Google Calendar color definitions
• Updated events.ts to include color information when fetching events
• Modified all three calendar view components to apply background colors dynamically
• Implemented color caching to minimize API calls

Testing

• Tested with events that have colorId set
• Verified fallback behavior when colorId is missing
• Confirmed colors display correctly in all three view modes

---

PR Type

Enhancement

---

Description

• Add colorId and backgroundColor event properties

• Fetch calendar colors with one-hour cache

• Map events to colors in fetchCalendarEventsFromGoogleAPI

• Apply event background styles in calendar views

---

Diagram Walkthrough

flowchart LR
  A["fetchCalendarEventsFromGoogleAPI"] -- "fetch colors via" --> B["fetchCalendarColors"]
  A -- "attach `colorId` & `backgroundColor`" --> C["CalendarEvent"]
  C -- "render with styles in" --> D["DailyCalendarView"]
  C -- "render with styles in" --> E["WeeklyCalendarView"]
  C -- "render with styles in" --> F["ScheduleCalendarView"]

Loading

File Walkthrough

Relevant files

Enhancement

calendar.ts Extend CalendarEvent interface with colors                              edge-apps/blueprint/ts/constants/calendar.ts Added optional colorId property Added optional backgroundColor property +2/-0      colors.ts Implement calendar color fetching and caching                        edge-apps/google-calendar/src/colors.ts Created fetchCalendarColors API call Implemented 1-hour cache with isCacheValid Added getEventBackgroundColor fallback logic +64/-0    events.ts Integrate color mapping in event fetch                                      edge-apps/google-calendar/src/events.ts Imported color utilities Fetched and caught fetchCalendarColors Attached colorId & backgroundColor to events +13/-0    DailyCalendarView.vue Style daily view events with background color                        edge-apps/blueprint/ts/components/calendar/DailyCalendarView.vue Updated cache key to include backgroundColor Applied background-color style if available +6/-1      ScheduleCalendarView.vue Color-code dots in schedule view                                                  edge-apps/blueprint/ts/components/calendar/ScheduleCalendarView.vue Bound dot color via :style using backgroundColor Updated both today and tomorrow event rendering +14/-2    WeeklyCalendarView.vue Style weekly view events with background color                      edge-apps/blueprint/ts/components/calendar/WeeklyCalendarView.vue Updated cache key to include backgroundColor Applied background-color style if available +6/-1

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit d45082a)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Cache Behavior Fetch errors leave cachedColors null and cacheTimestamp unset, causing repeated fetch attempts and console warnings on every invocation. Consider caching failures or adding retry/backoff logic to avoid excessive API calls and log spam. interface ColorDefinition { background: string foreground: string } interface CalendarColors { kind: string updated: string event: Record<string, ColorDefinition> } const CACHE_EXPIRATION_MS = 60 * 60 * 1000 // 1 hour in milliseconds let cachedColors: CalendarColors | null = null let cacheTimestamp: number | null = null const isCacheValid = (): boolean => { if (!cachedColors || !cacheTimestamp) { return false } const now = Date.now() const cacheAge = now - cacheTimestamp return cacheAge < CACHE_EXPIRATION_MS } export const fetchCalendarColors = async ( accessToken: string, ): Promise<CalendarColors> => { if (isCacheValid()) { return cachedColors! } const apiUrl = 'https://www.googleapis.com/calendar/v3/colors' const response = await fetch(apiUrl, { headers: { Authorization: `Bearer ${accessToken}`, }, }) if (!response.ok) { throw new Error('Failed to fetch calendar colors from Google Calendar API') } const data = await response.json() cachedColors = data cacheTimestamp = Date.now() return data } export const getEventBackgroundColor = ( colorId: string | undefined, colors: CalendarColors | null, defaultColor: string = '#e6e7e7', ): string => { if (!colorId || !colors || !colors.event || !colors.event[colorId]) { return defaultColor } return colors.event[colorId].background } Import Path The import from '@/colors' may not resolve properly depending on module alias configuration. Ensure the path alias points to the correct file or switch to a relative path. import { fetchCalendarColors, getEventBackgroundColor } from '@/colors' Styling Consistency The inline style binds the dot's color to event.backgroundColor, which may not match intended background styling. Consider using background-color or CSS variables to ensure visual consistency across themes. <span class="event-dot" :style=" event.backgroundColor ? { color: event.backgroundColor } : {} " >•</span >

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to d45082a
Explore these optional code suggestions:

Category	Suggestion	Impact
General	Add event text color property To support contrasting text for color-coded events, extend the CalendarEvent interface with an optional foregroundColor property. This lets you carry the API’s foreground color through the components. edge-apps/blueprint/ts/constants/calendar.ts [13-20] export interface CalendarEvent { title: string startTime: string endTime: string isAllDay: boolean colorId?: string backgroundColor?: string + foregroundColor?: string } Suggestion importance[1-10]: 4 __ Why: The suggestion correctly adds a foregroundColor field to CalendarEvent for future contrast support but the PR doesn’t yet integrate or utilize it, making this a low-impact enhancement.	Low
	Set event text color Apply the foregroundColor from each event to the baseStyle so text remains legible over its background. Only add it when foregroundColor is defined. edge-apps/blueprint/ts/components/calendar/DailyCalendarView.vue [236-239] // Add background color if available if (event.backgroundColor) { baseStyle['background-color'] = event.backgroundColor } +// Add text color for contrast +if (event.foregroundColor) { + baseStyle.color = event.foregroundColor +} Suggestion importance[1-10]: 4 __ Why: Applying foregroundColor to the style is a valid UI improvement, but without existing foregroundColor support in the PR it remains a minor cosmetic enhancement.	Low

---

Previous suggestions

Suggestions up to commit 0dc730f

Category	Suggestion	Impact
General	Cache colors per token Cache calendar colors per access token instead of using a single global cache to avoid returning stale or incorrect colors when multiple tokens or calendars are in use. Replace the null cache with a map keyed by the token and store each response under its key. This ensures each user or calendar ID gets its own cached data. edge-apps/google-calendar/src/colors.ts [12-36] -let cachedColors: CalendarColors | null = null +const cachedColorsMap: Record<string, CalendarColors> = {} export const fetchCalendarColors = async ( accessToken: string, ): Promise<CalendarColors> => { - if (cachedColors) { - return cachedColors + if (cachedColorsMap[accessToken]) { + return cachedColorsMap[accessToken] } - ... + + const apiUrl = 'https://www.googleapis.com/calendar/v3/colors' + const response = await fetch(apiUrl, { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }) + if (!response.ok) { + throw new Error('Failed to fetch calendar colors from Google Calendar API') + } const data = await response.json() - cachedColors = data + cachedColorsMap[accessToken] = data return data } Suggestion importance[1-10]: 8 __ Why: The global cache cachedColors can return stale data when multiple access tokens are used, so using a per‐token cache enhances correctness and prevents cross‐user data leakage.	Medium
	Limit style cache size Add a size limit and eviction policy to the eventStyleCache to prevent unbounded growth and potential memory leaks. After inserting a new style entry, check the map size and remove the oldest entry when exceeding a defined max size. edge-apps/blueprint/ts/components/calendar/DailyCalendarView.vue [189-242] +const MAX_CACHE_ENTRIES = 500 const eventStyleCache = new Map<string, Record<string, string>>() // ... eventStyleCache.set(cacheKey, baseStyle) +if (eventStyleCache.size > MAX_CACHE_ENTRIES) { + const oldestKey = eventStyleCache.keys().next().value + eventStyleCache.delete(oldestKey) +} Suggestion importance[1-10]: 5 __ Why: Introducing a max size and eviction policy for eventStyleCache aligns with the existing comment about preventing memory leaks and avoids unbounded growth.	Low
Possible issue	Validate API response format Validate that the JSON response contains the expected event property before caching to avoid runtime errors if the API returns an unexpected shape. Throw an error or fallback if the format is invalid. edge-apps/google-calendar/src/colors.ts [33-34] const data = await response.json() +if (!data.event || typeof data.event !== 'object') { + throw new Error('Invalid calendar colors format: missing event definitions') +} cachedColors = data Suggestion importance[1-10]: 6 __ Why: Ensuring that data.event exists before caching guards against unexpected API responses and prevents runtime errors when accessing undefined properties.	Low

[Copilot]

Pull request overview

This PR adds support for color-coded events in the Google Calendar Edge App by fetching event colors from the Google Calendar Colors API and applying them across all calendar views.

Changes:

• Added colorId and backgroundColor fields to the CalendarEvent interface
• Created a new colors.ts utility module with color fetching and caching functionality
• Updated event fetching logic to retrieve and map colors to events with graceful fallback to defaults
• Modified all three calendar views (daily, weekly, schedule) to dynamically apply event background colors

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
edge-apps/blueprint/ts/constants/calendar.ts	Added optional colorId and backgroundColor fields to CalendarEvent interface
edge-apps/google-calendar/src/colors.ts	New utility file implementing color fetching from Google Calendar API with module-level caching
edge-apps/google-calendar/src/events.ts	Integrated color fetching and mapping into event retrieval logic with error handling
edge-apps/blueprint/ts/components/calendar/DailyCalendarView.vue	Applied backgroundColor to event styles and updated cache key to include color
edge-apps/blueprint/ts/components/calendar/WeeklyCalendarView.vue	Applied backgroundColor to event styles and updated cache key to include color
edge-apps/blueprint/ts/components/calendar/ScheduleCalendarView.vue	Applied backgroundColor as dot color in schedule view

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The module-level cache for calendar colors never gets invalidated. This means if a user changes their color preferences in Google Calendar, the app won't reflect those changes until it restarts. Consider implementing a cache invalidation strategy, such as using the 'updated' field from the API response to determine if the cache is stale, or adding a time-based expiration (e.g., cache colors for 1 hour).

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[github-actions]

Persistent review updated to latest commit d45082a

[nicomiguelino]

@salmanfarisvp, please review this PR. Here are the screenshots that reflect the changes:

Weekly View

Daily View

Schedule View