Custom Widget: Calendar - 5 Upcoming Events

Apps & Services HABPanel
, ,
21

That would just show the start to end time if the start time is midnight as the day and the month - day and month. Might be worth sorting through the forum to see if you can find a post on checking dates via a template widget.

If you want to check the start time you can see it in the logs. In mine it looks like:

CalendarTimeStart2 changed from 2019-11-17T10:00:00.000-0700 to 2019-11-20T18:30:00.000-0700

22

That’s what I am after.
My assumption is, that if it starts at midnight, it’s an all day event (instead of the previous comparison if the end date is bigger than the start Date).
If so, I want to display just the start and end day.

I will check the forum for your recommendation.

Thanks

23

How did you manage to show german weekdays and 24hrs format?
Any help is greatly appreciated

24

Another question I have is: How to adjust the left panel’s color (if the week day is Saturday or Sunday?

td.calcal {
    background-color: #a9a9a9;
    padding: 5px;
    vertical-align: top;
    width: 22%;
    text-align: center;
    height: 100%;
}

Something like this does not work:

       <td class="calcal">
	     <div ng-if="((itemValue('CalStart1') | date:"EEEE") = "Monday")" background-color: #8e00fa;</div>
         <div class="calday">{{itemValue('CalStart1')| date:"EEEE"}}</div>
         <div class="calmonth">{{itemValue('CalStart1')| date:"MMMM"}}</div>
         <div class="caldaynumber">{{itemValue('CalStart1')| date:"dd"}}</div>
       </td>

No one has a hint for me?
Using the code above leads to a blank area where the dates and time should be shown.

25

Sorry for late reply
 have been a little busy these days.
If I remember correct you can adjust this by modifying the date pattern:

E.g. date:"HH.mm." gives you the time as 24hrs. For the weekdays I’m not sure as this no longer part of my customized panel. But you can have a look here AngularJS

26

No worries - thanks for your help.
I will try the 24 hrs first

27

I just recognized that it looks ok on my Chrome Windows 10 German.

My tablet does show everything in the English format (weekdays, PM / AM) even tough it’s set to German.

I did not find a setting to change this yet
:-(.

And this is ignored - does not change anything

28

Hello,

im very confused. Hope somebody can help me.
The widget works fine with my google calendar.
But I have only one Problem:

The start and the end time of my events are one hour later in the widget then in my google calendar.
So I don’t know how to solve this
!? I think my caldavio/google settings are right
!?
Maybe the Calendar widget configuration? When I doesn’t select an Item the widget shows 01:00 o’clock before.

30

The issue is true for events passing the end of the month as well. :frowning:

EDIT
It seems that just the first “digit” (day) will be compared:

This case is true for a event from July 11th 2020 until August 2nd of 2020:
<div ng-if="((itemValue('CalStart11') | date:'dd.MM.yyyy') > (itemValue('CalEnd11') | date:'dd.MM.yyyy'))

and without the format it seems to be working, but of course this is always true for an event:
<div ng-if="((itemValue('CalStart11')) < (itemValue('CalEnd11')))"

31

Hi @davorf

my bad!
Is there an option to disable the hole line of “current event” if its not today?

32

Hello, thanks for the great Widget. I use it since one year. Now i have a new Tablet.

Question: How can i change the size of the Font size? Please with Manual, i am not very firm in customizing. :slight_smile:

Many Thanks
Gerhard