added date/time formatting options

added hide time and date formatting options
ljmerza · Mar 4, 2019 · 011e425 · 011e425
2 parents d85d0bd + decb99a
commit 011e425
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 <h2>Features</h2>
 
 * Show the next 5 events on your Google Calendar (default set by home assistant)
-* Set custom time format for each event
+* Set custom time and date format for each event
 * Click on event to open in your Google calendar app
 * Integrate multiple calendars
 * Update notifications via custom_updater
@@ -40,7 +40,10 @@ You should have setup Google calendar integration or Caldav integration in HomeA
 | numberOfDays | number | **Optional** | `7` Number of days to display from calendars
 | entities | object | **Required** | List of calendars to display
 | timeFormat | string | **Optional** | `HH:mm` Format to show event time (see [here](https://momentjs.com/docs/#/displaying/format/) for options)
+| dateTopFormat | string | **Optional** | `DD` Format for top line of event date
+| dateBottomFormat | string | **Optional** | `ddd` Format to bottom line of event date
 | progressBar | boolean | **Optional** | `false` Adds progress bar to ongoing events
+| hideTime | boolean | **Optional** | `false` Hides event time section entirely
 | showLocation | boolean | **Optional** | `false` Shows location address
 
 <h2>Configuration</h2>

diff --git a/main.js b/main.js
@@ -131,6 +131,9 @@ class CalendarCard extends LitElement {
       title: 'Calendar',
       numberOfDays: 7,
       timeFormat: 'HH:mm',
+      dateTopFormat: 'DD',
+      dateBottomFormat: 'ddd',
+      hideTime: false,
       progressBar: false,
       showLocation: false,
       ...config,
@@ -239,12 +242,11 @@ class CalendarCard extends LitElement {
       const eventsTemplate = eventDay.events.map((event, index) => html`
           <tr class='day-wrapper ${eventDay.events.length === index + 1 ? 'day-wrapper-last' : ''}'>
             <td class="date">
-              <div>${index === 0 ? momentDay.format('DD') : ''}</div>
-              <div>${index === 0 ? momentDay.format('ddd') : ''}</div>
+              ${this.getDateHtml(index,momentDay)}
             </td>
             <td class="overview" @click=${() => this.getLinkHtml(event)}>
               <div class="title">${event.title}</div>
-              <div class="time">${this.getTimeHtml(event)}</div>
+              ${this.getTimeHtml(event)}
               ${this.config.progressBar ? this.buildProgressBar(event) : ''}
             </td>
             <td class="location">
@@ -342,16 +344,37 @@ class CalendarCard extends LitElement {
     }
   }
 
+  /**
+   * generates HTML for showing date an event is taking place
+   * @param  {index,momentDay}
+   */
+  getDateHtml(index,momentDay) {
+
+    const top = index === 0 ? momentDay.format(this.config.dateTopFormat) : '';
+    const bottom = index === 0 ? momentDay.format(this.config.dateBottomFormat) : '';
+
+    return html`
+      <div>
+        ${top}
+      </div>
+      <div>
+        ${bottom}
+      </div>
+      `;
+  }
+
   /**
    * generates HTML for showing an event times
    * @param {CalendarEvent} event
    */
   getTimeHtml(event) {
-    if (event.isFullDayEvent) return html`All day`;
+    if(this.config.hideTime === true) return html``;
+
+    if (event.isFullDayEvent) return html`<div class="time">All day</div>`;
 
     const start = moment(event.startDateTime).format(this.config.timeFormat);
     const end = moment(event.endDateTime).format(this.config.timeFormat);
-    return html`${start} - ${end}`;
+    return html`<div class="time">${start} - ${end}</div>`;
   }
 
   /**