Simple Google Calendar Outlook Events Block Widget

Beschrijving

Eenvoudig widget of blok dat afspraken uit een openbare google agenda, microsoft office outlook agenda, of een ander iCal bestand in de stijl van je site toont.

Dit eenvoudige widget haalt afspraken uit een openbare google agenda (of een andere agenda in iCal formaat) en toont ze in een eenvoudige lijst waardoor je deze volledig kunt aanpassen aan je website door allerlei soorten CSS toe te passen.
Google biedt enkele HTML-fragmenten om uw openbare Google-agenda in uw website in te sluiten.
Deze zijn heel mooi, maar zodra je een paar aanpassingen aan de styling wilt maken, die verder gaan dan het veranderen van sommige kleuren, zijn ze niet genoeg.

Plugin kenmerken

  • Kalender blok of widget dat afspraken/gebeurtenissen van een openbare Google agenda of ander iCal bestand toont.
  • Blok geeft live voorbeeld in de editor en is niet beperkt tot widget gebeid. Oude widget zal worden getoond in verouderd widget blok en alleen in widget gebeid.
  • Kleine voetafdruk, gebruikt alleen Google ID van de agenda, of ICS link voor Outlook, of Url van iCal bestand om informatie over de afspraken via iCal op te halen
  • Beheer afspraken in Google Agenda, of andere iCalendar bron.
  • Volledig aanpasbaar aan je site met CSS. Uitvoer in ongeordende lijst met Bootstrap 4 listgroup klasse en toggle voor details.
  • Kies het datum/tijd format in het instellingenscherm dat het best past bij je site.
  • Toont per gebeurtenis DTSTART, DTEND, SUMMARY, LOCATION en DESCRIPTION. DTSTART is verplicht andere onderdelen zijn optioneel.
  • Toont de meest gebruikelijke herhalende gebeurtenissen. Frequentie: Jaarlijks, Maandelijks, Wekelijks, Dagelijks (maar niet Per uur, per minuut en kleinere periodes)
  • In the screenshot below: Left the block with default settings and clicked on one summary. Right with some adjusted settings.
    Adjusted settings for start with summary:
    Start with summary.: “true”
    Date format first line: “.<\b\r>l jS \o\f F”
    Enddate format first line: ” – l jS \o\f F”
    Time format time summary line: ” G:i”
    Time format end time summary line: ” – G:i”
    Time format start time: “”
    Time format end time: “”
    Tag for summary: “strong”

Documentatie

  • Haalt agenda gebeurtenissen op via iCal url of Google agenda ID
  • Toont geselecteerd aantal gebeurtenissen binnen geselecteerde periode vanaf nu als listgroup-items
  • Toont gebeurtenis begin-datum en samenvatting; toggle details, omschrijving, begin-, eind-tijd, locatie.
  • Toont de meest algemene herhalende gebeurtenissen
  • Frequentie Jaarlijks, Maandelijks, Wekelijks, Dagelijks (per Uur, per Minuut … worden niet verwerkt)
  • Einde van herhaling door COUNT of UNTIL
  • Sluit met EXDATE gebeurtenissen uit van herhaling
  • Per dag, maand of per dag van de maand (BYDAY, BYMONTH, BYMONTHDAY) geen andere herhalingen (niet verwerkt worden: BYYEARDAY, BYSETPOS, BYHOUR, BYMINUTE, WKST)
  • Houd rekening met tijdzone en zomertijd (DST). Gebouwd en getest met Iana tijdzones zoals gebruikt in php, Google en Apple. Nu ook getest met Microsoft tijdzones en onbekende tijdzones. Voor onbekende tijdzone-namen wordt de standaard WordPress tijdzone gebruikt (waarschijnlijk de lokale tijdzone).

Herhalende gebeurtenissen, Tijdzone, Daylight Saving Time (Zomertijd)

De meeste gebruikers zullen zich niet druk maken om tijdzones. De tijdzoneinstellingen van de WordPress installatie, de agenda applicatie en de gebeurtenissen zijn allemaal in dezelfde lokale tijd.
In dat geval toont dit widget al de herhalende gebeurtenissen met dezelfde lokale tijden. De widget gebruikt de waardes van de starttijd en de tijdsduur (in secondes) van de eerste gebeurtenis om de herhaalde gebeurtenissen te berekenen. Alleen als een berekend tijdstip is verwijderd tijdens de overgang van ST (standaard tijd, winter tijd) naar DST (daylight saving time, zomertijd) doordat de klok een uur vooruit gezet wordt, dan worden beide tijdstippen (als de starttijd in de overgangsperiode ligt) of alleen de einddtijd (als alleen het eindtijdstip in de overgangsperiode ligt) van de gebeurtenissen naar voren geschoven.
Maar omdat de overgangsperiode gewoonlijk erg vroeg in de ochtend is, zullen hier wienig gebeurtenissen door geraakt worden.
Als een berekende dag niet bestaat (bv. 30 februari), dan wordt de gebeurtenis niet getoond.

Voor gebruikers in landen die meer tijdzones omvatten, of gebruikers met internationale afspraken kunnen de agenda applicaties een tijdzone toevoegen aan afspraak tijdstippen. Op die manier zien gebruikers in andere tijdzones de afspraak in de lokale tijd in hun tijdzone(zoal ingesteld in de tijdzone instellingen van WordPress) die overeenkomt met de ingesteld tijd.
De widget gebruikt de starttijd, de tijdzone van de starttijd en de tijdsduur in secondes van de start gebeurtenis als start punt voor de berekening van herhaalde gebeurtenissen. Dus als de starttijd tijdzone van de gebeurtenis geen zomertijd (DST) gebruikt en de tijdzone van de widget (d.w.z. de WP tijdzone instelling) wel. Dan worden tijdens zomertijd(DST) de gebeurtenissen een uur later geplaatst dan in wintertijd (ST). Vergelijkbaar worden de gebeurtenissen vervroegd als de tijdzone van de starttijd in zomertijd is en die van de widget niet.

Natuurlijk wordt hetzelfde effect bereikt als je de gebeurtenissen plant in UTC tijd ondanks dat je DST in je standaard agenda gebruiktr.
In die gevallen kan je een speciaal effect zien van het dubbel gebruik van dezelfde tijdstippen in de overgang van DST(zomertijd) naar ST(standaardtijd). Als een gebeurtenis minder dan een uur duurt. En de gebeurtenis start in het laatste uur van DST dan eindigt hij in het eerste uur van ST intussen zijn de lokele klokken een uur terug gedraaid. Volgens de lokale klok, is de eindtijd dan voor de begintijd. Het widget laat het ook zo zien. Hetzelfde geldt voor de Google en Outlook agenda.
Theoretisch zou dit ook kunnen gebeuren met herhaalde gebeurteniissen in dezelfde tijdzone met DST. In mijn test heb ik dit ook gezien bij Google agenda, maar niet bij de widget. PHP en dus ook de widget gebruiken het tweede tijdstip als het resultaat van de berekening een tijdstip is dat twee keer voorkomt(in ieder geval in de versie van PHP die ik gebruik), maar het eerste tijdstip gebruiken zoals Google doet is even goed.

Test resultaten en vergelijking met Google en Outlook agenda zijn geupload als DayLightSavingTime test.xlsx.

Uit de ical specificaties

see http://www.ietf.org/rfc/rfc5545.txt for specification of te ical format.
(see 3.3.10. [Page 38] Recurrence Rule in specification
  .____________._________.________._________.________.
  |            |DAILY    |WEEKLY  |MONTHLY  |YEARLY  |
  |____________|_________|________|_________|________|   
  |BYMONTH     |Limit    |Limit   |Limit    |Expand  |
  |____________|_________|________|_________|________|
  |BYMONTHDAY  |Limit    |N/A     |Expand   |Expand  |
  |____________|_________|________|_________|________|
  |BYDAY       |Limit    |Expand  |Note 1   |Note 2  |
  |____________|_________|________|_________|________|

    Note 1:  Limit if BYMONTHDAY is present; 
             otherwise, special expand for MONTHLY.

    Note 2:  Limit if BYYEARDAY or BYMONTHDAY is present; otherwise,
             special expand for WEEKLY if BYWEEKNO present; otherwise,
             special expand for MONTHLY if BYMONTH present; otherwise,
             special expand for YEARLY.

Dit widget is afgeleid van versie 0.7 van het simple google calendar widget van NBoehr
(https://nl.wordpress.org/plugins/simple-google-calendar-widget/)

Copyright en Licentie

Dit project is gelicenseerd onder de GNU GPL, versie 2 of later.
2017 – 2022 © Bram Waasdorp.

Schermafdrukken

  • With theme Twenty Twenty-Two.
  • With theme WP Bootstrap Starter (with bootstrap 4 css and js).
  • Transform from Legacy widget block to Simple ical Block.

Blokken

Deze plugin heeft 1 blok.

  • Simple ical Block Block that displays events from a public calendar or iCal file.

Installatie

  • Doe de gebruikeliijke instalie procedure… je weet wel… download… uitpakken… upload… activeren.
    Of download het zip-bestand en upload het via Plugins toevoegen … installeer en activeer.
    Of installeer hem gewoon door middel van de wordpress plugin directory.
  • Voor WP 5.9 en hoger: Wanneer je de plugin geactiveerd hebt, moet je een nieuw blok ‘Simple ical Block’ in de (block) Editor in de categorie Widgets zien.
    Je kan het blok invoegen in een bericht of een pagina met de block-editor (bv. (+ teken)Toggle block inserter / WIDGETS).
    Als je thema een widget gebied heeft kan je het blok ook als een widget in een widget gebied plaatsen:
    Appearance / Widgets / (+ teken)Toggle block inserter / WIDGETS. Sleep het in je zijbalk.
  • Alternatief voor WP 5.3 en hoger: Selecteer ‘Simple Google Calendar Outlook Events Widget’ of selecteer het Verouderde widget en kies ‘Simple Google Calendar Outlook Events Widget’
    en sleep het in de zijbalk.
  • Vul de noodzakelijke configuratie velden in.
    Onder agenda ID vul de agenda ID zoals aangegeven in Google agenda in, of een complete url van een Google agenda of een ander iCal bestand.
    Je kan de Google agenda ID vinden door naar Agenda Instellingen / Agenda’s te gaan, te klikken op de juiste agenda en dan helemaal naar beneden scrollen dan staat de agenda ID onderaan onder de Integreer Agenda sectie. Dat is de agenda ID de je kan gebruiken.
  • Je bent klaar:

FAQ

Hoe kan ik Google Calendar gebruiken?

Eerst moet je je agenda delen om hem openbaar beschikbaar te maken, of je moet een nieuwe openbare agenda maken. Privé agenda’s kunnen niet gelezen worden door deze plugin. Gebruik dan het openbare iCal adres van de Google agenda ID.
Meer details bij Google support

Waar vind ik de Google Agenda ID?

Je kan de Google agenda ID vinden door naar Agenda instellingen / Agendas te gaan, te klikken op de juiste agenda, dan helemaal naar beneden scrollen om de Calendar ID onder aan de Integreer Agenda sectie te vinden. Dat is je agenda id.
Meer details bij Google support

Kan ik HTML gebruiken in de beschrijving van de afspraak?

Je kan HTML gebruiken in de meeste Agenda’s, maar het resultaat in de plugin is mogelijk niet wat je zou verwachten.
Ten eerste: De originele iCalendar standaard staat alleen platte tekst in een gebeurten beschrijving toe. Daarom zullen de meeste agenda’s waarschijnlijk alleen de platte tekst in de Description in de iCal uitvoer zetten.
Ten tweede: Om veiligheidsredenen filtert deze plugin de HTML en zet tekens met speciale betekenis in HTML om in de overeenkomstige HTML-entiteiten.

Maar vanaf versie 1.5.0 van dit widget kan je een selectievakje om veilige HTML in de uitvoer toe staan aanzetten als je de uitvoer van de agenda-applicatie vertrouwd. Dus als je er in slaagt HTML in de Beschrijving te krijgen en je selecteert het selectievakje om veilige HTML toe te staan dan kan je die HTML in de uitvoer van de widget krijgen, met uitzondering van de tags die niet als veilig beschouwd worden zoals SCRIPT en onbekende tags.
En met de huidige versie van Google Agenda kan je enige HTML in de Beschrijving krijgen. (April 2022) Ik zag de <a> (link), <b> (vet), <i> (schuine tekst), <u> (understreept) and <br> (regeleinde) tags in eeniCal beschrijving. Die komen door als “Veilige HTML toestaan” aan staat. Waarschijnlijk is er zelfs meer mogelijk, maar Google kan ook besluiten zich meer aan de standaard te gaan houden.
Met Microsoft Outlook waren de HTML weggefilterd en bereikten dus niet de iCal beschrijving

In het geval dat je allerlei HTML in je afspraken hebt is een plugin die de API van de agenda-applicatie gebruikt wellicht een betere keus voor jou.

Hoe gebruik ik Microsoft Office Outlook Agenda?

Eerst moet je je agenda delen om hem openbaar te maken, of een gedeelde agenda maken en die openbaar maken. Privé agenda’s kunnen niet gelezen worden door deze plugin.
Publiseer hem dan als een ICS link en gebruik dit linkadres. (iets als https://outlook.live.com/owa/calendar/00000000-0000-0000-0000-000000000000/…/cid-…/calendar.ics) (werkt vanaf versie 1.3.1 van deze widget)
Meer details bij Microsoft Office support

Hoe gebruik ik Apple Agenda (iCloud Mac/ios)?

Kies de agenda die je wilt delen. Klik op het radio symbool (een punt met drie kwart cirkels) geheel rechts in de regel van die agenda. Vink het vakje Openbare Agenda In de pop-up Agenda Delen aan. Dan zie je onder aan de url iets als: webcal://p59-caldav.icloud.com/published/2/MTQxNzk0NDA2NjE0MTc5AAAAAXt2Dy6XXXXXPXXxuZnTLDV9xr6A6_m3r_GU33Qj. Klik op Kopieer Link en OK. Plak hem in het “Calendar ID, of iCal URL” veld van de widget (voor versie 1.3.1 moest je dan webcal in https veranderen)
Meer details in de MacObserver (engels)

Fout: cURL error 28: Operation timed out after 5000 milliseconds with 0 bytes received

Waarschijnlijk is de agenda (nog) niet openbaar, je kan de link kopieren voordat hij al echt is openbaar gemaakt. Controleer of de agenda al openbaar is en probeer het dan opnieuw.

Ik zie alleen de kopregel van de agenda, maar geen afspraken?

Er zijn geen afspraken gevonden binnen de selectie. Test b.v. met een afspraak voor de volgende dag en ververs de cache of wacht tot de cache ververst is.
Controleer of je het ics bestand dat je hebt aangewezen in de widget kan downloaden in een browser. Op zijn minst of het een tekst bestand is met als eerste regel “BEGIN:VCALENDAR” en verder regels “BEGIN:VEVENT” en regels “END:VEVENT”. Als je het probleem niet kan oplossen kan je natuurlijk een fout/vraag melden in ons
community support forum

Kan ik een gebeurtenissen kalender die alleen dagen, maar geen tijdstippen bevat, zoals een feestdagen kalender gebruiken?

Ja dat kan je, vanaf v1.2.0, heb ik dat getest met https://p24-calendars.icloud.com/holiday/NL_nl.ics .

Hoe kan ik bijdragen aan Simple Google Calendar Outlook Events Widget?

We zijn blij met je hulp! Hier zijn een paar dingen die je kunt doen:

Beoordelingen

17 april 2022
Exactly what I wanted. Small, simple plugin to add google calendar on the sidebar which I can customize with CSS.
7 april 2022
Its a great plugin, that does what it should. Getting calendar data from a http source in ICS-Format and displaying it as a nice little widget. Big shoutout to the maintainer, he‘s responding very quick to questions or problems. Awesome work!
Lees alle 2 beoordelingen

Bijdragers & ontwikkelaars

“Simple Google Calendar Outlook Events Block Widget” is open source software. De volgende personen hebben bijgedragen aan deze plugin.

Bijdragers

“Simple Google Calendar Outlook Events Block Widget” is vertaald in 1 taal. Dank voor de vertalers voor hun bijdragen.

Vertaal “Simple Google Calendar Outlook Events Block Widget” naar jouw taal.

Interesse in ontwikkeling?

Bekijk de code, haal de SVN repository op, of abonneer je op het ontwikkellog via RSS.

Changelog

  • 2.0.3 Added initial values for new attributes in transform.
  • 2.0.2 For block: Added enddate (only when different from startdate) and endtime for first line and summary line, boolean start with summary, selectlist for summary tag,
  • HTML anchor and improved security by using wp_kess on formatted datetimes. Removed editor style.
  • For all: Improved handling of enddate for recurrent events with DATEs (no times) and selection recurrent events also when enddate is after now (was already so with single events)
  • 2.0.1 Transformeren van widget naar blok toegevoegd. Voorbeeld toegevoegd.
  • 2.0.0 Wanneer WP 5.9 of hoger gebruikt wordt. Een Gutenberg Block Simple ical Block gemaakt naast de oude widget met dezelfde administratieve code en bijna dezelfde uitvoer.
  • 1.5.1 Na meer testen en het oplossen van enkele problemen met herhalende gebeurtenissen en zomertijd (DST) de oude correctie voor DST en het tijdelijke selectievakje om deze correctie uit te zetten verwijderd. Nu is er alleen een correctie als het tijdstip is veranderd omdat de berekende tijd niet meer bestaat gedurende de overgang van wintertijd (ST) naar zomertijd(DST). In dat geval worden in de volgende recursie het uur en de minuten weer teruggezet naar hun beginwaarde. Hernoemd en namespaced classes. Verbeterd Zerodate to UTC-timezone processing. De IcsParse class een beetje geherstructureerd.
    20220516 tested up to 6.0 (RC2)
  • 1.5.0 In antwoord op een github issue van fhennies een selectievakje toegevoegd om veilige HTML toe te staan. wp_kses() function toegevoegd om te draaien voor run for description, summary en location, zodat alleen HTML dat als veilig wordt beschouwd voor WP berichten wordt doorgelaten, om zo toch wat beveiliging tegen XSS te behouden.
    Extra options for parser in array $instance and added temporary new option notprocessdst to don’t process differences in DST between start of series events and the current event. (in antwoord op een WP support topic van @wurzelserver)
    7-4-2022 tested with wordpress 5.9.1
  • 1.4.1 inantwoord op een support topic van edwindekuiper (@edwindekuiper) fixed timezone error: If timezone appointment is empty or incorrect
    timezone fall back was to new \DateTimeZone(get_option(’timezone_string’)) but with UTC+… UTC-… timezonesetting this string is empty
    so I use now wp_timezone() and if even that fails fall back to new \DateTimeZone(‘UTC’).
  • 1.4.0 parameter excerptlength toegevoegd om de lengte in tekens van de beschrijving te beperken in antwoord op een reactie van justmigrating (@justmigrating).
    Een trimfout gerepareerd die in een vorige versie optrad, en herzag het hele trimwerk zodat zowel \r\n als \n einde van regels goed verwerkt worden
    12-7-2021 getest met 5.8-RC2 en ingesteld tot 5.8
  • 1.3.1 getest met Outlook en gemerkt dat andere tijdzones een probleem opleverden, opgelost door een conversietabel tussen Microsoft tijdzones en Iana tijdzones toe te passen en door lokale tijdzone (uit WordPress configuratie) te gebruiken wanneer de tijdzone onbekend is.
    Verder gezien, dat dubbele punt beschrijving en samenvatting kon beëindigen. Ook hiervoor een oplossing gevonden, zodat je nu ook een dubbele punt in de beschrijvingen kan gebruiken.
    Getest met Apple iCloud Agenda, tijdzones lijken Iana te zijn. Wel een probleem met url die met webcal protocol begint in plaats van http, of https, work around is vervangen door https:, maar opgelost door dit automatisch te doen als de url niet gevonden wordt.
  • 1.3.0 tijdnotaties van afspraak/evenement tijden configureerbaar gemaakt als reactie op een opmerking van carolynclarkdfw (@carolynclarkdfw) op de pluginpagina. Getest met WordPress 5.7
  • 1.2.2 een checkbox om de cache te wissen voordat hij verlopen is naar aanleiding van een comment van TrojanObelix (op github)
  • 1.2.1 afhandeling: not available DTEND => !isset($e->end) in reactie op een commentaar van lillyberger (@lillyberger) op de plugin pagina, door $e->end default de DTSTART waarde te geven.
    getest met https://p24-calendars.icloud.com/holiday/NL_nl.ics
  • 1.2.0 aanpassing bij gebeurtenissen met DTSTART in DATE formaat in plaats van DATETIME het tijdstip niet te tonen. Na een commentaar van TrojanObelix.
    Ontdekt, dat date_i18n($format, $timestamp) formatteerd volgens de locale, maar de tijdzone niet evalueert daardoor gaan tijdstippen en soms ook datums
    fout , maar de nieuwer functie wp_date() doet het wel, daarom date_i18n() vervangen door bij wp_date() (daardoor is WP 5.3.0 nu verplicht).
    het gebruik van ID’s voor de gebeurtenissen aangepast, zodat ze ook werken met regeleinde is \n in plaats van \r\n na het voorbeeld van TrojanObelix gezien te hebben.
    Getest met WP 5.5.3.
  • 1.1.0 verwerkt EXDATE om gebeurtenissen uit te sluiten van herhaling
  • 1.0.3 trim alleen “\n\r\0” en eerste spatie maar behoudt laatste spatie in Description Summary en Location regels.
    aanpassingen om de tijdzone te corrigeren die wordt genegeerd in new datetime als de $time parameter UNIX timestamp is (bv. @946684800)
  • 1.0.2 Aanpassingen voor meer regels Description, Summary of Location. Getest met WP 5.2.1.
  • 1.0.1 PHP 7.2 Verouderde create_function veranderd in anonymous function in widget_init. Getest met WP 5.0.3
  • 1.0.0 eerste versie in WP plugin directory, directory en start php hernoemd naar slug simple-google-icalendar-widget
  • 0.7.0 BYDAY met DAILY frekwentie getest. Test code verwijderd. Als RC gepresenteerd aan WordPress.
  • 0.6.0 BYDAY en BYMONTHDAY werken met volledige sortering en unificatie in MONTH frekwentie
    toevoegen class achtervoegsel vanuit instellingen.
  • 0.5.0 BYDAY voltooid eerste poging met sorteren getest met WordPress 4.8.3 php 7
  • 0.3.5 verwijderen van niet bestaande dagen zoals 31 november eerste poging met BYDAY
    werkt ook met volledige url van ical .ics bestand.
    hernoemd plugin in simple-google-i-calendar-widget en
    hernoemd referenties naar gcal in ical
  • 0.3.3 eenvoudige herhalende gebeurtenissen (alleen volledige periodes) workt
  • 0.2.0 begonnen te werken aan herhalende gebeurtenissen
  • 0.1.0 Ondersteuning toegevoegd voor begin en eind tijd met tijdzone
    Verandert lay-out van uitvoer ven de widget zo dat hij meer in lijn is met bootstrap 4 en en met het iframe-widget van google
    een aantal kleine veranderingen bv: betere ondersteuning voor gebeurtenissen in een tijdzone en gebeurtenissen die een hele dag duren. Escaped chars vervangen voor samenvatting, beschrijving en locatie. Verbeteringen in HTML uitvoer.
    Start .php file in simple-google-calendar-widget.php hernoemd.
  • 0.0 V0.7 van NBoehr geïmporteerd.