🚀 Quick Start

This quick start guide will take you through the easiest ways to get up and running. Please note that this quick start guide assumes you already have a calendar setup in Home Assistant, this card fully supports Google Calendar and has support for calDav although calDav calendars may see limited functionality with some features.

Installation

Note

You must have either the Google calendar or calDav component configured in Home Assistant prior to commencing.

Manual

  1. Download atomic-calendar-revive.js file from the dist directory to /www/community/atomic-calendar-revive/atomic-calendar-revive.js directory in your Home Assistant - latest release

  2. If you use the Lovelace Editor then add the follwoing to Configuration -> Lovelace Dashboards -> Resources

1 /local/community/atomic-calendar-revive/atomic-calendar-revive.js

  1. If you edit your files directly, add the below to the ui-lovelace.yaml file :

1 resources:
2   - url: /local/community/atomic-calendar-revive/atomic-calendar-revive.js
3     type: module

Note

If you are upgrading, try to reload your browser cache by pressing ctrl-shift-r or shift-F5.

Note

If you want to use Calendar mode follow the guide Show more than 5 events, by default HA only gets 5 events from Google Calendar.

Show more than 5 events

In order to increase the amount of events that are shown you have to add max_results setting to google_calendars.yaml file

For calendar mode we recommend that this is set to at least 42

1 - cal_id: xxxxxxxxxxxxxxxxxxxx@group.calendar.google.com
2   entities:
3   - device_id: calendar_id
4     name: Calendar_name
5     max_results: 42

Configuration

For more configuration options check out this section.

Simple Configuration

The easiest way to configure the card is via the built in editor.

  1. Edit the page you want to add the card to

  2. Click Add Card at the bottom right

  3. Scroll down to Custom:Atomic Calendar Revive and click it

  4. Click the Required section and toggle the calendars you wish to add

  5. Setup all other options as you would like going through each section in the editor

Advanced Configuration

In order to setup the calendar with more advanced configuration you can edit directly from the code editor in YAML. Here you will be able to add any options as per this documetation

Example:

1 - type: "custom:atomic-calendar-revive"
2   entities:
3   - entity: calendar.YOUR_CALENDAR_HERE
4     name: 'My Calendar'
5     color: red
6     allowlist: '(word1)|(word2)'
7   - entity: calendar.YOUR_CALENDAR1_HERE
8     blocklist: '(word1)|(word2)'