Skip to content
Home Assistant Lovelace UI Custom Google Calendar Card
JavaScript
Branch: master
Clone or download

README.md

Calendar Card for Home Assistant

Show Google calendar events

GitHub Release License

Project Maintenance GitHub Activity hacs_badge

Features


  • Show the next 5 events on your Google Calendar (default set by home assistant)
  • Set custom time and date format for each event
  • Click on event to open in your Google calendar app
  • Integrate multiple calendars
  • Update notifications via custom_updater
  • Click on event location to open maps app
  • Language support
  • Progress bar for ongoing events
  • Split multiday events

Prerequisites


You should have setup Google calendar integration or Caldav integration in HomeAssistant.

Installation through HACS


Add the following to resources in your lovelace config:

resources:
  - url: /community_plugin/calendar-card/calendar-card.js
    type: js

Options


Name Type Requirement Description
type string Required custom:calendar-card
title string Optional Calendar Header shown at top of card
hideHeader boolean Optional false Hide the header regardless of value
numberOfDays number Optional 7 Number of days to display from calendars
entities object Required List of calendars to display
timeFormat string Optional HH:mm Format to show event time (see here for options)
dateTopFormat string Optional DD Format for top line of event date
dateBottomFormat string Optional ddd Format to bottom line of event date
ignoreEventsExpression string Optional `` Simple case insensitive regex to ignore events that match title
ignoreEventsByLocationExpression string Optional `` Simple case insensitive regex to ignore events that match location
progressBar boolean Optional false Adds progress bar to ongoing events
hideTime boolean Optional false Hides event time section entirely
showLocation boolean Optional false Shows location address
showLocationIcon boolean Optional true Shows map icon when event has a location
showMultiDay boolean Optional false Split multiday events into per day
showEventOrigin boolean Optional false Shows what calendar each event is from
highlightToday boolean Optional false Hightlight's today's events
hidePastEvents boolean Optional false Hide events that have passed
eventsLimit integer Optional 99 Maximum number of events to show (shows rest of day after cut off)
hardLimit boolean Optional false Overrides eventsLimit default of showing rest of day's events even after cutoff
maxHeight boolean Optional false Sets max height for card to 500px and overflows the rest
fullDayEventText string Optional All day Set custom text for a full day event
startText string Optional Start Set custom text for event start time
endText string Optional End Set custom text for event end time

Configurations


type: custom:calendar-card
title: "My Calendar"
progressBar: true
entities:
  - calendar.ljmerzagmailcom

You want more than 5 Google events?

Open the google_calendars.yaml file and and max_results: 20 for each calendar items you want more events for. See documentation at Home Assistant


Enjoy my card? Help me out for a couple of 🍻 or a ☕️!

coffee

You can’t perform that action at this time.