Add option limiting the number of events to be displayed

README.md

@@ -52,6 +52,7 @@ title: "Today's Schedule"
 advance: 4
 show_all_day_events: true
 show_past_events: false
+event_limit: 3
 time_format: "HH:mm"
 fallback_color: teal
 entities:
@@ -76,6 +77,7 @@ tap_action:
 | `advance`             | number          | Optional     | `0`       | Allows to display the schedule of another day then today, eg. `1` for tomorrows events, `2` for the day after tomorrow, and `-1` for yesterdays events                          |
 | `show_all_day_events` | boolean         | Optional     | `true`    | Whether to show all day events in the schedule                                                                                                                                  |
 | `show_past_events`    | boolean         | Optional     | `false`   | Whether to include past events in the schedule                                                                                                                                  |
+| `event_limit`         | number          | Optional     | `0`       | Limits the number of events to display, the default `0` means no limiting                                                                                                                                  |
 | `time_format`         | string          | Optional     | `HH:mm`   | Define a custom format for displaying the events start and end times (see [time formats](#Time-Formatting))                                                                     |
 | `fallback_color`      | string          | Optional     | `primary` | Color to use as a fallback, eg. when no events are left for the day (see [colors](#Colors))                                                                                     |
 | `tap_action`          | action          | Optional     | `none`    | Home assistant [action](https://www.home-assistant.io/dashboards/actions/) to perform on card taps (supports `perform-action`, `navigate`, `url` and `fire-dom-event` actions)  |

src/const.ts

@@ -41,6 +41,7 @@ export const DEFAULT_CONFIG: CardConfig = {
     fallback_color: "primary",
     show_all_day_events: true,
     show_past_events: false,
+    event_limit: 0,
     tap_action: {
         action: "none",
     },

src/elements/editor.ts

@@ -71,14 +71,19 @@ const FORM_SCHEMA = [
                     },
                 ],
             },
+            {
+                name: "event_limit",
+                default: 0,
+                selector: {number: {mode: "box", step: 1}},
+            },
             {
                 name: "",
                 type: "grid",
                 schema: [
                     {name: "show_all_day_events", selector: {boolean: {}}},
                     {name: "show_past_events", selector: {boolean: {}}},
                 ],
-            },
+            }
         ],
     },
     {

src/functions/calendar.ts

@@ -69,7 +69,7 @@ function filterEvents(
     events: CalendarEvent[],
     config: CardConfig,
 ): CalendarEvent[] {
-    return events.filter((event: CalendarEvent): boolean => {
+    const filteredEvents = events.filter((event: CalendarEvent): boolean => {
         if (
             event.isAllDay
             && event.end.isBefore(
@@ -91,6 +91,8 @@ function filterEvents(
 
         return true;
     });
+
+    return (config.event_limit === 0) ? filteredEvents : filteredEvents.slice(0, config.event_limit);
 }
 
 function getCompareStart(event: CalendarEvent): number {

src/localization/lang/de.json

@@ -23,6 +23,7 @@
             "interactions": "Interaktionen",
             "show_all_day_events": "Zeige ganztägige Termine",
             "show_past_events": "Zeige vergangene Termine",
+            "event_limit": "Terminlimit",
             "tap_action": "Verhalten beim Antippen",
             "time_format": "Zeit-Darstellung",
             "title": "Titel"

src/localization/lang/en.json

@@ -23,6 +23,7 @@
             "interactions": "Interactions",
             "show_all_day_events": "Show all day events",
             "show_past_events": "Show past events",
+            "event_limit": "Event limit",
             "tap_action": "Tap behaviour",
             "time_format": "Time Display Format",
             "title": "Title"

src/localization/lang/es.json

@@ -23,6 +23,7 @@
             "interactions": "Interacciones",
             "show_all_day_events": "Mostrar eventos de todo el día",
             "show_past_events": "Mostrar eventos pasados",
+            "event_limit": "Límite de eventos",
             "tap_action": "Comportamiento al pulsar",
             "time_format": "Formato de hora",
             "title": "Título"

src/structs/config.ts

@@ -39,6 +39,7 @@ export const cardConfigStruct = assign(
         fallback_color: optional(string()),
         show_all_day_events: optional(boolean()),
         show_past_events: optional(boolean()),
+        event_limit: optional(number()),
         tap_action: optional(actionConfigStruct),
         entities: union([array(string()), array(entitiesRowConfigStruct)]),
     }),