diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts
index b3cfea6919..27709a5cf0 100644
--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -28,6 +28,9 @@ export class HaButtonToggleGroup extends LitElement {
 
   @property({ reflect: true }) size: "small" | "medium" = "medium";
 
+  @property({ type: Boolean, reflect: true, attribute: "no-wrap" })
+  public nowrap = false;
+
   @property() public variant:
     | "brand"
     | "neutral"
@@ -71,6 +74,10 @@ export class HaButtonToggleGroup extends LitElement {
     :host {
       --mdc-icon-size: var(--button-toggle-icon-size, 20px);
     }
+
+    :host([no-wrap]) wa-button-group::part(base) {
+      flex-wrap: nowrap;
+    }
   `;
 }
 
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index 12f3189097..c9a1173997 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -162,6 +162,7 @@ export class HAFullCalendar extends LitElement {
                       .buttons=${viewToggleButtons}
                       .active=${this._activeView}
                       size="small"
+                      no-wrap
                       @value-changed=${this._handleView}
                     ></ha-button-toggle-group>
                   `
@@ -197,6 +198,7 @@ export class HAFullCalendar extends LitElement {
                         .buttons=${viewToggleButtons}
                         .active=${this._activeView}
                         size="small"
+                        no-wrap
                         @value-changed=${this._handleView}
                       ></ha-button-toggle-group>
                     </div>