GCal Visible Time by Color

What It Does

This extension calculate how many times you spending on different color events in Google Calendar. Many peoples use colors for different activities (blue for work, red for personal, etc.) and this count all times automatically.

Important: Only calculate events visible on screen right now. Not all calendar, just current view.

Installation

1. Open chrome://extensions in Chrome browser
2. Turn on "Developer mode" toggle (top right corner)
3. Click "Load unpacked" button
4. Select the folder with manifest.json, contentScript.js, and ui.css files
5. Extension should appear in list

How to Use

Go to https://calendar.google.com and extension start automatically. You will see panel on left sidebar (or bottom-right if sidebar not found). Panel show time spending for each color.

Panel update automatically when you change dates or view mode. Just browse calendar normally.

Panel Sections

Total Time: Sum of all visible events (format: "5h 30m")

Time by Color: Each color show with dot, color name, and duration. Sorted by most time first.

No Duration in View: Events where time cannot be calculated (common in month view). Show count of events instead of hours.

How It Works

DOM Parsing: Script find event elements using div[data-eventchip][data-eventid] selector. Extract color from getComputedStyle() and time from .XuJrye or .lhydbb.gVNoLb elements.

Time Parsing: Handle different formats (12h/24h, AM/PM, various separators). Convert to minutes and calculate duration.

Auto-Update: Use MutationObserver to detect calendar changes. Debounce 400ms to avoid too many calculations.

Aggregation: Store data in Map by RGB color. Sum all durations for same color.

Limitations

• Only count visible events in current view
• Month view often have no time informations, so events go to "No duration" section
• Color detection use RGB values, might group similar colors incorrectly
• Multi-day and all-day events usually no duration
• Many events on screen can cause small performance delay

Future Ideas

• Settings panel for custom color names
• Date range selector
• Export to CSV
• Use Calendar API instead of DOM parsing
• Charts and graphs
• Filter specific calendars

Final Words

Thank you for using extension! Hope it help you manage time better. If find bugs or have suggestions, please report.

This is simple tool but work well for basic tracking by color.