Add meetings to your sidebar panel

I already built a sidebar panel that shows Trello cards that are due today, but it was missing something. I really wanted to be able to see what meetings I have planned for the day.

So I set out to figure out how to add my calendar events for the day!

I thought it was going to be really hard, and I totally overcomplicated it. I thought I’d need something with Zapier and sending my calendar events to a google sheet and then getting pixiebrix to look in a sheet. Couldn’t get anything to work… and then @mike threw out the idea of maybe just embedding an iframe? And sure enough… IT WORKED. And honestly, worked pretty perfectly!

Here’s how to configure it.

  1. Add a new sidebar Panel option

  2. Call the extension and side panel title whatever you wish! I kept it simple and called it Cal.

  3. Add the “render document” brick.

  4. Double click the text you want to edit. I changed the header to “Upcoming Events”, and I removed the example text by clicking it in the preview, then selecting the trash icon.

  5. Click the three dots in the column element and select the “Brick” option.

  6. Now head to the left side of the page editor and click the “+” button to add a brick. Select the iframe brick.

  7. Now head to Google Calendar and we’ll set it up.
    In the calendar settings, look for the specific calendar you want, and the Integrate Calendar section

Just under the embed code link, select the customize button.

The settings are pretty straightforward - you can configure it however you like. I mostly unchecked everything to keep it pretty minimal.

The important think you want is to change the default view from Month to Agenda.

Then copy the link at the top of the page and head back to PixieBrix.

  1. Configure the iframe brick

To do this, you just need to grab the link from the “src” property of the iframe and paste it in the url section.

The width will automatically be set to 100% but, you can change that if you prefer.

You can also adjust the height. I preferred 600, but you can play around with it and see what fits you.

Click “render panel” and you’ll see it appear like magic!

As far as actually opening the side panel, you can configure that in another extension. I created a quickbar action that opens the sidebar so i can toggle between trello cards and my calendar. You could also create it so that it shows you your calendar sidebar panel when you visit certain sites.

If you’d prefer to watch, here’s a video where I walk through it!


Thanks for sharing @britt_joiner!

Didn’t realize you could choose which calendar format to embed. Cool! :spiral_calendar: