3.108.0

README.md

@@ -43,33 +43,34 @@ resources:
 | Name | Type | Requirement | Description
 | ---- | ---- | ------- | -----------
 | type | string | **Required** | `custom:calendar-card`
-| title | string | **Optional** | `Calendar` Header shown at top of card
-| hideHeader | boolean | **Optional** | `false` Hide the header regardless of value
-| 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
-| ignoreEventsExpression | string | **Optional** | Simple case insensitive regex to ignore events that match title
+| disableLinks | boolean | **Optional** | `false` Disables all links (to open calendar and location)
+| endText | string | **Optional** | `End` Set custom text for event end time
+| eventsLimit | integer | **Optional** | `99` Maximum number of events to show (shows rest of day after cut off)
+| fullDayEventText | string | **Optional** | `All day` Set custom text for a full day event
+| hardLimit | boolean | **Optional** | `false` Overrides `eventsLimit` default of showing rest of day's events even after cutoff
+| hideDeclined | boolean | **Optional** | `false` Hides events that you declined
+| hideHeader | boolean | **Optional** | `false` Hide the header regardless of value
+| hidePastEvents | boolean | **Optional** | `false` Hide events that have passed
+| hideTime | boolean | **Optional** | `false` Hides event time section entirely
+| highlightToday | boolean | **Optional** | `false` Hightlight's today's events
 | ignoreEventsByLocationExpression | string | **Optional** | Simple case insensitive regex to ignore events that match location
+| ignoreEventsExpression | string | **Optional** | Simple case insensitive regex to ignore events that match title
+| maxHeight | boolean | **Optional** | `false` Sets max height for card to 500px and overflows the rest
+| notifyEntity | Entity | **Optional** | Send a notification on new events
+| notifyDateTimeFormat | string | **Optional** | `MM/DD/YYYY HH:mma` Format for event date/time in notify message (see [here](https://momentjs.com/docs/#/displaying/format/) for options)
+| numberOfDays | number | **Optional** | `7` Number of days to display from calendars
 | removeFromEventTitle | string | **Optional** | Removes substring from all event titles (case insensitive)
 | progressBar | boolean | **Optional** | `false` Adds progress bar to ongoing events
-| hideTime | boolean | **Optional** | `false` Hides event time section entirely
+| showEventOrigin | boolean | **Optional** | `false` Shows what calendar each event is from
 | 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
-| 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)
-| hardLimit | boolean | **Optional** | `false` Overrides `eventsLimit` default of showing rest of day's events even after cutoff
-| hideDeclined | boolean | **Optional** | `false` Hides events that you declined
-| 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
-| notifyEntity | Entity | **Optional** | Send a notification on new events
-| notifyDateTimeFormat | string | **Optional** | `MM/DD/YYYY HH:mma` Format for event date/time in notify message (see [here](https://momentjs.com/docs/#/displaying/format/) for options)
+| title | string | **Optional** | `Calendar` Header shown at top of card
+| timeFormat | string | **Optional** | `HH:mm` Format to show event time (see [here](https://momentjs.com/docs/#/displaying/format/) for options)
 
 ## Configurations
 ---

package.json

@@ -1,6 +1,6 @@
 {
     "name": "calendar-card",
-    "version": "3.107.0",
+    "version": "3.108.0",
     "description": "A calendar card for Home Assistant Lovelace UI",
     "keywords": [
         "home-assistant",

src/defaults.js

@@ -23,6 +23,7 @@ export default {
     hardLimit: false,
     hideDeclined: false,
     notifyEntity: null,
+    disableLinks: false,
     notifyDateTimeFormat: 'MM/DD/YYYY HH:mma',
     fullDayEventText: 'All day',
     startText: 'Start',

src/event.tools.js

@@ -52,13 +52,12 @@ export function groupEventsByDay(events, config) {
 }
 
 /**
-  * opens a calendar event in a new tab if has link
+  * opens a link in a new tab if config allows it
   * @param {CalendarEvent} event
   */
-export function getLinkHtml(event) {
-    if (event.htmlLink) {
-        window.open(event.htmlLink);
-    }
+export function openLink(e, link, config) {
+    if (!link || config.disableLinks) return;
+    window.open(link);
 }
 
 export async function sendNotificationForNewEvents(config, hass, events, oldEvents) {

src/html.tools.js

@@ -1,7 +1,7 @@
 import { html } from 'lit-element';
 import moment from './locales';
 
-import { getEventDateTime } from './event.tools';
+import { getEventDateTime, openLink } from './event.tools';
 
 /**
   * create card header
@@ -74,27 +74,37 @@ export function getTimeHtml(event, config) {
     return html`<div class="time">${date}</div>`;
 }
 
+/**
+ * generate link for an Anchor element
+ * @param {Config} config 
+ * @param String} link 
+ */
+export const getLink = (config, link) => {
+  if (config.disableLinks) return '#';
+  else link;
+}
+
 /**
   * generate the html for showing an event location
   * @param {CalendarEvent} event
   */
 export function getLocationHtml(event, config) {
-    if (!event.location || !event.locationAddress)
-        return html``;
+  if (!event.location || !event.locationAddress) return html``;
+
+  const link = `https://www.google.com/maps?daddr=${event.location} ${event.locationAddress}`;
 
-    return html`
-      <a href="https://www.google.com/maps?daddr=${event.location} ${event.locationAddress}" target="_blank" rel="nofollow noreferrer noopener"
-        title='open location'>
-        ${config.showLocationIcon ? 
-          html`
-            <div>
-              <ha-icon icon="mdi:map-marker"></ha-icon>&nbsp;
-            </div>
-          ` : null
-        }
-        <div>
-          ${config.showLocation ? event.location : ''}
-        </div>
-      </a>
-    `;
+  return html`
+    <a @click=${e => openLink(e, link, config)} title='open location' class=${config.disableLinks ? 'no-pointer' : ''}>
+      ${config.showLocationIcon ? 
+        html`
+          <div>
+            <ha-icon icon="mdi:map-marker"></ha-icon>&nbsp;
+          </div>
+        ` : null
+      }
+      <div>
+        ${config.showLocation ? event.location : ''}
+      </div>
+    </a>
+  `;
 }

src/index-editor.js

@@ -146,6 +146,11 @@ export default class CalendarCardEditor extends LitElement {
               .checked=${this._config.hideDeclined}
               .configValue="${"hideDeclined"}"
             >Hide Declined Events</paper-checkbox>
+            <paper-checkbox
+              @checked-changed="${this.checkboxChanged}" 
+              .checked=${this._config.disableLinks}
+              .configValue="${"disableLinks"}"
+            >Disable Links</paper-checkbox>
           </div>
 
           <div class='entities'>

src/index.js

@@ -4,7 +4,7 @@ import { LitElement, html } from 'lit-element';
 import { repeat } from 'lit-html/directives/repeat';
 import packageJson from '../package.json';
 
-import { groupEventsByDay, getLinkHtml, getAllEvents, sendNotificationForNewEvents } from './event.tools';
+import { groupEventsByDay, openLink, getAllEvents, sendNotificationForNewEvents } from './event.tools';
 
 import { 
   getLocationHtml, createHeader, getDateHtml, 
@@ -145,12 +145,14 @@ class CalendarCard extends LitElement {
         const eventDateTime = moment(eventDay.day);
         const todayKls = this.config.highlightToday && eventDateTime.isSame(today, "day") ? 'highlight-events' : '';
 
+        const disableLink = this.config.disableLinks || !event.htmlLink;
+
           return html`
             <tr class='day-wrapper ${lastKls} ${todayKls}'>
               <td class="${isLastEventInGroup ? '' : 'date'}">
                 ${getDateHtml(index, eventDateTime, this.config)}
               </td>
-              <td class="overview" @click=${()=> getLinkHtml(event)}>
+              <td class="overview ${disableLink ? 'no-pointer' : ''}" @click=${e => openLink(e, event.htmlLink, this.config)}>
                 <div class="title">${event.title}</div>
                 ${getEventOrigin(event, this.config)}
                 ${getTimeHtml(event, this.config)}

src/style.js

@@ -34,6 +34,10 @@ const style = css`
         padding: 24px 0px 0px;
     }
 
+    .no-pointer {
+        cursor: default !important;
+    }
+
     table {
         border-spacing: 0;
         margin-bottom: 10px;