added maxHeight

fullDayEventText
startText
endText

README.md

@@ -56,11 +56,14 @@ resources:
 | 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
-| startFromToday | boolean | **Optional** | `false` Skip any events before today's date
 | 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)
+| 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
 ---

src/calendar-event.js

@@ -6,23 +6,21 @@ import moment from './moment';
  * There can be Google Events and CalDav Events. This class normalizes those
  */
 export default class CalendarEvent {
-    /**
-     * @param  {Object} calendarEvent
-     */
+
     constructor(calendarEvent) {
         this._calendarEvent = calendarEvent;
     }
 
-    get id(){
-        return (this._calendarEvent.id || this._calendarEvent.uid) + this.title;
-    }
-
     get rawEvent(){
         return this._calendarEvent;
     }
 
+    get id() {
+        return (this.rawEvent.id || this.rawEvent.uid) + this.title;
+    }
+
     get originCalendar(){
-        return this._calendarEvent.originCalendar;
+        return this.rawEvent.originCalendar;
     }
 
     /**
@@ -31,7 +29,7 @@ export default class CalendarEvent {
      */
     get startDateTime() {
         if (this._startDateTime === undefined){
-            const date = this._calendarEvent.start && this._calendarEvent.start.date || this._calendarEvent.start.dateTime || this._calendarEvent.start || '';
+            const date = this.rawEvent.start && this.rawEvent.start.date || this.rawEvent.start.dateTime || this.rawEvent.start || '';
             this._startDateTime =  this._processDate(date);
         }
         return this._startDateTime;
@@ -43,26 +41,26 @@ export default class CalendarEvent {
      */
     get endDateTime() {
         if (this._endDateTime === undefined) {
-            const date = this._calendarEvent.end && this._calendarEvent.end.date || this._calendarEvent.end.dateTime || this._calendarEvent.end;
+            const date = this.rawEvent.end && this.rawEvent.end.date || this.rawEvent.end.dateTime || this.rawEvent.end;
             this._endDateTime = this._processDate(date, true);
         }
         return this._endDateTime;
     }
 
     get addDays(){
-        return this._calendarEvent.addDays !== undefined ? this._calendarEvent.addDays : false;
+        return this.rawEvent.addDays !== undefined ? this.rawEvent.addDays : false;
     }
 
     get daysLong() {
-        return this._calendarEvent.daysLong;
+        return this.rawEvent.daysLong;
     }
 
     get isFirstDay(){
-        return this._calendarEvent.addDays === 0;
+        return this.rawEvent.addDays === 0;
     }
 
     get isLastDay(){
-        return this._calendarEvent.addDays === (this._calendarEvent.daysLong - 1);
+        return this.rawEvent.addDays === (this.rawEvent.daysLong - 1);
     }
 
     /**
@@ -96,15 +94,15 @@ export default class CalendarEvent {
      * @return {boolean}
      */
     get isRecurring() {
-        return !!this._calendarEvent.recurringEventId;
+        return !!this.rawEvent.recurringEventId;
     }
 
     /**
      * get the URL for an event
      * @return {String}
      */
     get htmlLink() {
-        return this._calendarEvent.htmlLink || '';
+        return this.rawEvent.htmlLink || '';
     }
 
     /**
@@ -121,9 +119,9 @@ export default class CalendarEvent {
      * @return {String}
      */
     get title() {
-        let title = this._calendarEvent.summary || this._calendarEvent.title || '';
+        let title = this.rawEvent.summary || this.rawEvent.title || '';
 
-        if (this._calendarEvent.daysLong){
+        if (this.rawEvent.daysLong){
             title += ` (${this.addDays + 1}/${this.daysLong})`;
         }
 
@@ -135,26 +133,26 @@ export default class CalendarEvent {
      * @return {String}
      */
     get description() {
-        return this._calendarEvent.description;
+        return this.rawEvent.description;
     }
 
     /**
      * parse location for an event
      * @return {String}
      */
     get location() {
-        if (!this._calendarEvent.location) return '';
-        return this._calendarEvent.location.split(',')[0] || '';
+        if (!this.rawEvent.location) return '';
+        return this.rawEvent.location.split(',')[0] || '';
     }
 
     /**
      * get location address for an event
      * @return {String}
      */
     get locationAddress() {
-        if (!this._calendarEvent.location) return '';
+        if (!this.rawEvent.location) return '';
 
-        const address = this._calendarEvent.location.substring(this._calendarEvent.location.indexOf(',') + 1);
+        const address = this.rawEvent.location.substring(this.rawEvent.location.indexOf(',') + 1);
         return address.split(' ').join('+');
     }
 

src/defaults.js

@@ -10,7 +10,6 @@ export default {
     progressBar: false,
     showLocation: false,
     showLocationIcon: true,
-    startFromToday: false,
     hidePastEvents: false,
     showMultiDay: false,
     eventsLimit: 99,
@@ -19,4 +18,8 @@ export default {
     highlightToday: false,
     ignoreEventsExpression: '',
     ignoreEventsByLocationExpression: '',
+    maxHeight: false,
+    fullDayEventText: 'All day',
+    startText: 'Start',
+    endText: 'End',
 };

src/event.tools.js

@@ -117,29 +117,11 @@ export function processEvents(allEvents, config) {
         return index === self.findIndex(e => (e.id || e.uid) === (event.uid || event.id));
     });
 
-    const today = moment().startOf('day');
-    const now = moment();
-
     // convert each calendar object to a UI event
     let newEvents = uniqueEvents.reduce((events, caldavEvent) => {
         caldavEvent.originCalendar = config.entities.find(entity => entity.entity === caldavEvent.entity.entity);
         const newEvent = new CalendarEvent(caldavEvent);
 
-        // if config to hide passsed events then check that now
-        if (config.hidePastEvents && newEvent.endDateTime.isBefore(now)) {
-            return events;
-        }
-
-        // if startFromToday config then skip events that are before today's date
-        if (config.startFromToday && today.isAfter(newEvent.endDateTime)) {
-            return events;
-        }
-
-        // if config to hide passsed events then check that now
-        if (config.hidePastEvents && newEvent.endDateTime.isBefore(now)) {
-            return events;
-        }
-
         // if given ignoreEventsExpression value ignore events that match this title
         if (config.ignoreEventsExpression && newEvent.title) {
             const regex = new RegExp(config.ignoreEventsExpression, 'i');
@@ -191,6 +173,14 @@ export function processEvents(allEvents, config) {
         return events;
     }, []);
 
+    // now that we have all events filter any events from config settings
+
+    // if config to hide passed events then check that now
+    if (config.hidePastEvents) {
+        const now = moment();
+        newEvents = newEvents.filter(event => event.endDateTime.isAfter(now));
+    }
+
     // sort events by date starting with soonest
     newEvents.sort((a, b) => a.startDateTime.isBefore(b.startDateTime) ? -1 : 1);
     return newEvents;

src/html.tools.js

@@ -70,11 +70,13 @@ export function getEventOrigin(event, config){
 export function getTimeHtml(event, config) {
     if (config.hideTime === true) return html``;
 
-    if (event.isAllDayEvent) return html`<div class="time">All day</div>`;
+    if (event.isAllDayEvent) {
+      return html`<div class="time">${config.fullDayEventText}</div>`;
+    }
 
     const start = event.startDateTime && event.startDateTime.format(config.timeFormat);
     const end = event.endDateTime && event.endDateTime.format(config.timeFormat);
-    const date = (event.isFirstDay && `Start: ${start}`) || (event.isLastDay && `End: ${end}`) || (start && end && `${start} - ${end}`) || '';
+    const date = (event.isFirstDay && `${config.startText}: ${start}`) || (event.isLastDay && `${config.endText}: ${end}`) || (start && end && `${start} - ${end}`) || '';
     return html`<div class="time">${date}</div>`;
 }
 
@@ -83,15 +85,19 @@ export function getTimeHtml(event, config) {
   * @param {CalendarEvent} event
   */
 export function getLocationHtml(event, config) {
-    if (!event.location || !event.locationAddress || !config.showLocationIcon)
+    if (!event.location || !event.locationAddress)
         return html``;
 
     return html`
       <a href="https://www.google.com/maps?daddr=${event.location} ${event.locationAddress}" target="_blank" rel="nofollow noreferrer noopener"
         title='open location'>
-        <div>
-          <ha-icon icon="mdi:map-marker"></ha-icon>&nbsp;
-        </div>
+        ${config.showLocationIcon ? 
+          html`
+            <div>
+              <ha-icon icon="mdi:map-marker"></ha-icon>&nbsp;
+            </div>
+          ` : null
+        }
         <div>
           ${config.showLocation ? event.location : ''}
         </div>

src/index-editor.js

@@ -116,7 +116,6 @@ export default class CalendarCardEditor extends LitElement {
               .checked=${this._config.showEventOrigin}
               .configValue="${"showEventOrigin"}"
             >Show Event Origin</paper-checkbox>
-            
             <paper-checkbox
               @checked-changed="${this.checkboxChanged}" 
               .checked=${this._config.highlightToday}
@@ -127,9 +126,9 @@ export default class CalendarCardEditor extends LitElement {
           <div class='checkbox-options'>
             <paper-checkbox
               @checked-changed="${this.checkboxChanged}" 
-              .checked=${this._config.startFromToday}
-              .configValue="${"startFromToday"}"
-            >Start From Today</paper-checkbox>
+              .checked=${this._config.maxHeight}
+              .configValue="${"maxHeight"}"
+            >Max Height</paper-checkbox>
           </div>
 
           <div class='other-options'>
@@ -181,6 +180,27 @@ export default class CalendarCardEditor extends LitElement {
               .configValue="${"eventsLimit"}"
               @value-changed="${this.inputChanged}"
             ></paper-input>
+
+            <paper-input
+              label="Full Day Event Text"
+              .value="${this._config.fullDayEventText}"
+              .configValue="${"fullDayEventText"}"
+              @value-changed="${this.inputChanged}"
+            ></paper-input>
+
+            <paper-input
+              label="Start Text"
+              .value="${this._config.startText}"
+              .configValue="${"startText"}"
+              @value-changed="${this.inputChanged}"
+            ></paper-input>
+
+            <paper-input
+              label="End Text"
+              .value="${this._config.endText}"
+              .configValue="${"endText"}"
+              @value-changed="${this.inputChanged}"
+            ></paper-input>
           </div>
 
           

src/index.js

@@ -81,7 +81,7 @@ class CalendarCard extends LitElement {
     this.updateCard();
 
     return html`
-      <ha-card class='calendar-card'>
+      <ha-card class='calendar-card ${this.config.maxHeight ? 'max-height' : ''}'>
         ${createHeader(this.config)}
         ${this.events ? html`${this.events}` : 
           html`

src/style.js

@@ -1,12 +1,18 @@
 import { css } from 'lit-element';
 
 const style = css`
+
     .calendar-card {
         display: flex;
         padding: 0 16px 4px;
         flex-direction: column;
     }
 
+    .max-height {
+        max-height: 500px;
+        overflow-y: scroll;
+    }
+
     .loader {
         width: 100%;
         padding-top: 30px;
@@ -79,6 +85,16 @@ const style = css`
         color: var(--accent-color);
     }
 
+    .day-wrapper .overview {
+        max-width: 150px;
+        word-break: break-word;
+    }
+
+    .day-wrapper .location {
+        max-width: 100px;
+        word-break: break-word;
+    }
+
     .day-wrapper .location a {
         text-decoration: none;
         display: flex;