Skip to content

Commit 7d91202

Browse files
marksie1988marksie1988
authored
feat!: 374 disable calendar google link (#379)
This change will break the way that the current calendar links to google, you now have a new icon to open up google calendar which can be disabled, instead of using the current month to do this.
1 parent e668a82 commit 7d91202

File tree

7 files changed

+182
-65
lines changed

7 files changed

+182
-65
lines changed

‎dist/atomic-calendar-revive.js‎

Lines changed: 87 additions & 37 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/options/calendar-mode-options.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ nav_order: 4
1616
| disableCalEventLink | boolean | v1.5.0 | `false` If true the link will be disabled on the event summary for the selected day |
1717
| disableCalLocationLink | boolean | v1.5.0 | `false` If true the link will be disabled on the event location icon for the selected day |
1818
| calShowDescription | boolean | v2.5.0 | `false` If true this will display the description in calendar mode |
19+
| disableCalLink | boolean | v3.0.0 | `false` If true the link to google calendar will be removed |
1920

2021
## Color Options
2122

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "atomic-calendar-revive",
3-
"version": "2.7.1",
3+
"version": "3.0.0",
44
"editor_version": "1.3.0",
55
"description": "Calendar Card for Home Assistant",
66
"main": "atomic-calendar-revive.js",
@@ -44,14 +44,15 @@
4444
"rollup-plugin-terser": "^7.0.2"
4545
},
4646
"dependencies": {
47+
"@material/mwc-icon-button": "^0.20.0",
4748
"@material/mwc-linear-progress": "^0.20.0",
4849
"@polymer/lit-element": "^0.7.1",
4950
"@rollup/plugin-json": "^4.1.0",
5051
"@webcomponents/webcomponentsjs": "^2.5.0",
5152
"custom-card-helpers": "^1.6.6",
5253
"lit-element": "^2.4.0",
5354
"moment": "^2.29.1",
54-
"node-google-calendar": "^1.1.1",
55+
"node-google-lendar": "^1.1.1",
5556
"npm": "^6.14.9",
5657
"rollup-plugin-typescript2": "^0.29.0",
5758
"typescript": "^4.1.2"

‎src/defaults.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export default {
2525
sortByStartTime: false, // sort first by calendar, then by time
2626
disableEventLink: false, // disables links to event calendar
2727
disableLocationLink: false, // disables links to event calendar
28+
disableCalMonthLink: false, // disables the link on the month name in calendar mode
2829
linkTarget: '_blank', // Target for links, can use any HTML target type
2930
showDeclined: false, // Show declined events in the calendar
3031

‎src/index-editor.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,13 @@ export class AtomicCalendarReviveEditor extends LitElement implements LovelaceCa
274274
return true;
275275
}
276276

277+
get _disableCalLink(): boolean {
278+
if (this._config) {
279+
return this._config.disableCalLink || false;
280+
}
281+
return true;
282+
}
283+
277284
// CALENDAR SETTINGS END
278285

279286
// APPEARENCE SETTINGS
@@ -667,6 +674,13 @@ export class AtomicCalendarReviveEditor extends LitElement implements LovelaceCa
667674
<label class="mdc-label">${localize('calendar.fields.disableCalLocationLink')}</label>
668675
</div>
669676
<div>
677+
<ha-switch
678+
aria-label=${`Toggle ${this._disableCalLink ? 'off' : 'on'}`}
679+
.checked=${this._disableCalLink !== false}
680+
.configValue=${'disableCalLink'}
681+
@change=${this._valueChanged}
682+
></ha-switch>
683+
<label class="mdc-label">${localize('calendar.fields.disableCalLink')}</label>
670684
</div>
671685
</div>
672686
</div>

‎src/index.ts‎

Lines changed: 74 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,52 @@ class AtomicCalendarRevive extends LitElement {
365365
margin: auto;
366366
}
367367
368+
ha-button-toggle-group {
369+
color: var(--primary-color);
370+
}
371+
372+
.calTitleContainer {
373+
padding: 0px 8px 8px 8px;
374+
}
375+
376+
.calIconSelector {
377+
--mdc-icon-button-size: var(--button-toggle-size, 48px);
378+
--mdc-icon-size: var(--button-toggle-icon-size, 24px);
379+
border-radius: 4px 4px 4px 4px;
380+
border: 1px solid var(--primary-color);
381+
float: right;
382+
display: inline-flex;
383+
text-align: center;
384+
}
385+
.calDateSelector {
386+
--mdc-icon-button-size: var(--button-toggle-size, 48px);
387+
--mdc-icon-size: var(--button-toggle-icon-size, 24px);
388+
display: inline-flex;
389+
text-align: center;
390+
}
391+
div.calIconSelector ha-icon-button, div.calDateSelector ha-icon-button {
392+
color: var(--primary-color);
393+
}
394+
div.calDateSelector .prev {
395+
border: 1px solid var(--primary-color);
396+
border-radius: 3px 0px 0px 3px;
397+
}
398+
div.calDateSelector .date {
399+
border: 1px solid var(--primary-color);
400+
border-radius: 0px 0px 0px 0px;
401+
padding: 4px 2px 2px 4px;
402+
}
403+
div.calDateSelector .next {
404+
border: 1px solid var(--primary-color);
405+
border-radius: 0px 4px 4px 0px;
406+
}
407+
408+
ha-icon-button {
409+
--mdc-icon-size: 20px;
410+
--mdc-icon-button-size: 25px;
411+
color: ${this._config.calDateColor};
412+
}
413+
368414
table.cal {
369415
margin-left: 0px;
370416
margin-right: 0px;
@@ -374,6 +420,14 @@ class AtomicCalendarRevive extends LitElement {
374420
table-layout: fixed;
375421
}
376422
423+
thead th.cal {
424+
color: var(--secondary-text-color);
425+
border: 1px solid ${this._config.calGridColor};
426+
font-size: 11px;
427+
font-weight: 400;
428+
text-transform: uppercase;
429+
}
430+
377431
td.cal {
378432
padding: 5px 5px 5px 5px;
379433
border: 1px solid ${this._config.calGridColor};
@@ -399,12 +453,6 @@ class AtomicCalendarRevive extends LitElement {
399453
width: 100%;
400454
}
401455
402-
ha-icon-button {
403-
--mdc-icon-size: 20px;
404-
--mdc-icon-button-size: 25px;
405-
color: ${this._config.calDateColor};
406-
}
407-
408456
.calTableContainer {
409457
width: 100%;
410458
}
@@ -494,12 +542,6 @@ class AtomicCalendarRevive extends LitElement {
494542
margin-left: -1px;
495543
}
496544
497-
.calDateSelector {
498-
display: inline-block;
499-
min-width: 9em;
500-
text-align: center;
501-
}
502-
503545
.loader {
504546
border: 4px solid #f3f3f3;
505547
border-top: 4px solid grey;
@@ -1204,27 +1246,34 @@ class AtomicCalendarRevive extends LitElement {
12041246
getCalendarHeaderHTML() {
12051247
return html`<div class="calDateSelector">
12061248
<ha-icon-button
1207-
class="ha-icon-button"
1249+
class="prev"
12081250
icon="mdi:chevron-left"
12091251
@click="${(_e) => this.handleMonthChange(-1)}"
12101252
title=${this.hass.localize('ui.common.previous')}
12111253
></ha-icon-button>
1212-
<a
1213-
href="https://calendar.google.com/calendar/r/month/${moment(this.selectedMonth).format('YYYY')}/${moment(
1214-
this.selectedMonth,
1215-
).format('MM')}/1"
1216-
style="text-decoration: none; color: ${this._config.calDateColor}; position: relative; top: 4px;"
1217-
target="${this._config.linkTarget}"
1218-
>
1254+
<span class="date" style="text-decoration: none; color: ${this._config.calDateColor};">
12191255
${moment(this.selectedMonth).format('MMMM')} ${moment(this.selectedMonth).format('YYYY')}
1220-
</a>
1256+
</span>
12211257
<ha-icon-button
1222-
class="ha-icon-button"
1258+
class="next"
12231259
icon="mdi:chevron-right"
12241260
@click="${(_e) => this.handleMonthChange(1)}"
12251261
title=${this.hass.localize('ui.common.next')}
12261262
></ha-icon-button>
1227-
</div>`;
1263+
</div>`;
1264+
}
1265+
1266+
showCalendarLink() {
1267+
if (!this._config.disableCalLink) {
1268+
return html`<div class="calIconSelector">
1269+
<ha-icon-button
1270+
icon="mdi:calendar"
1271+
@click="https://calendar.google.com/calendar/r/month/${moment(this.selectedMonth).format('YYYY')}/${moment(
1272+
this.selectedMonth,
1273+
).format('MM')}/1">
1274+
</ha-icon-button>
1275+
</div>`
1276+
}
12281277
}
12291278

12301279
/**
@@ -1286,11 +1335,11 @@ class AtomicCalendarRevive extends LitElement {
12861335
const weekDays = moment.weekdaysMin(true);
12871336
const htmlDayNames = weekDays.map(
12881337
(day) => html`
1289-
<th class="cal" style="padding-bottom: 8px; color: ${this._config.calWeekDayColor};">${day}</th>
1338+
<th class="cal" style="color: ${this._config.calWeekDayColor};">${day}</th>
12901339
`,
12911340
);
12921341
this.content = html`
1293-
<div class="calTitleContainer">${this.getCalendarHeaderHTML()}</div>
1342+
<div class="calTitleContainer">${this.getCalendarHeaderHTML()}${this.showCalendarLink()}</div>
12941343
<div class="calTableContainer">
12951344
<table class="cal" style="color: ${this._config.eventTitleColor};">
12961345
<thead>

‎src/localize/languages/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@
7373
"showLastCalendarWeek": "Show last calendar week",
7474
"disableCalEventLink": "Disable calendar event link",
7575
"disableCalLocationLink": "Disable calendar location link",
76-
"calShowDescription": "Show Description"
76+
"calShowDescription": "Show Description",
77+
"disableCalLink": "Disable calendar link"
7778
}
7879
},
7980
"appearance": {

0 commit comments

Comments
 (0)