totaldebug / atomic-calendar-revive Goto Github PK
View Code? Open in Web Editor NEWAn advanced calendar card for Home Assistant Lovelace.
Home Page: https://docs.totaldebug.uk/atomic-calendar-revive
License: MIT License
An advanced calendar card for Home Assistant Lovelace.
Home Page: https://docs.totaldebug.uk/atomic-calendar-revive
License: MIT License
The progress bar doesnt show correctly, the icon is the incorrect size and the color doesnt set correctly
Expected behavior
color should change and progress icon should be shorter
Actual behavior:
color doesnt change and icon is huge
Screenshots
Card Configuration
Is your feature request related to a problem? Please describe.
Most of the calendars have special colors for Sat and Sun which helps to parse the grid more easily.
Describe the solution you'd like
Provide configuration for adjusting color of these days
Describe the bug
I had a lot of problems with colours, and found solutions to them all. Mostly just the documentation was wrong. Here they are:
Entity field 'color' does not work. People need to use 'titleColor'. EG:
titleColor: red
In your configuration examples, you have a line:
finishedEventFilter: 'grayscale(100%)'
This does not work because the code omits ';' from after it. People have to use:
finishedEventFilter: 'grayscale(100%);'
Same config example shows:
locationIconColor: 'rgb(230, 124, 115)'
This does not work because your code is inserting this directly into inline css. People should use:
locationIconColor: 'color:rgb(230, 124, 115)'
To Reproduce
N/A
Expected behavior
Should be able to use the items as described in the readme
Screenshots
N/A
Additional context
Add any other context about the problem here.
Describe the bug
A clear and concise description of what the bug is.
When setting dateColor outside of entities: it works fine like the below
type: custom:atomic-calendar-revive
title: XXX
showProgressBar: false
timeColor: 'var(--primary-color)'
showLocation: false
dateColor: 'var(--accent-color)'
showNoEventsForToday: true
entities:
- calendar.XXX
However when using it inside entities (my aim is to have multiple calendars inside the one card, but colour separate them) the dateColor remains the same
entities:
- entity: calendar.XXX
timeColor: 'var(--primary-color)'
dateColor: 'var(--accent-color)'
To Reproduce
Steps to reproduce the behavior.
See Above
Expected behavior
A clear and concise description of what you expected to happen.
Date Colour is changed
Screenshots
If applicable, add screenshots to help explain your problem.
Setup Information (please complete the following information):
Additional context
Add any other context about the problem here.
Is your feature request related to a problem? Please describe.
It is hard to distinguish the type/source of the event
Describe the solution you'd like
Add an option to set custom calendar color (in entity object)
Describe the bug
Calendar is not showing color or icons on the monthly Calendar glance view. Does correctly show in Events view.
To Reproduce
Inside my ui-lovelace.yaml file:
` resources:
title: Home
views:
Expected behavior
Expected to see color and icon updates on the Calendar view (defaultMode: 2)
Setup Information (please complete the following information):
I have tried on both Chrome and Firefox on a Mac. Cleaned out cache/cookies as well.
Newest js file as it was git cloned down this morning (4/4/20)
Additional context
Disable progress bar for all day event only
To me it doesn't make sense to show a progress bar in an all-day event. In fact the progress of the day is measured instead of the event itself
Just accept as it is...;)
For shorter meetings/appointments it makes sense to have a progress bar so I would still see the progress bar for such events.
Describe the bug
when the card name is removed the padding is incorrect
To Reproduce
remove name:
from config
Expected behavior
Padding should be equal around the card
Setup Information (please complete the following information):
Additional context
Add any other context about the problem here.
Is your feature request related to a problem? Please describe.
We show or family calendar and individual calendars on a dashboard and sometimes we have two appointments with the same name on a different time slot and this way we can see for who the appointment is ;-)
Describe the solution you'd like
Hi,
I want to show my current day as a small snippet on my homescreen, works great but what I'm missing is an indication of the appointment calendar ( the calendar entity of the appointment)
Describe alternatives you've considered
Adding the calendar after the appointment by the user, not everybody does this, or forgets ;-)
Additional context
This plugin is now added to the default plugin repo for HACS. Docs need to be updated to reflect this, also the badge needs updating.
Describe the bug
Day selector stays on the current day after clicking on the other one. The problem is that the agenda is shown correctly for the clicked day so it is confusing now. And it is regression comparing to prev version.
To Reproduce
Click on the other day in calendar view
Expected behavior
"current day" selection should switch to clicked/chosen day
Setup Information (please complete the following information):
Custom text color is making it not readable on my theme
Expected behavior
Custom colors should not be used by default. There are CSS variables which are available for all the cards:
My suggestion is to use the primary one
Actual behavior:
Screenshots
v1.6.0
Month name is misaligned with prev/next buttons. It is moved up comparing to buttons
Month name should be vertically aligned with buttons.
Screenshots
v1.6.1
Is your feature request related to a problem? Please describe.
There are a lot of colour options so maybe add themes for ease of customisation
Describe the solution you'd like
Add themes, possibly to app or maybe just documentation for people to apply to config
Scrolling in card, preferable without scroll bars visible when more entries than visible in the card
Using fixed card in my floor plan sidebar and when I have now more events then these that fit in the card then these are not visible
Dynamic card but this messed up my lay-out ;-)
Show less days but thats than not really handy to get an overview
- type: "custom:atomic-calendar-revive"
maxDaysToShow: 2
showWeekDay: true
showMonth: true
showNoEventsForToday: true
noEventsForTodayText: Joehoe geen afspraken vandaag!
noEventsForNextDays: true
noEventsForNextDaysText: Geen afspraken de volgende dagen
dateFormat: dd MMM YYYY W
style: |
:host {
left: 11.7%;
top: 43.6%;
width: 22%;
height: 48%;
}
.current {
margin-bottom: 7vw;
}
.variations {
margin-bottom: 4vw;
}
ha-card {
height: 100%;
border-radius: 1vw;
font-size: 0.9vw !important;
}
entities:
- entity: calendar.verjaardagen_jubilea
Thanks!
Is your feature request related to a problem? Please describe.
It would be great if you could have a GUI editor for the plugin
Describe the solution you'd like
When configuring the card through lovelace ui it would be great to have a UI version of the editor rather than YAML
Describe alternatives you've considered
N/A
Additional context
N/A
Describe the bug
Hi I set the option maxDaysToShow to 0 but still see more then one day (tomorrow) this was working fine with the original version but I like to use yours because of the extra options, can you check this please?
Thanks!
Expected behavior
Only show appointments of current day
Screenshots
Setup Information (please complete the following information):
Mac OS Google Chrome latest version, iOS latest version, Chromium Rpi
Additional context
dateColor: white
name: false
dateSize: 70
dayWrapperLineColor: white
descSize: 70
dimFinishedEvents: true
entities:
- entity: calendar.martine
- entity: calendar.michael
- entity: calendar.danny
- entity: calendar.mertens_geysen
eventBarColor: white
finishedEventFilter: grayscale(100%)
finishedEventOpacity: 0.6
fullDayEventText: Dag afspraak
hoursFormat: 24
language: nl
sortByStartTime: true
locationIconColor: 'rgb(230, 124, 115)'
locationLinkColor: white
locationTextSize: 80
maxDaysToShow: 0
maxEventCount: 0
noEventsForTodayText: Geen afspraken vandaag
progressBarColor: white
showColors: true
showCurrentEventLine: false
showDescription: true
showLoader: true
showLocation: true
showMonth: false
showNoEventsForToday: true
showProgressBar: true
timeColor: white
timeSize: 80
titleColor: white
titleSize: 90
type: 'custom:atomic-calendar-revive'
untilText: Tot
showDate: false
disableEventLink: true
The documentation says that the "type" is "custom: atomic-calendar", but it actually only works when I use "custom: atomic-calendar-revive".
The card state does not refresh over time. Events are not marked as completed, days do not go forward, progressbars do not progress, new events do not show up, no loading is performed etc. The only way to update is to refresh the entire page or navigate away from the dashboard.
This worked fine on the original atomic-calendar implementation so something is amiss, although I cannot tell if it is my environment that is to blame. This has been observed on Chrome browser on multiple computers, all running Windows 10.
Expected behavior
New events should be loaded promptly, events should properly be shown as completed, days should reflect actual day by itself etc.
Actual behavior:
The lovelace card is effectively frozen in the state it loaded as until a refresh is forced.
Screenshots
Card Configuration
- disableEventLink: true
disableLocationLink: true
entities:
- entity: calendar.events
- blacklist: 'Daily, Lunch, synk'
entity: calendar.work
- entity: calendar.personlig
- entity: calendar.releasecalendar
- entity: calendar.warhammer
- entity: calendar.helgdagar_i_sverige
- entity: calendar.vuxna_man_gor_saker_tillsammans
language: sv
maxDaysToShow: 1
noEventsForNextDaysText: Ingenting kommande dagar
noEventsForTodayText: Ingenting idag
showColors: true
showDate: true
showFullDayProgress: true
showLoader: true
showLocation: false
showNoEventsForToday: true
showProgressBar: true
showWeekDay: true
sortByStartTime: true
title: Kalender
type: 'custom:atomic-calendar-revive'
Describe the bug
Card in calendar view shows redundant row from the next month.
To Reproduce
April 2020
Expected behavior
If the row doesn't contain any days from the curren/selected month don't show it
Setup Information (please complete the following information):
The calendar is larger with the new release, which causes issues with the view for some people
Expected behavior
Days are much larger than they used to be when no icon was used.
Actual behavior:
Screenshots
Card Configuration
type: custom:stack-in-card
cards:
- type: markdown
style: |
ha-card { height: 40px; }
padding: '0px'
content: >
## {{ states('sensor.clocktalk_date') }}
- type: "custom:atomic-calendar-revive"
style: |
ha-card { height: 215px; }
title: ""
firstDayOfWeek: 7
defaultMode: 2
showDate: false
showLastCalendarWeek: false
entities:
- entity: calendar.holidays_in_united_states
type: holiday
blacklist: 'daylight, super, tax, black, monday'
- type: markdown
style: |
ha-card { height: 185px }
padding: '0px'
content: >
{{ states('sensor.next_payday') }}
{{ states('sensor.next_holiday') }}
{{ states('sensor.next_birthday') }}
{{ states('sensor.next_fullmoon') }}
{{ states('sensor.next_dst') }}
Is your feature request related to a problem? Please describe.
Im aware of the blacklist function, but I have quite a few calendars where I only want to show if there is a certain word in the name of the event.. so kind of the opposite.. requiring a whitelist function
Describe the solution you'd like
e.g. I have a google calendar from the school where my children go, they post all events containing the class 'name', so I'd only want to show events containing "6B" for my eldest..
Describe alternatives you've considered
N/A
Additional context
N/A
Describe the bug
A clear and concise description of what the bug is.
I am not sure it's a bug or it is actually not present, but I would like to be able to see in the calendar future events, with the ability on click on the date with an event and have information about that (maybe some bar that expand below the calendar itself?)
To Reproduce
Steps to reproduce the behavior.
Expected behavior
A clear and concise description of what you expected to happen.
I would expect to see a dot (or any graphical sign) on a day in the future where events are present (technically also in the past, but that would be a plus :D )
Screenshots
If applicable, add screenshots to help explain your problem.
Setup Information (please complete the following information):
Additional context
Add any other context about the problem here.
I am using CalDAV and ICS calendars, not Google, not sure it might be relevant!
After migrating to a new install, the error "the calendar can't be loaded from home assistant component" shows.
The configuration is the exact same as in my previous install where it is still functioning.
Installed latest version from HACS, also tried older versions without success.
Google calendar sensors are working as they should.
Tried removing the google token and re-authenticating with no improvement.
nothing in the logs.
Expected behavior
a functioning card
Actual behavior:
a non functioning card
Card Configuration
- type: 'custom:atomic-calendar-revive'
entities:
- entity: calendar.gimme_steve_jaspers
- entity: calendar.aliesbeyersgmailcom
- entity: calendar.kids_algemeen
- entity: calendar.moeke_voss
- entity: calendar.opleidingen
- entity: calendar.ruben
- entity: calendar.aaron
- entity: calendar.steve_werken
- entity: calendar.stevejaspers83gmailcom
- entity: calendar.verjaardagen
- entity: calendar.worldwide_space_launches
whitelist: 'spacex'
- entity: calendar.feestdagen_in_belgie
- entity: calendar.family
- entity: calendar.belangrijk
- entity: calendar.anderlecht
dateColor: "#f5b400"
dateSize: 110
dayWrapperLineColor: "#cfd2d9"
showWeekDay: true
dimFinishedEvents: true
finishedEventFilter: grayscale(100%)
finishedEventOpacity: 0.4
fullDayEventText: Hele dag
locationIconColor: "#f5b400"
locationLinkColor: "#f5b400"
locationTextSize: 100
maxDaysToShow: 31
progressBarColor: "#f5b400"
showColors: true
showCurrentEventLine: false
showLocation: true
showMonth: false
showNoEventsForToday: true
showProgressBar: true
disableEventLink: true
disableLocationLink: true
timeColor: "#f5b400"
timeSize: 100
name: ""
titleColor: "#cfd2d9"
titleSize: 110
untilText: Until
gridrow: 3 / 5
gridcol: 1 / 2
style: |
ha-card {
height: 100% !important;
padding: 0px 0px 0px 0px !important;
overflow: hidden !important;
border-top: 1px solid #cfd2d9;
}
hr.progress {
border-width: 2px 0 0 0 !important;
}
.cal-nameContainer {
display: none !important;
}
Is your feature request related to a problem? Please describe.
IMO the UI is not very nice (packed/crowdy) and not touch friendly (where most of us use HA on touch devices)
Describe the solution you'd like
Consider having skins/themes maybe? Like 3-4 appearances which could be chosen via config (they should be very small). This way everyone will adjust easily the card to their taste (as probably no-one likes to configure something with thousands of settings).
Additional context
Few simple fixes like grid lines, paddings done in 2 min. IMO looks nicer
comparing to this
The problem is that all these numbers and icons are very close to each other and it is hard to extract fast meaningful information from it
Users have often been confused by the progress indicator[1] — likely in part because its styling includes a control handle, which implies that it's an interactive slider[2] rather than a determinate linear progress indicator[3].
To make the interface more readily understandable, I suggest removing the circular control handle and updating the progress track to better match the visual styling of Slider Entity Row[4] by default, which many people also use.
Atomic Calendar Revive (left), Slider Entity Row (right)
Updated:
[1] https://community.home-assistant.io/t/lovelace-google-calendar/63662/13
[2] https://material.io/components/sliders
[3] https://material.io/components/progress-indicators#linear-progress-indicators
[4] https://github.com/thomasloven/lovelace-slider-entity-row
Perhaps there are alternate default theme styles that ought to be swapped in. If not, the manual changes I'd suggest are:
Thanks for working on this!
Best practices improvement for UI
Why did the current UI pattern emerge? Google uses a similar UI element to demarcate progress through a day in calendar views. But their "day progress" indicator doesn't actually include a progress indicator for the current event and this seems to have been misinterpreted during original feature implementation.
Just turn it off if you don't like it.
Events showing as past even when they havent and events that have past not showing past.
Expected behavior
dim should only happen when event has ended
Actual behavior:
dim happens all the time
Screenshots
Card Configuration
I’d like to add more icons and filters to my calendar
I have a joint calendar that puts the name of the person in and so a filter by name is great, but then other calendars are only for one person, without the name and so i cannot use the same icon
Another solution could be to add a filter yes/no option for each calendar?
I had a try at adding Icon4 and Icon5 info to the config, but I’m no coder and it didn’t work!
titleSize not working
Expected behavior
titleSize changes to 130
Actual behavior:
titleSize remains 100
Screenshots
Card Configuration
dateSize: 130
enableModeChange: true
entities:
Is your feature request related to a problem? Please describe.
It is frustrating when in Kiosk mode someone clicks the links with no way to return.
Describe the solution you'd like
have an option in the configuration to disable URLs on events
Describe alternatives you've considered
N/A
Additional context
N/A
I'm seeing the same behaviour as this closed issue.
Describe the bug
Events that repeat daily only appear on the first day of the calendar.
To Reproduce
Add some events that repeat daily.
Expected behavior
I expect to see the events listed on every day of the month.
In the screenshot below are both calendars are showing the same google calendar. The calendar only contains 5 events which repeat every day. However there is only an icon on the first day of the month. Clicking the first day (27 April) shows the day's events. Clicking any of the other days does nothing.
Setup Information (please complete the following information):
Plugin Version
1.4.2
Browser & Version
Chrome 81.0.4044.138
Opera 68.0.3618.104
Additional context
This also affects the List view, where you only see the repeating events for 1 day, no matter what maxDaysToShow or maxEventCount are set to.
Describe the bug
A clear and concise description of what the bug is.
See title
To Reproduce
Steps to reproduce the behavior.
Install using HACS
Expected behavior
A clear and concise description of what you expected to happen.
Based on readme.md it should be writing /community_plugin/atomic_calendar_revive
Confused as original version implies it's not being maintained and hence this is the one to use and yet the original version was updated only a few hours ago.
Screenshots
If applicable, add screenshots to help explain your problem.
Setup Information (please complete the following information):
Additional context
Add any other context about the problem here.
I work for a Global Company and they add lots of recurring meetings outside my timezone to my calendar.
It would be good to be able to filter these out from my calendar view by setting a whitelist of start and finish times to show in the UI.
I've tried using the text whitelist for things like '1:00 AM, 12:00 AM' but that doesn't not work as I think it looks at subject and body.
Is your feature request related to a problem? Please describe.
I would like to be able to hide the title from the card. also the title should be called "Name" to match with other cards.
Describe the solution you'd like
Describe alternatives you've considered
N/A
Additional context
N/A
Is your feature request related to a problem? Please describe.
The daily agenda in the calendar view is still very packed and looks little bit like a bug
Describe the solution you'd like
margin-top: 10px
for the agenda container (blue box on screenshot)
margin-top: 5px
for event container (pink top line - applied to every event container)
margin: 0 5px
for event name (pink sides for the name)
Describe the bug
Error: Custom element not found: atomic-calendar-revive
To Reproduce
Steps to reproduce the behavior.
Expected behavior
just trying to get the card to display at this point.
Screenshots
URL was properly placed in the Lovelace Resources tab:
Files stored (by HACs) in the www/community/ directory:
Setup Information (please complete the following information):
Additional context
Sorry, may not be an actual bug - but I have checked all the things I know to check (directories for the files, resources page, etc and it all looks correct - so not sure where else to turn!
When using the new showFullDayProgress
the progress bars are not shown correctly. Both progress bars are hidden of visible if this is set.
Expected behavior
Full day progress bar should be hidden, but short events should show progress bar
Actual behavior:
both progress bars are either shown or hidden
Screenshots
Card Configuration
Describe the bug
When adding a whitelist this will not currently work on calendar view
To Reproduce
N/A Always happens
Expected behavior
Screenshots
N/A
Setup Information (please complete the following information):
Additional context
The code that controlled this was stopping the calendar icons from processing correctly, I have removed this until a solution can be added.
Is your feature request related to a problem? Please describe.
It is hard to read the todays agenda in the calendar view.
Describe the solution you'd like
Additional context
I'm proposing the UI to follow same pattern as the one from Google calendar:
Is your feature request related to a problem? Please describe.
Is there any chance you can change the default click action, basically I don’t want it to open google calendar in a new tab
Describe the solution you'd like
add new option "defaultClick" this will have number options depending on desired result e.g.
0 = _self
1 = _blank
2 = _parent
3 = _top
Describe alternatives you've considered
N/A
Additional context
N/A
CalEventIcon1Color
and CalEventIcon2Color
not working as expected after upgrading to v1.8.5
Expected behavior
CalEventIcon1Color
and CalEventIcon2Color
working as expected
Actual behavior:
Screenshots
Card Configuration
- type: "custom:atomic-calendar-revive"
name: "Home Calendar"
entities:
- entity: calendar.home_calendar
type: icon2
- entity: calendar.facebook_events
type: icon1
- entity: calendar.aus_vic_public_holidays
type: holiday
CalEventIcon1: mdi:facebook
CalEventIcon1Color: LIGHTSKYBLUE
CalEventIcon2Color: GOLDENROD
CalEventHolidayColor: DEEPPINK
enableModeChange: true
defaultMode: 2
fullDayEventText: 'All day'
untilText: 'Until'
showColors: true
maxDaysToShow: 7
showLocation: true
showMonth: false
showCurrentEventLine: false
dateColor: PERU
dateSize: 110
timeColor: ANTIQUEWHITE
# timeSize: 90
titleColor: gold
# titleSize: 100
locationIconColor: AZURE
locationLinkColor: GAINSBORO
# locationTextSize: 90
dimFinishedEvents: true
finishedEventOpacity: 0.6
# finishedEventFilter: 'grayscale(100%)'
# dayWrapperLineColor: black
# eventBarColor: blue
showProgressBar: true
# progressBarColor: blue
nameColor: DARKKHAKI
calWeekDayColor: "#b8490d"
calDayColor: "rgb(179,222,120)"
defaultCalColor: "rgb(255,0,0)"
eventTitleColor: BURLYWOOD
eventTitleSize: 115
For an event which repeats, it only appears on the monthly view on the first day.
Discovered this when trying to turn off the loader for a calendar card I have. Looking at the code editor, I see showLoader: false
, but after saving the loader still shows. When I open the visual editor again the Show Loader
setting is set to true again - despite still showing as false in the code editor.
I'm using v1.3.0 and running Chrome 81.0.4044.129 on Windows 10.
When setting the calGridColor option, the color doesnt change
calGridColor
Expected behavior
Calendar view grid color should change to provided color
Actual behavior:
nothing happens
Screenshots
the border should be a pastel yellow but stays grey.
Card Configuration
calGridColor: 'rgba(253, 253, 150, .35)'
All icons are now displayed at thee incorrect size since the upgrade to v0.110
Expected behavior
Icons should be correct size
Actual behavior:
Icons are too large
Screenshots
Card Configuration
N/A
This can be fixed by adding --mdc-icon-size: <px>
to each of the styles
The locationIconColor
and eventTitleSize
parameters are not working as it should.
Expected behavior
The locationIconColor
and eventTitleSize
parameters working as it should.
Actual behavior:
Screenshots
Card Configuration
```
- type: "custom:atomic-calendar-revive"
name: "Home Calendar"
entities:
- entity: calendar.home_calendar
type: icon2
- entity: calendar.facebook_events
type: icon1
- entity: calendar.aus_vic_public_holidays
type: holiday
CalEventIcon1: mdi:facebook
CalEventIcon1Color: LIGHTSKYBLUE
CalEventIcon2Color: GOLDENROD
CalEventHolidayColor: DEEPPINK
enableModeChange: true
defaultMode: 2
fullDayEventText: 'All day'
untilText: 'Until'
showColors: true
maxDaysToShow: 7
showLocation: true
showMonth: false
showCurrentEventLine: false
dateColor: PERU
dateSize: 110
timeColor: ANTIQUEWHITE
# timeSize: 90
titleColor: gold
# titleSize: 100
locationIconColor: AZURE
locationLinkColor: GAINSBORO
# locationTextSize: 90
dimFinishedEvents: true
finishedEventOpacity: 0.6
# finishedEventFilter: 'grayscale(100%)'
# dayWrapperLineColor: black
# eventBarColor: blue
showProgressBar: true
# progressBarColor: blue
nameColor: DARKKHAKI
calWeekDayColor: "#b8490d"
calDayColor: "rgb(179,222,120)"
defaultCalColor: "rgb(255,0,0)"
eventTitleColor: BURLYWOOD
eventTitleSize: 115
```yaml
Could we have a new option "showWeekDay" in the event view which lets you hide weekdays? Would be pretty useful for my contact calendar (containing birthdays only). I don't really need to know on what weekday friends and family have their birthdays, so I'd love to be able to declutter my UI by removing that information.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.