From 5c930462030e2ed31a630df2565182bc061dec53 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Thu, 29 Oct 2020 19:18:34 -0500
Subject: [PATCH 1/2] fix ha background to match card

---
 src/panels/calendar/ha-full-calendar.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index f568d14e468e..0a4a1039cd8f 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -324,10 +324,19 @@ class HAFullCalendar extends LitElement {
 
         #calendar {
           flex-grow: 1;
-          background-color: var(--card-background-color);
+          background-color: var(
+            --ha-card-background,
+            var(--card-background-color, white)
+          );
           min-height: 400px;
-          --fc-neutral-bg-color: var(--card-background-color);
-          --fc-list-event-hover-bg-color: var(--card-background-color);
+          --fc-neutral-bg-color: var(
+            --ha-card-background,
+            var(--card-background-color, white)
+          );
+          --fc-list-event-hover-bg-color: var(
+            --ha-card-background,
+            var(--card-background-color, white)
+          );
           --fc-theme-standard-border-color: var(--divider-color);
           --fc-border-color: var(--divider-color);
         }

From d34c43f2692deceeeb768f96cf0b4489cdaefb8e Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Thu, 29 Oct 2020 19:34:34 -0500
Subject: [PATCH 2/2] Fix css in panel

---
 src/panels/calendar/ha-panel-calendar.ts | 41 +++++++++++-------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts
index 692194b06f3e..a81f8622fb18 100644
--- a/src/panels/calendar/ha-panel-calendar.ts
+++ b/src/panels/calendar/ha-panel-calendar.ts
@@ -1,36 +1,33 @@
+import "@material/mwc-checkbox";
+import "@material/mwc-formfield";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
+  css,
+  CSSResultArray,
   customElement,
+  html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
-  CSSResultArray,
-  css,
-  TemplateResult,
-  html,
   PropertyValues,
+  TemplateResult,
 } from "lit-element";
 import { styleMap } from "lit-html/directives/style-map";
-
-import "../../layouts/ha-app-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@material/mwc-checkbox";
-import "@material/mwc-formfield";
-
-import "../../components/ha-menu-button";
+import { HASSDomEvent } from "../../common/dom/fire_event";
 import "../../components/ha-card";
-import "./ha-full-calendar";
-
+import "../../components/ha-menu-button";
+import { fetchCalendarEvents, getCalendars } from "../../data/calendar";
+import "../../layouts/ha-app-layout";
+import { haStyle } from "../../resources/styles";
 import type {
-  HomeAssistant,
-  SelectedCalendar,
+  Calendar,
   CalendarEvent,
   CalendarViewChanged,
-  Calendar,
+  HomeAssistant,
+  SelectedCalendar,
 } from "../../types";
-import { haStyle } from "../../resources/styles";
-import { HASSDomEvent } from "../../common/dom/fire_event";
-import { getCalendars, fetchCalendarEvents } from "../../data/calendar";
+import "./ha-full-calendar";
 
 @customElement("ha-panel-calendar")
 class PanelCalendar extends LitElement {
@@ -179,7 +176,7 @@ class PanelCalendar extends LitElement {
         }
 
         :host(:not([narrow])) .content {
-          height: calc(100vh - var(--header-height);
+          height: calc(100vh - var(--header-height));
         }
 
         .calendar-list {