Create an "Upcoming Sports Game" card with Google Calendar

image

Full guide here: https://smarthomepursuits.com/add-sports-team-schedules-to-home-assistant-via-google-calendar/ Note that I have color-colored the sections of YAML that you need to swap out in my blog post, but those colors don’t show up here.

In this guide, I’m going to show you how to add your favorite sports team’ schedules to your Google Calendar. Once added, you will then be able to see the upcoming schedule of your team directly within Home Assistant!

This could allow you to change lights to your favorites teams colors a few hours before the game to get you in the gameday spirit or something as simple as send you a notification a few minutes before gametime.

This guide assumes you already have Google Calendar integrated into Home Assistant. If not, follow that step by step guide first.

I also wanted to credit this Reddit post for the inspiration (although I couldn’t get mine to look as pretty as his, despite following his steps exactly).

Subscribe to your Teams Calendar

To get your team’s schedule, we can subscribe to our teams calendar from https://calendar.google.com.

Under Other Calendars, click the + sign. Then click Browse calendars of interest.

Under the Sports section, expand whatever sport and team you’d like to subscribe to.

After subscribing, you should now see the schedule within your Google Calendar.

However, if you go back to your calendar within Home Assistant, you’ll notice the events don’t show up yet. This is because Home Assistant won’t add a newly subscribed calendar until your restart it ( Configuration > Server Controls > Restart).

Also something to note: By default, Home Assistant will only show the next 5 events as you can see here:

To change this behavior, go to File Editor > click the folder at the top > google_calendars.yaml.

Under the Cal_id for your sports team, add this line.

max_results: 10

This will now track the next 10 events for your team. Restart Home Assistant 1 more time and you should see 10 events in your calendar.

Create “Upcoming Game” Lovelace Card

The next thing we’re going to do is create a few template sensors for your teams next game and opponent. To do this, first you need to find out the entity name of your sports team.

Configuration > Entities > start searching for your team (in my example, “houston”)

Take note of the entity ID name: (calendar.houston_astros)

Then, go File Editor > Configuration.yaml. Scroll to the bottom and paste this code changing out the green text with the name of your favorite team, and the orange with your calendar entity ID.

sensor:
  #Astros Next Up Date
  - platform: template
    sensors:
      astros_date:
        entity_id: calendar.houston_astros
        friendly_name: Astros next game
        value_template: >-
          {% if is_state('calendar.houston_astros', 'on') %}
            Playing Now
          {% else %}
            {% set st = state_attr('calendar.houston_astros', 'start_time') %}
            {% if st != None %}
              {{ as_timestamp(st)  | timestamp_custom("%A, %b %d at %-I:%M %p") }}
            {% else %}
              No games scheduled
            {% endif %}
          {% endif %}
          
  # Astros Next Opponent
  - platform: template
    sensors:
      astros_opponent:
        entity_id: calendar.houston_astros
        friendly_name: Astros Next Opponent
        value_template: >-
          {{ states.calendar.houston_astros.attributes.message }}

Save the configuration and restart Home Assistant again.

Create Basic Lovelace Card

Click Add Card > Manual. Then search for your sensor.sports_team. Here’s what that would look like:

Here’s the yaml for this card. Note that you’ll need the Vertical Stack in Card and Multiple Entity Row integrations from HACS for this.

cards:
  - entities:
      - entity: sensor.astros_opponent
      - entity: sensor.astros_date
        info:
          entity: sensor.astros_opponent
          name: false
        name: Next Game
        type: custom:multiple-entity-row
    type: entities
title: Upcoming Baseball Games
type: custom:vertical-stack-in-card

Open HACS > Integrations > frontend tab.

Add Multiple Entity Row and Vertical Stack in Card:

Alternate Card View (Multiple Teams)

If you’ve subscribed to more than 1 sports team, you can both to the same Lovelace card. Make sure to set the Max_results to 10 as well, if you’d like.

As you can see, they both have the same start time:

And here is the YAML you would add to configuration.yaml for two teams (Houston Astros and Detroit Tigers)

sensor:
  #Astros Next Up Date
  - platform: template
    sensors:
      astros_date:
        entity_id: calendar.houston_astros
        friendly_name: Astros next game
        value_template: >-
          {% if is_state('calendar.houston_astros', 'on') %}
            Playing Now
          {% else %}
            {% set st = state_attr('calendar.houston_astros', 'start_time') %}
            {% if st != None %}
              {{ as_timestamp(st)  | timestamp_custom("%A, %b %d at %-I:%M %p") }}
            {% else %}
              No games scheduled
            {% endif %}
          {% endif %}
          
  # Astros Next Opponent
  - platform: template
    sensors:
      astros_opponent:
        entity_id: calendar.houston_astros
        friendly_name: Astros Next Opponent
        value_template: >-
          {{ states.calendar.houston_astros.attributes.message }}
  #Tigers Next Up Date
  - platform: template
    sensors:
      tigers_date:
        entity_id: calendar.detroit_tigers
        friendly_name: Tigers next game
        value_template: >-
          {% if is_state('calendar.detroit_tigers', 'on') %}
            Playing Now
          {% else %}
            {% set st = state_attr('calendar.detroit_tigers', 'start_time') %}
            {% if st != None %}
              {{ as_timestamp(st)  | timestamp_custom("%A, %b %d at %-I:%M %p") }}
            {% else %}
              No games scheduled
            {% endif %}
          {% endif %}
          
  # Tigers Next Opponent
  - platform: template
    sensors:
      tigers_opponent:
        entity_id: calendar.detroit_tigers
        friendly_name: Tigers Next Opponent
        value_template: >-
          {{ states.calendar.detroit_tigers.attributes.message }}

Then, to add both to the same Lovelace card, click Add Card > Manual:

title: Upcoming Baseball Games
type: custom:vertical-stack-in-card
cards:
  - type: entities
    entities:
      - type: custom:template-entity-row
        entity: calendar.houston_astros
        name: Next Game
        secondary: '{{states.calendar.houston_astros.attributes.message }}'
        state: '{{states.calendar.houston_astros.attributes.start_time }}'
      - type: divider
      - type: custom:template-entity-row
        entity: calendar.detroit_tigers
        name: Next Game
        secondary: '{{states.calendar.detroit_tigers.attributes.message }}'
        state: '{{states.calendar.detroit_tigers.attributes.start_time }}'

Add Custom Logos for Entities

Now that you have everything setup, it’s time to upload your own custom logos. You can find them by googling “Round transparent PNG Astros” or something similar. If you can’t find a transparent image, you can use Photoshop or Photopea. Just click the magic wand, select the background, delete, and save or redownload.

Then go to File Editor > click the folder at the top > locate the www folder. Create a new folder called “icons” and click into it. Then upload your logos and restart Home Assistant.

Navigate back to the cards you just created and click Edit.

Under entities:, add this line to add a custom logo: image: "/local/icons/Astros.png" and image: "/local/icons/Tigers.png" under the respective calendar entity. Capitalization does matter here.

Voila! You now have your favorite sports teams logos next to your entities!

Wrapping Up

All in all, this was a pretty fun integration to set up. The thing I really like about this integration is that it works with any sport and team, both college and professional, that can be found in Google Calendar.

In my header image, you’ll see that I’ve also added Michigan State college basketball, but since there are no games to show because its springtime, the card just shows “no games scheduled”.

The only thing left I need to do is figure out a better way to display the dates in the multiple team baseball card. If anyone knows how to do that, please let me know in the comments so I can update my guide!

3 Likes

First of all, i can’t believe i’m the first to post here …

Secondly, I think I must have seen your post elsewhere (maybe reddit?) and had it implemented on my HA setup. It’s a great guide and everything works beautifully!

Just wondering if you could advise how to list maybe the next 3 games/events of a team/sport/calendar? (
How would I go about editing the code?

calendar

1 Like

Awesome, I’m glad you got it setup! Yes, I posted to Reddit a couple weeks but didn’t get much love for some reason, haha.

How did you get your time to format like that?

Also, I’m not sure how to show future events other than the next upcoming one, but if I figure it out - I’ll let you know!

Hmm … I could have sworn all I did was copy and paste what you had posted (wherever it was I saw this originally).

The time format i had in my sensors files shows it like this:

timestamp_custom("%a, %b %d at %-I:%M %p")

For the longest time, I couldn’t figure out how to show the day of the week in a shortened format, but I finally did manage to change it. the %A will do a full “day of week” and %a will do abbreviated day of week.

edit:

^^ that paired with voice/persistent/mobile notifications and I’ve never missed a match again. Thanks!

Hmm. I’ve replaced my timestamp_custom with yours and rebooted HA a few times, but it still shows the old result. I’ll keep looking into it, but I’m glad someone was able to figure it out for others!

You’re welcome! And same here, it’s been a really useful setup.

Could you post the yaml for your “Upcoming Games” card?

most certainly can! just ignore that first entity with the upcoming shifts.

btw, congrats on the community highlight here with the chore tracker!

    cards:
      - type: vertical-stack
        cards:
          - type: entities
            title: Upcoming Shifts
            entities:
              - type: custom:multiple-entity-row
                entity: sensor.other_date
                name: Next Shift
                secondary_info:
                  entity: sensor.other_shift
                  name: false
          - type: entities
            title: Upcoming Games
            entities:
              - type: custom:multiple-entity-row
                entity: sensor.bluejays_date
                name: Next Game
                secondary_info:
                  entity: sensor.bluejays_opponent
                  name: false
              - type: divider
              - type: custom:multiple-entity-row
                entity: sensor.mapleleafs_date
                name: Next Game
                secondary_info:
                  entity: sensor.mapleleafs_opponent
                  name: false

Dude, you are awesome! I think this is working perfectly for me now. I’ll have to double-check the dates once a game isn’t playing, but so far it looks like this’ll work!

And thanks for congratulating me on the community update! I was pretty shocked to see that earlier.

glad it helped!

Just wanted to give you a heads up - the template on site for the two team card within the guide needs to be adjusted

Also - I am not getting scores while a game is playing

Update: I have to restart HA to get the scores to update

Thanks for the reminder! I just updated my guide to include that.

I added the Google Calendar integration mainly to create automations on matchday, so this is the ideal post! And thanks @djbrooks022

I created the sensor as described, and it works perfectly.

So here’s my question, if you don’t mind. How can I have an automation that triggers X minutes/hours before the next game starts?

I’ve got a guide for that as well :slight_smile: https://smarthomepursuits.com/how-to-setup-google-calendar-event-notifications/

Great! Many thanks :blush: Can’t wait for the next game :grin:

I have the issue some others already had. My Date looks like this which is absoloutely crap. Can siomeone help me?

image

Can you post your code for your sensor?

Here’s what mine looks like and it formats it correctly:

image

  #MSU Basketball Next Game
  - platform: template
    sensors:
      spartans_date:
        #        entity_id: calendar.michigan_state_spartans
        friendly_name: MSU Basketball next game
        value_template: >-
          {% if is_state('calendar.michigan_state_spartans', 'on') %}
            Playing Now
          {% else %}
            {% set st = state_attr('calendar.michigan_state_spartans', 'start_time') %}
            {% if st != None %}
              {{ as_timestamp(st)  | timestamp_custom("%a, %b %d at %-I:%M %p") }}
            {% else %}
              No games scheduled
            {% endif %}
          {% endif %}

  # MSU Basketball Next Opponent
  - platform: template
    sensors:
      spartans_opponent:
        #        entity_id: calendar.michigan_state_spartans
        friendly_name: MSU Basketball Next Opponent
        value_template: >-
          {{ states.calendar.michigan_state_spartans.attributes.message }}

Thats my code

 #Eintrachts Next Up Date
  - platform: template
    sensors:
      eintracht_date:
        entity_id: calendar.eintracht_frankfurt_spielplan_profimannschaft
        friendly_name: Eintrachts next game
        value_template: >-
          {% if is_state('calendar.eintracht_frankfurt_spielplan_profimannschaft', 'on') %}
            Playing Now
          {% else %}
            {% set st = state_attr('calendar.eintracht_frankfurt_spielplan_profimannschaft', 'start_time') %}
            {% if st != None %}
              {{ as_timestamp(st)  | timestamp_custom("%A, %b %d at %-I:%M %p") }}
            {% else %}
              No games scheduled
            {% endif %}
          {% endif %}
          
  #Eintrachts Next Opponent
  - platform: template
    sensors:
      eintrachts_opponent:
        entity_id: calendar.eintracht_frankfurt_spielplan_profimannschaft
        friendly_name: Eintrachts Next Opponent
        value_template: >-
          {{ states.calendar.eintracht_frankfurt_spielplan_profimannschaft.attributes.message }}

I posted it. Can you check it?