Custom Widget: Calendar - 5 Upcoming Events

habpanel
widget
widgetgallery
Tags: #<Tag:0x00007f51f2ea3c10> #<Tag:0x00007f51f2ea39b8> #<Tag:0x00007f51f2ea35f8>

(davorf) #1

Displays up to 5 calendar events in HABPanel

CalendarFiveEventsExample

Installation

Method 1:

Method 2:

  • Download calendar-five-events.widget.json
  • Import it using the HABPanel settings

Configuration

  • Choose number of events that will be displayed in the widget (up to 5)
  • Select elements of the event (Date, Day, Summary, Time, Location)
  • Choose the highlight color (color of the date and summary elements)
  • Pick OpenHAB items for the events and elements you would like to display in the widget

The widget is located on my github page:
Calendar: 5 Upcoming Events

Since this is the first HABPanel widget I’ve made, if I’ve missed something, please, let me know.

Best regards,
Davor


Any beautiful calendar template/widget for habpanel OH2?
(Sebastian) #2

Hi Davor @davorf

I really like your widget. The design is pretty well what I was looking for.
But I have one issue. Maybe I couldn’t find the right settings.

I have limited the events to 3. But when there are only 2 events at a given time loaded into openhab via the caldav binding, I see for the 3rd event all text positions as UNDEF.

2018-09-19_Auswahl_001

Is there any way to handle this?

Thanks
Sebastian


(davorf) #3

Hello!

Since I have a lot of recurring events in my calendar, I can’t replicate this behavior. Actually, I’m not sure if I could replicate it (UNDEF item state), even if I delete all my events, because I’m not using CalDAV, but a Python script to collect Google Calendar events. What you could try, if you know how to edit a custom HABPanel widget, is adding ng-if to single event div section. Right now it looks like this:

<div class="row">
	<div class="col col-sm-2 left-column">
    <div class="row event-date">
    	<span ng-if="(config.CalendarGlobalShowDate)"> {{itemValue(config.CalendarEvent1StartDateTime) | date:'dd. MMM'}}</span>  

and it’s being repeated 5 times (for maximum of 5 events)

You can try editing first line of every event to something like this:

<div ng-if="(itemValue(config.CalendarEvent1StartDateTime) != 'UNDEF')" class="row">
	<div class="col col-sm-2 left-column">
    <div class="row event-date">
    	<span ng-if="(config.CalendarGlobalShowDate)"> {{itemValue(config.CalendarEvent1StartDateTime) | date:'dd. MMM'}}</span>  

So, the important part is:
<div ng-if="(itemValue(config.CalendarEvent1StartDateTime) != 'UNDEF')" class="row">

Of course, you should do that for all 5 sections, and change config.CalendarEvent1StartDateTime accordingly (Event1, for the first section, Event2 for the second etc.)

Hope this will help you find a way to tune widget to your liking.

Best regards,
Davor


(Daniel Walters) #4

Hi @davorf would you mind providing your python script? I would like to display entries from my Google calendar too.

Thanks


(davorf) #5

Hello!

Of course. Here’s the topic with this script.

Best regards,
Davor


(Sebastian) #6

Thanks @davorf,

works!
I now just have to tweak the layout a little bit to make the widget always look good independent of the number of shown events.

Greetings
Sebastian


(Nicolas) #7

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


(Werner) #8

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