Implement several feature requests

README.md

@@ -1,4 +1,4 @@
-# atomic calendar card v0.8.5
+# atomic calendar card v0.9.0
 Advanced calendar card for Home Assistant with Lovelace.
 
 Work in progress. If you have any problems, please use [v0.8.5](https://github.com/atomic7777/atomic_calendar/releases/download/v0.8.5/atomic_calendar.js)
@@ -57,14 +57,16 @@ If you have any suggestions about design or functionality, please let me know, o
 | entities | list | **required** | v0.3.0 | One or more calendars, configured in HA [Google Calendar component](https://www.home-assistant.io/components/calendar.google/)
 | title | string | optional | v0.3.0 | `Calendar` Calendar title
 | showColors | string | optional | v0.3.0 | `true` Show colors in events, configured in entities list
-| maxDaysToShow | integer | optional | v0.3.0 | `7` Maximum number of days to show
+| maxDaysToShow | integer | optional | v0.3.0 | `7` Maximum number of days to show; if set to zero will only display currently running events
+| maxEventCount | integer | optional | v0.9.0 | `0` Maximum number of events to show; zero removes any limitation
 | showLocation | boolean | optional | v0.3.0 | `true` Show location link (right side)
 | showMonth | boolean | optional | v0.3.0 | `false` Show month under day (left side)
 | showLoader | boolean | optional | v0.7.0 | `true` Show animation, when events are being loaded from Google Calendar.
 | showDate | boolean | optional | v0.7.2 | `false` Show the date on the right side of the title
 | startDaysAhead | integer | optional | v0.7.3 | `0` If you set more than 0, events will be loaded starting `x` days from today. For example `1` - the component will show events starting from tomorrow.
 | showDescription | boolean | optional | v0.8.4 | `false` Shows long description of event from Google Calendar.
 | showNoEventsForToday | boolean | optional | v0.8.6 | `false` Shows `No events for today` if no events, instead of omit the entry.
+| sortByStartTime | boolean | optional | v0.9.0 | `false` Sort events by start time first instead of grouping them by calendar.
 
 ### Translations and language related settings
 Week / month names are translated automatically
@@ -93,6 +95,7 @@ If you don't set colors, default theme colors will be used. If you use automatic
 | locationLinkColor | string | v0.3.0 | `default text color` Color of location link (right side)
 | locationTextSize | integer | v0.3.0 | `90` Location text size (percent of default font)
 | locationIconColor | string | v0.3.0 | `rgb(230, 124, 115)` Color of location icon
+| hideFinishedEvents | boolean | v0.9.0 | `false` Don't display finished events
 | dimFinishedEvents | boolean | v0.3.0 | `true` Apply filters to finished events (configured below)
 | finishedEventOpacity | float | v0.3.0 | `0.6` Opacity level of finished events
 | finishedEventOpacity | string | v0.3.0 | `grayscale(100%)` additional css filter to of finished events (default - greyscale)
@@ -144,7 +147,7 @@ entities:
   entity: calendar.home_events
 - type: icon3                          # icon1 has no filters, show all events from this calendar
   entity: calendar.birthday
-```
+
 
             entities:
             - entity: calendar.calendar_holiday
@@ -156,7 +159,6 @@ entities:
 	    - entity: calendar.atomic7777       // no type, it won't be shown in calendar mode
 	    CalEventIcon1Filter: bills,waste    // only events with those words will be shown
 	    CalEventIcon2Filter: cleaning       // only events with those words will be shown		
-
 ```
 
 If you set filters (keywords) for any type, it will show an icon only when event summary contains one of keywords. If you don't set any filter, it will show icons for all days with any events.

app.js

@@ -35,7 +35,7 @@ class AtomicCalendar extends LitElement {
 
 	render() {
         if(this.firstrun){
-			console.log("atomic_calendar v0.8.9 loaded")	
+			console.log("atomic_calendar v0.9.0 loaded")	
 		}
 		this.language = this.config.language != '' ? this.config.language : this.hass.language.toLowerCase()
 		let timeFormat = moment.localeData(this.language).longDateFormat('LT')
@@ -388,7 +388,8 @@ class AtomicCalendar extends LitElement {
 
 			// main settings
 			showColors: true, // show calendar title colors, if set in config (each calendar separately)
-			maxDaysToShow: 7, // maximum days to show
+			maxDaysToShow: 7, // maximum days to show (if zero, show only currently running events)
+			maxEventCount: 0, // maximum number of events to show (if zero, unlimited)
 			showLoader: true, // show animation when loading events from Google calendar
 
 			showLocation: true, // show location link (right side)
@@ -401,6 +402,7 @@ class AtomicCalendar extends LitElement {
 			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
 			showCalNameInEvent: false,
+			sortByStartTime: false, // sort first by calendar, then by time
 			// color and font settings
 			dateColor: 'var(--primary-text-color)', // Date text color (left side)
 			dateSize: 90, //Date text size (percent of standard text)
@@ -425,6 +427,7 @@ class AtomicCalendar extends LitElement {
 			locationTextSize: 90,
 
 			// finished events settings
+			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 
@@ -706,7 +709,8 @@ class AtomicCalendar extends LitElement {
 
 		let timeOffset = -moment().utcOffset()
 		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 endOffset = Math.max(this.config.maxDaysToShow, 1) + this.config.startDaysAhead;
+		let end = moment().add(endOffset, '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`])
@@ -715,14 +719,23 @@ class AtomicCalendar extends LitElement {
 			return await (Promise.all(calendarUrlList.map(url =>
 				this.hass.callApi('get', url[0]))).then((result) => {
 					let singleEvents = []
+					let eventCount = 0
 					result.map((calendar, i) => {
 						calendar.map((singleEvent) => {
 							let blacklist = typeof this.config.entities[i]["blacklist"] != 'undefined' ? this.config.entities[i]["blacklist"] : ''
-								if(blacklist=='' || !this.checkFilter(singleEvent.summary, blacklist)){
-									singleEvents.push(new EventClass(singleEvent, this.config.entities[i] ))
+							let singleAPIEvent = new EventClass(singleEvent, this.config.entities[i])
+								if((this.config.maxEventCount === 0 || eventCount < this.config.maxEventCount) && (blacklist=='' || !this.checkFilter(singleEvent.summary, blacklist)) && ((this.config.maxDaysToShow === 0 && singleAPIEvent.isEventRunning) || !(this.config.hideFinishedEvents && singleAPIEvent.isEventFinished))){
+									singleEvents.push(singleAPIEvent);
+									eventCount++;
 								}
 						})
 					})
+
+				if (this.config.sortByStartTime) {
+					singleEvents.sort(function(a,b) {
+						return moment(a.startTime).diff(moment(b.startTime));
+					})
+				}
 				let ev = [].concat.apply([], singleEvents )
 				// grouping events by days, returns object with days and events
 				const groupsOfEvents = ev.reduce(function (r, a) {
@@ -1118,24 +1131,4 @@ class EventClass {
 	get link() {
 		return this.eventClass.htmlLink
 	}
-
-
-
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-