Giter VIP home page Giter VIP logo

calendar-card's Introduction

Languages: TypeScript/JavaScript, Python, Go, SQL, HTML, CSS
Frontend: React, Redux, Angular, Tailwind, Storybook, Figma
Backend: Flask, FastAPI, PostgreSQL/MySQL, Redis, Kafka/RabbitMQ, Elasticsearch
Testing/Development: Jest, Playwright, Vite/Vitest, Pytest, Git, Webpack, Rollup
DevOps: Linux, Docker, AWS, GitHub Actions (CI/CD), Prometheus, Kubernetes, Terraform

calendar-card's People

Contributors

agesly avatar akmolina28 avatar dc-s avatar iantrich avatar ljmerza avatar noxhirsch avatar squixx avatar thelastproject avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

calendar-card's Issues

Any way to ignore selected calendar entries

I use an airbnb calendar. This calendar annoyingly includes an entry for the current snd next day saying it is blocked (ie unbookable).
To deal with this I want be able exclude showing a calendar entry if it contains a specific string.
Any chance ? Any workarounds?
ian

showColors not working?

I've tried both true and false for showColors:, but do not see any difference between the two. How should this be working? Could you post a screenshot to show the expected result?

Card showing yesterday's events

The image below was taken today on 4/15, and as you can see it's showing the events from Sunday 4/14 which shouldn't be there. could this be an issue with my system time perhaps [even though lovelace is showing the right datetime in the top right corner]?

- entities:
    - calendar.bills
    - calendar.events
    - calendar.gwu
    - calendar.gym_time
    - calendar.http_followshows_com_ical_9oejn9ol
    - calendar.killshot_burgundy
    - calendar.michaeldvinci_gmail_com
    - calendar.miro
    - calendar.people
    - calendar.potential_trips
    - calendar.pre_order
    - calendar.things_to_remember
    - calendar.work_solers
  numberOfDays: 2
  progressBar: true
  showMultiDay: true
  timeFormat: 'hh:mm a'
  title: false
  type: 'custom:calendar-card'

image

Expand ignoreEvents to also include location

I have a case where I need to filter on location. I see the ignoreEvents checks on newEvent.title, if the check could be expanded to also include the location field, or just all fields, that would be very nice. Or perhaps specify in the filter query what fields you want to run the regex ignore on?

Broken in 0.86

The card breaks, seemingly because it's trying to use moment before it's loaded.

Uncommenting Commenting out line 23 (moment.locale(hass.language);) mostly fixes it, but breaks locale support.

Feature Request: Limit number of events

In addition to the "Number Of Days" limit, it would be nice to have a "Number Of Events" limit. In some weeks, I have only five events - then the card is very short - in other weeks, I have 30 events, so the card gets very very long. I can only limit the number of events in the google calendar settings per calendar, but that doesn't help if I have e.g. five calendars. If I have lots of events in one calendar, this one hits the limit very early, so I maybe can only see one day in this calendar, but five days in another.

With a events limit in the calendar card, I always get an even cut on all calendars.

A bonus would be an "intelligent" limit: If my limit is 10 events and I have event number 10 & 11 on one day, the limit could either cut of that day completely (and only show until event 9 on the day before) or limit after that day (so show event 11 additionally). I think I'd go for the latter and I think that this one might be easier to accomplish if you go through the events in a loop. Then you can check if you hit the limit and compare the date with the date before - if that's the same, keep on looping until you reach the next day and then break the loop. (just my non-programmer-thoughts)

Thank you in advance!

Old appointment still visible

Hello,

GREAT Add-on. I have many appointments that repeat every 2 weeks. Sometimes on a certain day the appointment is different. So I delete the original one (only for that day) leave the other ones (in future) and add a single one on the day.

When refresh in the calendar list the new created one but also the old original one is showing in the list... How can I solve this?

Screen Shot 2019-10-26 at 16 40 49

See 1/11 Friday - 4288 - Zuid is original one repeats every 2 weeks
4301 - Sloterdijk is a manual one add only for that day

I deleted the 4288 - Zuid from Calendar on my iPhone just for that day:

Screen Shot 2019-10-26 at 16 42 34

Fully Kiosk Browser - Custom element doesn't exist

Using the Android App "Fully Kiosk Browser" to display HA UI on a Amazon Fire Tablet 10.
It will throw a red box with "Custom element doesn't exist: calendar-card."
HA logfile will show:
<my.ip>:8123/customcards/calendar-card.js:74:1541 Uncaught SyntaxError: Unexpected token ...
This error msg will only appear in the Fully Kiosk Browser app. Everything works fine on other browsers on other devices. This also does not seem to be specific to this card - almost no custom card renders successfully on this device.
I am wondering if anyone here might have any clues as to whats causing this, how to solve this or even just a hint about a different way/app to display HA on the tablet.

Feature Request: Elegant reload

I have a feature request (because I don't really know how to implement this one):
It would be great if the reload of the calendar doesn't remove all content and loads it back again. The better solution in my opinion is to load in background (maybe show the loading circle in a corner - but I think that no loading circle is needed) and then refresh the content in one go.
If you have the calendar on a dashboard like me, all the content below jumps up and down again with every refresh.

24h and "All day" settings

First of all - really great job, its a very nice Calendar card ...
All i wonder if there is a ability to set time to 24h instead of AM/PM,
and, where to do the translation of "All day" ... Calendar card is showing the right language (de) in
months and day - names - exept of the above mentioned ...

Maybe i have a problem in reading , but i cant find any suggest in this issue ???

Thanks a lot for time

Combination between Google calendar & Caldav not working

Both work fine independently, the card shows the Google calendar events and when I disable the Google calendar and enable the Caldav Calendar it shows the events of my iCloud calendar.

But when both are enabled in the configuration.yaml, only the Google events are shown.
Disabling/Enabling entities in the card does not make a difference.

Missing Google Reminders

Google Calendar automatically creates a system calendar for Google Reminders. The Reminders calendar is not exposed to this card.

image

Reoccurring events missing

I’m currently pulling my iCloud calendar via caldav and showing it via the custom calendar card. I noticed that non all day reoccurring events do not show up. So if I have a weekly event at 6pm the first one shows up but next week’s 6pm event does not.

When used in conjunction with layout-card custom card, UI doesn't render & exception is thrown in the console

I'm using this (wonderful) card in conjunction with the custom lovelace layout-card written by @thomasloven

My HA version is 0.88.1, using Chrome as the browser; this issue happens in the iOS mobile app as well

More often than not, I get an error while tryiing to load a view containing the calendar card:

calendar-card.js?v=1.0.2:10 Uncaught ReferenceError: moment is not defined
    at HTMLElement.set hass [as hass] (calendar-card.js?v=1.0.2:10)
    at _cards.config.cards.map (layout-card.js?v=0.2:85)
    at Array.map (<anonymous>)
    at HTMLElement._build (layout-card.js?v=0.2:82)
    at HTMLElement._updateColumns (layout-card.js?v=0.2:73)
    at HTMLElement.connectedCallback (layout-card.js?v=0.2:49)
    at HTMLElement._rebuildCard (c44e5d59e2d7eb01278d.chunk.js:3606)
    at HTMLElement.element.addEventListener.ev (c44e5d59e2d7eb01278d.chunk.js:3606)
    at fireEvent (app-2a009154.js:1305)
    at customElements.whenDefined.then (c44e5d59e2d7eb01278d.chunk.js:4807)

Is it something that should be handled by you or should this issue be opened for the layout card developer ?

Plans To Add Progress Bar/Color

I like that the new version actually works. :) However is there any plan to put the colors and progress bar back in?

The progress bar was a nice touch to quickly see where I'm at in my schedule.

Hide past days in multiple days events

When I have the "Show MultDay" option on, also the past days are shown.
It would be better to hide the past day - at least when the option "Hide past events" is on. Then it could show:

Date of Today:
My amazing event (4/5)
Date of Tomorrow:
My amazing event (5/5)

Enhancement using color

Thanks for a nice card, I have an enhancement suggestion for you, mark the date in yellow, when it is today, mark the event title yellow during when the event is active and grey when it has passed. I would suggest using the same yellow as the lit light bulbs (paper-item-icon-active-color).
CalendarEvents_yellow
CalendarEvents_grey
Thanks!
/Tomas

Location text

Hello,

Is it possible to have the location in text also ?
Now I have only a "marker", when I click on it it opens google maps with the location.
It would be nice to have this location in text next to the "marker".
Thanks !
Kind regards,
Bart Engelen

Custom element doesn't exist: weather-card.

Hello All,

The add-on was working for weeks. After a reboot of the HA system the add-on is not working anymore. The whole config / system is the same before and after the reboot.

I found this in the LOG file:
https://<MY OWN URL/community_plugin/weather-card/weather-card.js:90:16 SyntaxError: expected dot, got '(

Can someone help me with this?

Missing last entry for the day (TZ related)

So I came across an issue and I really can't limit it down more than the title states.

Here is my card config that fails:

type: custom:calendar-card
title: Today
numberOfDays: 1
timeFormat: hh:mm A
showEventOrigin: true
showLocationIcon: false
showMultiDay: true
startFromToday: true
entities:
  - calendar.boys
  - calendar.wiesalani

Here Is what I see:
image

Change the numberOfDays to 2:

type: custom:calendar-card
title: Today
numberOfDays: 2
timeFormat: hh:mm A
showEventOrigin: true
showLocationIcon: false
showMultiDay: true
startFromToday: true
entities:
  - calendar.boys
  - calendar.wiesalani

And now what I see:
image

The "G3 Conditioning activities" is missing... Here is what the event looks like:
image

iCloud 'All Day' events not showing

Hi

I have both Google calendars and iCloud CALDAV calendars setup.

All Day events from the Caldav calendars are not showing.

Is this expected behaviour?

Thank you.

Only one event for caldav calendars

When my calendars are caldav, only one event is ever shown, and it seems to be random as to which event is shown (they're not all from the same calendar, either).

Using the home assistant API directly to get calendar events, I see the expected number of events from multiple calendars.

I originally thought this was because my caldav calendars contain a uid member, not an id member (and the fix for #32 explicitly references the id member). However, modifying the caldav component to use id instead of uid didn't make a difference.

Unnecessary reload

I noticed that the calendar disappears sometimes and reappear like it would on a card reload, but there are no changed events.
It would be better if the card checks if anything has changed before triggering a reload.

Thank you in advance!

Problems with option "Show MultDay"

If I have an date in my calendar from time e.g. 18:00 until 00:00 and the option Show MultDay is on, the entry in the calendar is not showing. When I deactivate this option, the entry is showing correctly, but then the problem ist, that dates which goes over more days are shown also not correctly. You only see the firt entry of e.g. three days.
Please help with this issue.
Thanks a lot!

vobject.base.ParseError: At line 33: DURATION must have a single duration string.

Unfortunately i cannot get your plugin to work with my calendar :/

I got this error in homeassistant:

Traceback** (most recent call last): File "/usr/local/lib/python3.7/site-packages/aiohttp/web_protocol.py", line 418, in start resp = await task File "/usr/local/lib/python3.7/site-packages/aiohttp/web_app.py", line 458, in _handle resp = await handler(request) File "/usr/local/lib/python3.7/site-packages/aiohttp/web_middlewares.py", line 119, in impl return await handler(request) File "/usr/src/homeassistant/homeassistant/components/http/real_ip.py", line 40, in real_ip_middleware return await handler(request) File "/usr/src/homeassistant/homeassistant/components/http/ban.py", line 73, in ban_middleware return await handler(request) File "/usr/src/homeassistant/homeassistant/components/http/auth.py", line 231, in auth_middleware return await handler(request) File "/usr/src/homeassistant/homeassistant/components/http/view.py", line 128, in handle result = await result File "/usr/src/homeassistant/homeassistant/components/calendar/__init__.py", line 193, in get request.app["hass"], start_date, end_date File "/usr/src/homeassistant/homeassistant/components/caldav/calendar.py", line 142, in async_get_events return await self.data.async_get_events(hass, start_date, end_date) File "/usr/src/homeassistant/homeassistant/components/caldav/calendar.py", line 174, in async_get_events vevent = event.instance.vevent File "/usr/local/lib/python3.7/site-packages/caldav/objects.py", line 995, in _get_vobject_instance self._vobject_instance = vobject.readOne(to_unicode(self._data)) File "/usr/local/lib/python3.7/site-packages/vobject/base.py", line 1156, in readOne allowQP)) File "/usr/local/lib/python3.7/site-packages/vobject/base.py", line 1128, in readComponents component.transformChildrenToNative() File "/usr/local/lib/python3.7/site-packages/vobject/base.py", line 674, in transformChildrenToNative child.transformChildrenToNative() File "/usr/local/lib/python3.7/site-packages/vobject/base.py", line 673, in transformChildrenToNative child = child.transformToNative() File "/usr/local/lib/python3.7/site-packages/vobject/base.py", line 185, in transformToNative return self.behavior.transformToNative(self) File "/usr/local/lib/python3.7/site-packages/vobject/icalendar.py", line 1454, in transformToNative raise ParseError("DURATION must have a single duration string.") vobject.base.ParseError: At line 33: DURATION must have a single duration string.

That's my configuration:

title: My Calendar
numberOfDays: '3'
timeFormat: 'HH:mm'
dateTopFormat: DD
dateBottomFormat: ddd
hideTime: false
progressBar: true
showLocation: true
showLocationIcon: true
showMultiDay: true
startFromToday: false
showEventOrigin: false
hideHeader: false
type: 'custom:calendar-card'
entities:
  - entity: calendar.abfallkalender
    name: calendar.abfallkalender

Map Icon URL not linking the full address

In the calendar-card.js file, this is line 695:
<a href="https://www.google.com/maps?daddr=${e.locationAddress}" target="_blank" rel="nofollow noreferrer noopener"

If seems to only show the City and Zip code in google maps when you click on the URL. I was able to fix it by modifying that line to be this:
<a href="https://www.google.com/maps?daddr=${e.location} ${e.locationAddress}" target="_blank" rel="nofollow noreferrer noopener"

I'm sure you have a prettier way of doing that, but I wanted to let you know. Thanks.

card-modder support

Hi, I am really like the new change, working perfectly on RTL language, (before this change I was made changes in the JS file to add Hebrew Language and some adjustment to RTL ), So it's great now.

All My HA setup use the card-modder (https://github.com/thomasloven/lovelace-card-modder)
and your new calendar implementation doesn't work with this custom-UI.

There is an option to made it work? Thank you

calendar.### Response Error 400

Hi,
I finally got everything going, but now I always have the Message calendar.### Response Error 400 with an exlamation point below the header.

Anyway I can get rid of this message?

RTL support

I tried to incorporate css code but it did not work. Can you combine rtl support?

              style:
                text-align: right
                direction: rtl

Show calendar event is from

Hey again,

I have several calendars in it, and I'd like to know what events are for work and which aren't, thus I'd like to see the event name displayed too

I'm totally willing to implement this myself, I just need a pointer: is there a way to add a field to the event from the source calendar? I think the entity friendly_name probably gets lost at https://github.com/ljmerza/calendar-card/blob/master/src/index.js#L157-L161, but I have no clue how Promises, mapping and reducing works in JavaScript, so I'm not sure how to try to make sure I can make sure I'll have the calendar name in the event. If you can tell me how to do that, I'm sure I can figure out the rest myself.

Getting a 404 in console

Apologize in advance, but I feel like this might be a support request. Not sure what I'm doing wrong here, but using the 3.10.2 in HA 0.93, I get a 404 in the console, and the view stays blank.

The console error in Firefox:

Source map error: request failed with status 404
Resource URL: https://hass.lutherlabs.com/local/calendar-card.js
Source Map URL: calendar-card.js.map[Learn More]

My ui-lovelace.yaml:

  1 title: Home                                                                                                                                                                                                                              
  2 resources:                                                                                                                                                                                                                               
  3   - url: /local/calendar-card.js                                                                                                                                                                                                         
  4     type: js                                                                                                                                                                                                                             
  5 views:                                                                                                                                                                                                                                   
  6   - type: custom:calendar-card                                                                                                                                                                                                           
  7     title: "My Calendar"                                                                                                                                                                                                                 
  8     progressBar: true                                                                                                                                                                                                                    
  9     entities:                                                                                                                                                                                                                            
 10       - calendar.shared_calendar

With the 404, I was thinking that it might not be in the correct dirctory? But I have the javascript file at /config/www/custom-card.js. Additionally, my calendars show up under entities, but they are all off, not sure if that matters.

Thanks in advance.

iCloud location not working

When using the location link from a icloud calendar its seem to remove new lines or spaces, i.e. the address can't be found on google maps.

Language support

Would it be a lot work to include some kind of way to translate the card?
For example the weekday names. Or is there already a way to do it?

Calendar crashes since last update.

Hi, since the update from yesterday whenever I open the calendar on my iphone the HA app will just hang time out and restart. This was never a problem before.

It works as expected on my desktop though. I use a pop up card to show the calendar which worked fine til yesterdays update. Not a big deal but I thought you should know.

Possibilities to filter events?

I'm connected to a calendar that I don't manage, and it contains a lot of recurring events that I don't want to see. I haven't found a way to filter this within the calendar functionality in HA; maybe this is something that could be possible within the calendar-card?

something similar to:
filter: {not ("Breakfast")}
would hide all events named "Breakfast".

SyntaxError: expected expression, got '<'

I can't load calendar card. Notice that it's my first use of this addon. Raspberry Pi, Hass.io. 0.86.2

Custom element doesn't exist: calendar-card.

{
"type": "custom:calendar-card",
"title": "My Calendar",
"numberOfDays": 14,
"progressBar": true,
"entities": [
"calendar.xxxxx
]
}

I get following error in HA logs.

/local/custom-lovelace/calendar-card/calendar-card.js?track=true:7:0 SyntaxError: expected expression, got '<'

  • url: /local/custom-lovelace/calendar-card/calendar-card.js?track=true
    type: js

Showing limited number of days + event spanning more than 1 day shows extra days

Hello hello, it's me again! lol. [work always says I'm good at finding bugs.]

So i have a limited number of days showing on my calendar card [2] and an event spanning 4 days. it'll show all 4 days of the event, regardless of the limited number i have showing. example:

As you can see 'Off work' is a 4 day event, but I have 'numberOfDays: 2' in my config -- yet it still shows 4 days worth fo events. is there any way to hide the extra events?

- cards:
          - entities:
              - calendar.bills
              - calendar.events
              - calendar.gwu
              - calendar.gym_time
              - calendar.http_followshows_com_ical_9oejn9ol
              - calendar.killshot_burgundy
              - calendar.michaeldvinci_gmail_com
              - calendar.miro
              - calendar.potential_trips
              - calendar.pre_order
              - calendar.things_to_remember
              - calendar.work_solers
            numberOfDays: 2
            progressBar: true
            showMultiDay: true
            startFromToday: true
            timeFormat: 'hh:mm a'
            title: false
            type: 'custom:calendar-card'

image

Events spanning more than 1 day

Hi

Ive noticed that all day events that span more than 1 day, only show on the day that it starts. There is no way to identify which days those events end.

Would it be possible to either have the event replicate on each day its active, or somehow in the time section, have it indicate the date it finishes if the date is not the same date the event started on.

Awesome card, loving it!

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.