Custom Widget: Calendar - 5 Upcoming Events

I think your widget is great and would like to use it as well. How do I define the items to show the next 5 calendar entries, even if the next 5 are all on the same day.

Many greetings

Davor and Community,
I have prepared a version that looks simpler in number of changes that suppresses the UNDEF and NULL lines. Use it for your convinience:

<div class="calendar">
  <div ng-repeat-start="n in [].constructor(5) track by $index">
    <div ng-if="config.CalendarGlobalNumberOfEvents > $index" class="calendar-row" 
         ng-init="endTime =config['CalendarEvent'+ ($index+1)+'EndDateTime']; 
                  startTime=config['CalendarEvent'+ ($index+1)+'StartDateTime']; 
                  summary=config['CalendarEvent'+ ($index+1)+'Summary'];
                  location=config['CalendarEvent'+ ($index+1)+'Location'];">
      <div class="calendar-col-1" ng-if="itemValue(startTime)!='UNDEF' && itemValue(startTime)!='NULL'">
      	<div ng-if="(config.CalendarGlobalShowDate)" class="event-date"> {{itemValue(startTime) | date:'dd. MMM'}}</div>
      	<div ng-if="(config.CalendarGlobalShowDay)" class="event-day"> {{itemValue(startTime) | date:'EEE'}}</div>
      </div>
      <div class="calendar-col-1" ng-if="itemValue(startTime)=='UNDEF' || itemValue(startTime)=='NULL'" ng-style="{opacity: 0}">
        <div ng-if="(config.CalendarGlobalShowDate)" class="event-date"> {{itemValue(startTime) | date:'dd. MMM'}}</div>
      	<div ng-if="(config.CalendarGlobalShowDay)" class="event-day"> {{itemValue(startTime) | date:'EEE'}}</div>
      </div>      
     	<div class="calendar-col-2">
        <div class="event-summary" ng-if="itemValue(summary)!='UNDEF' && itemValue(summary)!='NULL'">
      		<span ng-if="(config.CalendarGlobalShowSummary)"> {{itemValue(summary)}}</span>
        </div>
        <div class="event-summary" ng-if="itemValue(summary)=='UNDEF' || itemValue(summary)=='NULL'" ng-style="{opacity: 0}">
      		<span ng-if="(config.CalendarGlobalShowSummary)"> {{itemValue(summary)}}</span>
        </div>                                                          
        <div class="event-time">
          <span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') == (itemValue(endTime) | date:'dd.MM.yyyy'))"> {{itemValue(startTime) | date:'HH:mm'}}</span>
          <span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') == (itemValue(endTime) | date:'dd.MM.yyyy'))"> - </span>
          <span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') == (itemValue(endTime) | date:'dd.MM.yyyy'))"> {{itemValue(endTime) | date:'HH:mm'}}</span>
          <span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') < (itemValue(endTime) | date:'dd.MM.yyyy'))"> All day </span>      
        </div>
        <div class="event-location" ng-if="itemValue(location)!='UNDEF' && itemValue(location)!='NULL'">
        	<span ng-if="(config.CalendarGlobalShowLocation)"> {{itemValue(location)}}</span>
        </div>
        <div class="event-location" ng-if="itemValue(location)=='UNDEF' || itemValue(location)=='NULL'" ng-style="{opacity: 0}">
          <span ng-if="(config.CalendarGlobalShowLocation)"> {{itemValue(location)}}</span>
        </div>        
      </div>
    </div>
	</div>
  <div ng-repeat-end ng-if="(config.CalendarGlobalNumberOfEvents > $index +1)">
      <hr class="event-divider"/>
  </div>
</div>

Regards Werner

1 Like

Hi guys, I have installed this widget and I am very happy with it.
Maybe someone can explain me if it´s possible to add a title to this widget. (e.g. family calendar, personal calendar etc.)
Thanks,
Tobi

Does it import from google calendar or something else?

All,

thanks for this calendar widget.
I really like it.

However, I would like to tweak it to better fit my screen, but I failed.
I tried to create a stripped down version with just one entry.
So I deleted the entries at the bottom handling the drop down menues for 2,3,4 and 5.
This does not work though (empty screen), so I assume, that I need to delete / modify something in the beginning of the json file.

If anyone prepared a single entry calendar widget, I’d greatly appreciate if you could share is here.

You could modify a template widget I made here by removing the second and third table rows…

1 Like

Thanks!
I will check it out!

Here ya go in case your not so HTML handy. You can modify the CSS to fit your spot perfectly.

<style>

    tbody.calbody {
        height: 101%;
        display: block;
        position: absolute;
        width: 100%;
    }

    table.caltable.ng-scope {
        width: 101%;
    }

    td.calcal {
        background-color: #a9a9a9;
        padding: 17px;
        vertical-align: middle;
        width: 32%;
        text-align: center;
        height: 100%;
    }

    td.calinfo {
        padding-top: 13px;
        width: 78%;
        vertical-align: top;
        padding-left: 16px;
    }

    .calday.ng-binding {
        padding-bottom: 0px !important;
        color: #4c4c4c;
    }

    .calmonth.ng-binding {
        padding-bottom: 0px;
        color: #212121;
    }

    .caldaynumber.ng-binding {
        font-size: 30px;
        line-height: 30px;
        color: #212121;
    }

    .calname.ng-binding {
        padding-bottom: 3px;
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
    }

    .calduration.ng-binding {
        padding-bottom: 0px;

    }

    .calloc.ng-binding {
        padding-bottom: 0px;

    }

    tr.calentry {
        border-bottom: 5px solid #333333;
        height: 33.333%;
        width: 100%;
        max-width: 100%;
        display: flex;
        position: relative;
    }

    </style>


   <table class="caltable">
    <tbody class="calbody">
                <tr class="calentry">
                    <td class="calcal">
                        <div class="calday">{{itemValue('CalendarTimeStart1')| date:"EEE"}}</div>
                        <div class="calmonth">{{itemValue('CalendarTimeStart1')| date:"MMM"}}</div>
                        <div class="caldaynumber">{{itemValue('CalendarTimeStart1')| date:"dd"}}</div>
                    </td>
                    <td class="calinfo"><div class="calname">{{itemValue('CalendarName1')}}</div>
                        <div ng-if="((itemValue('CalendarTimeStart1') | date:'dd.MM.yyyy') < (itemValue('CalendarTimeEnd1') | date:'dd.MM.yyyy'))" class="calduration">All Day</div>
                        <div ng-if="((itemValue('CalendarTimeStart1') | date:'dd.MM.yyyy') == (itemValue('CalendarTimeEnd1') | date:'dd.MM.yyyy'))" class="calduration">{{itemValue('CalendarTimeStart1')| date:"shortTime"}} - {{itemValue('CalendarTimeEnd1')| date:"shortTime"}}</div>
                        <div class="calloc">{{itemValue('CalendarAt1')}}</div>
                    </td>
                </tr>
    </tbody>
</table>
1 Like

Thanks a lot for your help!
I got it!
Only one thing does not work yet:
<div ng-if="((itemValue('CalStart9') | date:'dd.MM.yyyy') < (itemValue('CalEnd9') | date:'dd.MM.yyyy'))" class="calduration">All day</div>

Does this work in your setup?

I think I found the root cause.
It seems to be because the entry (vacation) exceeds the end of the year!?

BUT: Shouldn’t this still be working?

Hmm, yeah I mean it should work but to be honest I haven’t spent a lot of time trying all the variations of multiple day events, or events that cross into the next year.

Is it just the start and end times that are not showing?

Actually it should show “All day” if the entry is set to a full day.
My appointments are actually set to midnight as the “all day” meetings in outlook are created (move them over to icloud afterwards).

So this is the result for “all day” entries:
Dec 25th to Dec 28th -> All Day (works as expected)
Dec 25th to Jan 2nd -> no entry (not NULL / UNDEF - just nothing)
Dec 25th to Dec 31st -> no entry like case 2

Because the 3rd case ends on 31st at midnight, I assume that that’s the magic point.

However, I don’t get it, when the following is not true:
ng-if="((itemValue('CalStart9') | date:'dd.MM.yyyy') < (itemValue('CalEnd9') | date:'dd.MM.yyyy'))

e.g. in the 2nd case 25.12.2019 shold be smaller than 02.01.2020, because the year is taken into account.

shouldn’t it?

Yeah it should be working, I noticed a 3 day event I have is also not showing anything. It won’t show undef of Null as the ng-if will only show something if it is a true statement. If it doesn’t match the if statement it will just not show anything. That tells me that somehow the logic is not actually registering the earlier date as an earlier date or less than the former. Need someone more knowledgeable than me to work this one out…

I tried to check if the start time is 00:00, but wasn’t successful checking a few syntax’

Any suggestion how this should look like?
<div ng-if="((itemValue('CalStart14') | date:'HH:MM') == '00:00')" class="calduration">{{itemValue('CalStart14')| date:"dd.MM."}} - {{itemValue('CalEnd14')| date:"dd.MM."}}</div>

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

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

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

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.

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 https://docs.angularjs.org/api/ng/filter/date

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