Skip to content
Chrome Extension to (Box) Select multiple Google Calendar events. You can select, drag, delete, change color and duration.
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Google Calendar Box Select

Web Extension to (Box) Select multiple Google Calendar events. Built with TypeScript and Webpack. Supports Chrome and experimentally Firefox and Opera.


multilingual locale support

The extension works by repeating an action on one of the selected events and applying it to the rest.
Using the original as a source a Fetch request is made changing just the necessary properties (e.g., the event ID, start date, end date or color).


B - (hold) enter selection mode

Q - delete selected events

Keyboard shortcuts can be changed in the Extension's options.

You can click the extension icon to view a simple toolbar letting you select as well as delete all selected events. Deleting all selected events from the pop-up uses hardcoded CSS-based selectors instead of repeating an HTTP request.

Supported features are:

  • repeating these actions to selected events:
    • deleting,
    • dragging (including changing duration),
    • changing color.


For developing this extension I strongly recommend the free editor - VSCode.

Step 1

$ npm install
$ npm run dev

Step 1.5 (only the first time!)

Load the extension in Chrome. Click Load unpacked and choose the build folder.

Step 2 (after every change)

If the app has recompiled and you want to view the changes you have to reload the extension.

You can do this either with the Extensions Reloader:

or manually:

VSCode settings (settings.json):

Prettier plugin + TSLint plugin + (optionally) Debugger for Chrome in VSCode.

This extension is written in TypeScript and VSCode provides great TypeScript IntelliSense. Debugger for Chrome allows you to set breakpoints in VSCode and debug in VSCode as well; however, I didn't find this too practical and also a bit buggy.

Consider these tools to simplify your workflow: Extensions Reloader, Webpack Chrome Extension Reloader (commented out by default).


Set NODE_ENV variable to production to minify generated JS and disable source maps. Use development apart from that to get blazing fast hot reload.

$ npm run build

Deploys to build/ folder. Zip folder for distribution or open the directory in Chrome for developing ⋮ >> More tools >> Extensions >> Load unpacked (chrome://extensions/).


Considered features you could help with are:

  • moving selected events while dragging,
  • special context menu,
  • copying events,
  • SHIFT or ALT selection to respectively add and remove from selected,
  • CTRL+Z undo mechanism,
  • changing title to multiple events at a time,
  • inserting multiple events at a time,
  • using Mozilla's WebExtension polyfill to support Firefox, Chrome, Opera and Edge.

Very welcome! Please follow the provided TSLint rules. Use Prettier to stop your code from becoming too long. Don't shun from using modern (ES6+) syntax, arrow functions and the like.

Style (tslint.json):

tabs, semicolons, single quotes, CRLF line endings.

ES6+ features encouraged (tsconfig.json):

target: ES5, lib: dom, es2018.

⚠️ Problem

The process of deleting events is very hacked together since no hooking into underlying (minified) JavaScript code is being done. Instead of that the trash can is actually being clicked to delete events using a querySelector with hardcoded selectors:

#xDetDlg > div > div.Tnsqdc > div > div > div.pPTZAe > div:nth-child(2) > div

You can see this is not ideal. Because of this the ideal goal of this extension would be to acquire so many users as to pressure the Google Calendar team into creating a stable system of multiple selection, deletion and editing...

the ideal goal of this extension would be to... die

Not the hero we deserved but the one we needed.


This boilerplate was used to allow for Webpack module bundling:

Additionally I'd like to personally thank the StackOverflow community ❤️ 💖 ❗️ ❗️



You can’t perform that action at this time.