+
${this.content}
`
}
-
+
firstTimeConfig() {
-
-
+
}
-
handleToggle() {
if (this._config.enableModeChange) {
@@ -149,7 +143,6 @@ class AtomicCalendarRevive extends LitElement {
}
}
-
setStyle() {
return html `
-
`
}
-
+
getDate() {
const date=moment().format(this._config.dateFormat)
return html`${date}`
@@ -429,13 +412,14 @@ class AtomicCalendarRevive extends LitElement {
showLocation: true, // show location (right side)
showMonth: false, // show month under day (left side)
+ showWeekDay: false, // show day name under day (left side)
fullTextTime: true, // show advanced time messages, like: All day, until Friday 12
showCurrentEventLine: false, // show a line between last and next event
showDate: false,
dateFormat: 'LL',
hoursFormat: 'default', // 12h / 24h / default time format. Default is HA language setting.
startDaysAhead: 0, // shows the events starting on x days from today. Default 0.
- showLastCalendarWeek: true, // always shows last line/week in calendar mode, even if it's not the current month
+ showLastCalendarWeek: false, // always shows last line/week in calendar mode, even if it's not the current month
showCalNameInEvent: false,
sortByStartTime: false, // sort first by calendar, then by time
disableEventLink: false, // disables links to event calendar
@@ -469,7 +453,7 @@ class AtomicCalendarRevive extends LitElement {
hideFinishedEvents: false, // show finished events
dimFinishedEvents: true, // make finished events greyed out or set opacity
finishedEventOpacity: 0.6, // opacity level
- finishedEventFilter: 'grayscale(100%)', // css filter
+ finishedEventFilter: 'grayscale(100%)', // css filter
// days separating
dayWrapperLineColor: 'var(--primary-text-color)', // days separating line color
@@ -484,9 +468,15 @@ class AtomicCalendarRevive extends LitElement {
enableModeChange: false,
defaultMode: 1,
- CalEventBackgroundColor: '#ededed',
+ CalGridColor: 'rgba(86, 86, 86, .35)',
+
+ calEventBulletColor: '#cc5500',
+
+ CalEventBackgroundColor: 'rgba(86, 100, 86, .35)',
CalEventBackgroundFilter: null,
+ CalEventWeekendColor: 'rgba(86, 86, 86, .60)',
+
CalEventHolidayColor: 'red',
CalEventHolidayFilter: null,
@@ -521,7 +511,7 @@ class AtomicCalendarRevive extends LitElement {
entity: entity
};
});
-
+
}
shouldUpdate(changedProps) {
@@ -542,7 +532,7 @@ class AtomicCalendarRevive extends LitElement {
/**
* generate Event Title (summary) HTML
- *
+ *
*/
getTitleHTML(event) {
const titletext = (this._config.showCalNameInEvent) ? event.eventClass.organizer.displayName+": " + event.title : event.title
@@ -556,9 +546,9 @@ class AtomicCalendarRevive extends LitElement {
`
}
- /**
+ /**
* generate Hours HTML
- *
+ *
*/
getHoursHTML(event) {
const today = moment()
@@ -590,14 +580,14 @@ class AtomicCalendarRevive extends LitElement {
/**
* generate Event Location link HTML
- *
+ *
*/
getLocationHTML(event) {
if (!event.location || !this._config.showLocation) return html ``
else if (this._config.disableLocationLink) return html `
${event.address}
- `
+ `
else return html `
`
@@ -605,7 +595,7 @@ class AtomicCalendarRevive extends LitElement {
/**
* update Events main HTML
- *
+ *
*/
updateEventsHTML(days) {
var htmlDays = ''
@@ -613,14 +603,14 @@ class AtomicCalendarRevive extends LitElement {
if (!days) { // TODO some more tests end error message
this.content = html `${this.errorMessage}`
return
- }
-
+ }
+
// TODO write something if no events
if (days.length == 0) {
this.content = this._config.noEventsForNextDaysText
return
}
-
+
// move today's finished events up
if (moment(days[0][0]).isSame(moment(), "day") && days[0].length > 1) {
@@ -633,7 +623,7 @@ class AtomicCalendarRevive extends LitElement {
i++
}
}
-
+
// check if no events for today and push a "no events" fake event
if (this._config.showNoEventsForToday && moment(days[0][0].startTime).isAfter(moment(), "day") && days[0].length > 0) {
var emptyEv = {
@@ -647,11 +637,11 @@ class AtomicCalendarRevive extends LitElement {
};
var emptyEvent = new EventClass(emptyEv , '')
emptyEvent.isEmpty = true
- var d = []
+ var d = []
d[0]=emptyEvent
days.unshift(d)
}
-
+
//loop through days
htmlDays = days.map((day, di) => {
@@ -683,12 +673,12 @@ class AtomicCalendarRevive extends LitElement {
const lastEventStyle = i == arr.length - 1 ? 'padding-bottom: 8px;' : ''
return html `
-
+
${(i===0 && this._config.showMonth) ? event.startTimeToShow.format('MMM') : ''}
${i===0 ? event.startTimeToShow.format('DD') : ''}
- ${i===0 ? event.startTimeToShow.format('ddd') : ''}
+ ${(i===0 && this._config.showWeekDay) ? event.startTimeToShow.format('ddd') : ''}
|
${currentEventLine}
@@ -708,7 +698,7 @@ class AtomicCalendarRevive extends LitElement {
${eventCalName}
-
+
${progressBar}
|
@@ -716,7 +706,7 @@ class AtomicCalendarRevive extends LitElement {
})
return htmlEvents
- })
+ })
this.content = html ``
}
@@ -761,14 +751,14 @@ class AtomicCalendarRevive extends LitElement {
/**
* gets events from HA Calendar to Events mode
- *
+ *
*/
async getEvents() {
let timeOffset = -moment().utcOffset()
- let start = moment().add(this._config.startDaysAhead, 'days').startOf('day').add(timeOffset,'minutes').format('YYYY-MM-DDTHH:mm:ss');
+ let start = moment().add(this._config.startDaysAhead, 'days').startOf('day').add(timeOffset,'minutes').format('YYYY-MM-DDTHH:mm:ss');
let end = moment().add((this._config.maxDaysToShow + this._config.startDaysAhead), 'days').endOf('day').add(timeOffset,'minutes').format('YYYY-MM-DDTHH:mm:ss');
-
+
let calendarUrlList = []
this._config.entities.map(entity =>{
calendarUrlList.push([`calendars/${entity.entity}?start=${start}Z&end=${end}Z`])
@@ -790,7 +780,7 @@ class AtomicCalendarRevive extends LitElement {
}
})
})
-
+
if (this._config.sortByStartTime) {
singleEvents.sort(function(a,b) {
return moment(a.startTime).diff(moment(b.startTime));
@@ -820,7 +810,7 @@ class AtomicCalendarRevive extends LitElement {
/**
* gets events from HA to Calendar mode
- *
+ *
*/
getCalendarEvents(startDay, endDay, monthToGet, month) {
this.refreshCalEvents = false
@@ -835,7 +825,7 @@ class AtomicCalendarRevive extends LitElement {
typeof entity.blacklist!= 'undefined' ? entity.blacklist : '',
typeof entity.whitelist!= 'undefined' ? entity.whitelist : ''
])
- }
+ }
})
Promise.all(calendarUrlList.map(url =>
@@ -909,7 +899,7 @@ class AtomicCalendarRevive extends LitElement {
/**
* change month in calendar mode
- *
+ *
*/
handleMonthChange(i) {
this.selectedMonth = moment(this.selectedMonth).add(i, 'months');
@@ -920,27 +910,35 @@ class AtomicCalendarRevive extends LitElement {
/**
* show events summary under the calendar
- *
+ *
*/
handleEventSummary(day) {
- let events = ([','].concat.apply([], [day.holiday, day.daybackground, day.icon1, day.icon2, day.icon3])).join(', ')
- if (events == '') events = html ` `
- this.eventSummary = html `${events}`
+ let events = ([','].concat.apply([], [day.holiday, day.daybackground, day.icon1, day.icon2, day.icon3]))
+ var eventsHtm = '';
+
+ this.eventSummary = events.map((eventItem, i, arr)=> {
+ return html `
+ `
+ })
+
this.requestUpdate()
}
/**
* create html calendar header
- *
+ *
*/
getCalendarHeaderHTML() {
return html`
-
+
@@ -950,7 +948,7 @@ class AtomicCalendarRevive extends LitElement {
/**
* create html cells for all days of calendar
- *
+ *
*/
getCalendarDaysHTML(month) {
var showLastRow = true
@@ -958,36 +956,36 @@ class AtomicCalendarRevive extends LitElement {
return month.map((day, i) => {
const dayStyleOtherMonth = moment(day.date).isSame(moment(this.selectedMonth), 'month') ? '' : `opacity: .35;`
- const dayStyleToday = moment(day.date).isSame(moment(), 'day') ? `border: 1px solid grey;` : `border: 1px solid grey; border-color: transparent;`
+ const dayStyleToday = moment(day.date).isSame(moment(), 'day') ? `background-color: ${this._config.CalEventBackgroundColor};` : ``
const dayHolidayStyle = (day.holiday && day.holiday.length > 0) ? `color: ${this._config.CalEventHolidayColor}; ` : ''
const dayBackgroundStyle = (day.daybackground && day.daybackground.length > 0) ? `background-color: ${this._config.CalEventBackgroundColor}; ` : ''
- const dayIcon1 = (day.icon1 && day.icon1.length > 0) ? html `
` : ''
+ const dayStyleWeekend = (moment(day.date).isoWeekday() == 6 || moment(day.date).isoWeekday() == 7) ? `background-color: ${this._config.CalEventWeekendColor}; ` : ''
+ const dayIcon1 = (day.icon1 && day.icon1.length > 0) ? html`
` : ''
const dayIcon2 = (day.icon2 && day.icon2.length > 0) ? html `
` : ''
const dayIcon3 = (day.icon3 && day.icon3.length > 0) ? html `
` : ''
+ console.log(moment(day.date).isoWeekday())
if(i<35 || showLastRow)
- return html `
- ${i % 7 === 0 ? html`
` :''}
-
-
-
+ return html `
+ ${i % 7 === 0 ? html` ` : ''}
+
+
+
${(day.dayNumber).replace(/^0|[^/]0./, '')}
-
-
- ${dayIcon1} ${dayIcon2} ${dayIcon3}
-
+ ${dayIcon1} ${dayIcon2} ${dayIcon3}
+
|
${i && (i % 6 === 0) ? html` ` :''}
`
-
+
})
}
/**
* update Calendar mode HTML
- *
+ *
*/
updateCalendarHTML() {
if (this.month.length == 0 || this.refreshCalEvents || moment().diff(this.lastCalendarUpdateTime, 'minutes') > 120) {
@@ -999,6 +997,7 @@ class AtomicCalendarRevive extends LitElement {
}
const month = this.month
var weekDays = moment.weekdaysMin(true)
+
const htmlDayNames = weekDays.map((day) => html `
${day} | `)
@@ -1017,11 +1016,11 @@ class AtomicCalendarRevive extends LitElement {
- ${this.eventSummary}
+ ${this.eventSummary}
`
}
-
+
}
customElements.define('atomic-calendar-revive', AtomicCalendarRevive);
@@ -1029,7 +1028,7 @@ customElements.define('atomic-calendar-revive', AtomicCalendarRevive);
/**
* class for 42 calendar days
- *
+ *
*/
class CalendarDay {
constructor(calendarDay, d) {
@@ -1099,7 +1098,7 @@ class CalendarDay {
/**
* class for Events in events mode
- *
+ *
*/
class EventClass {
diff --git a/tracker.json b/tracker.json
index 1b8db5cc..0a0172ed 100755
--- a/tracker.json
+++ b/tracker.json
@@ -1,9 +1,9 @@
{
"atomic-calendar-revive": {
"updated_at": "2020-04-07",
- "version": "1.1.1",
- "remote_location": "https://github.com/marksie1988/atomic_calendar_revive/releases/latest/dist/atomic-calendar-revive.js",
- "visit_repo": "https://github.com/marksie1988/atomic_calendar_revive",
- "changelog": "https://github.com/marksie1988/atomic_calendar_revive/releases/latest"
+ "version": "1.3.0",
+ "remote_location": "https://github.com/marksie1988/atomic-calendar-revive/releases/latest/dist/atomic-calendar-revive.js",
+ "visit_repo": "https://github.com/marksie1988/atomic-calendar-revive",
+ "changelog": "https://github.com/marksie1988/atomic-calendar-revive/releases/latest"
}
}
|