Simple Google Calendar Outlook Events 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.

Het Gutenberg blok vereist minimaal WordPress 5.9.
Deze eenvoudige blok/widget haalt evenementen op uit een publieke Google agenda (of andere agenda in iCal format) en geeft ze weer in een eenvoudige lijst waarmee je je site volledig kunt aanpassen door allerlei CSS toe te passen.
Google biedt een aantal HTML snippets om je publieke Google agenda in je site in te sluiten.
Deze zijn geweldig, maar zodra je een paar aanpassingen aan de styling wil doen, die verder gaan dan het veranderen van wat kleuren, zijn ze niet genoeg.

Plugin kenmerken

  • Kalender blok of widget dat afspraken/gebeurtenissen van een openbare Google agenda of ander iCal bestand toont.
  • Block geeft live preview in de editor en is niet beperkt tot het widgetgebied. Oude widget wordt alleen in het widgetgebied weergegeven in het oude widgetblok. Oude widget werkt ook met Elementor (met enkele beperkingen, voorbeeld in backend-editor is bijvoorbeeld niet altijd beschikbaar).
  • 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
  • Voeg meer agenda’s samen in een blok
  • 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)
  • Basis ondersteuning voor filteren op categorieën. Waarschuwing: MS Outlook deelt nu geen categorieën via iCal. Google- en iCloud-agenda ondersteunen helemaal geen categorieën. Dit zal dus niet werken met deze kalenders.
  • In het onderstaande schermafbeelding: Links het blok met standaardinstellingen en op één samenvatting geklikt. Rechts met enkele aangepaste instellingen.
    Aangepaste instellingen voor begin met samenvatting:
    Lay-out: begin met samenvatting.
    Datum format eerste regel: “.<\b\r>l jS \o\f F”
    Einddatum format eerste regel: “
    Time format tijd overzicht regel: “G:i”
    Time format eindtijd samenvatting regel: ” – G:i”
    Time format begintijd: “”
    Time format eindtijd: “”
    Tag voor samenvatting: “strong”

Documentatie

  • Haalt agenda gebeurtenissen op via iCal url of Google agenda ID
  • Voeg meer agenda’s samen in een blok
  • Toont maximaal het geselecteerde aantal gebeurtenissen als lijstgroep items.
  • Toont alleen evenementen in een geselecteerde periode met een lengte van de instelling “Aantal dagen na vandaag met evenementen” vanaf nu beperkt door het tijdstip van de dag of het begin van de dag aan het begin en het einde van de dag aan het einde.
  • Toont gebeurtenissen in de tijdzone van de WordPress instelling, of in de tijdzone van de klant met een JavaScript REST oproep opgehaald vanuit de browser van de klanten.
  • Toont gebeurtenis begin-datum en samenvatting; toggle details, omschrijving, begin-, eind-tijd, locatie.
  • Toont de meest algemene herhalende gebeurtenissen
  • Frekwentie Jaarlijks, Maandelijks, Wekelijks, Dagelijks (niet ontleed per uur, per minuut …), INTERVAL (standaard 1), WKST (standaard MO, maandag)
  • Einde van herhaling door COUNT of UNTIL
  • Per dag, maand, dag van de maand of set positie (BYDAY, BYMONTH, BYMONTHDAY, BYSETPOS) geen andere per…
    (niet ontleed: BYWEEKNO, BYYEARDAY, BYHOUR, BYMINUTE, RDATE)
  • Gebeurtenissen op EXDATE uitsluiten van herhaling (na evaluatie van BYSETPOS)
  • Houdt rekening met tijdzone en zomertijd. 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).

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 GNJe GPL , versie 2 of later.
2017 –   2023 © Bram Waasdorp.

Schermafdrukken

  • Met thema Twenty Twenty-Two.
  • Met thema WP Bootstrap Starter (met bootstrap 4 css and js).
  • Transformeer van Verouderde widget block naar 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 het gebruikelijke, installeer hem gewoon via de WordPress plugin directory .
    Of download het zip-bestand en upload het via Plug-ins Nieuwe toevoegen… installeren en activeren.
    Of voer de oude handmatige installatieprocedure uit… je weet wel… downloaden… uitpakken… uploaden… activeren.
  • 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: 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.
  • Voer alle noodzakelijke configuratievelden in, ten minste een Calendar ID.
    In Calendar ID voer je de calendar ID in die door Google Calendar wordt weergegeven, of de volledige URL van een Google calendar of ander iCal-bestand.
    Je kunt de Google calendar ID vinden door naar Kalenderinstellingen/Mappen te gaan, op de juiste kalender te klikken, helemaal naar beneden te scrollen om de Calendar ID onderaan in de sectie Integrate Calendar te vinden. Daar is je calendar id.
  • 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

Hoe meer agenda’s samenvoegen in een module/blok

Vul een komma gescheiden lijst van ID’s in het Calendar ID veld in.
Optioneel kan je een html-class gescheiden door een komma-punt aan alle of sommige ID’s toevoegen om ze te onderscheiden op afkomst in de lay-out van de gebeurtenis.
Bijv.: #example;blue,https://p24-calendars.icloud.com/holiday/NL_nl.ics;red
Gebeurtenissen van #example zullen gemengd worden met gebeurtenissen van NL holidays; html-class “blue” wordt toegevoegd aan alle gebeurtenissen van #example, html-class “red” aan alle gebeurtenissen van NL holidays.

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 als je de uitvoer van de kalenderapplicatie vertrouwt, kun je een selectievakje instellen om veilige HTML toe te staan in de uitvoer. Dus als je erin slaagt de HTML in de beschrijving te krijgen en je het selectievakje instelt om veilige HTML toe te staan, kan je die HTML in de uitvoer krijgen, met uitzondering van de tags die niet als veilig worden beschouwd zoals SCRIPT en onbekende tags.
En met de huidige versie van Google Calendar kan je wat HTML in de beschrijving uitvoer zetten. (April 2022) Ik zag de tags <a> (link), <b> (vette tekst), <i> (cursieve tekst), <u> (onderstreepte tekst) en <br> (linebreak) in een iCal beschrijving. Ze komen allemaal door met het selectievakje “Allow safe html” aan. Waarschijnlijk is er nog meer mogelijk, maar Google kan ook besluiten zich meer aan de standaard te houden.
Met Microsoft Outlook werden de HTML tags weggefilterd en bereikten ze de iCal beschrijving niet

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

Ik zie alleen de widget, niet het blok

Gebruik je minimaal WP 5.9? Beneden 5.9 werkt het blok niet.
Maak je gebruik van een pagebuilder zoals Elementor? Het blok wordt mogelijk niet weergegeven in de pagebuilder-editor, probeer of het beschikbaar is in de WordPress-editor.
Om gebruikers te ondersteunen die het Gutenberg-blok niet kunnen gebruiken, heb ik in v2.1.1 (met pijn in mijn hart omdat Gutenberg-blokken naar mijn mening de toekomst van WP zijn) de uitvoer van de widget opnieuw gesynchroniseerd met die van het blok.
Anders moesten ze een oplossing gebruiken met een extra plug-in, zoals beschreven in Hoe Gutenberg-blokken weer te geven in andere pagebuilders (Elementor, Divi, enz.) of een andere plug-in te gebruiken die een shortcode toevoegt aan een Gutenberg-blok of misschien een pro functionaliteit van Elementor.

Hoe Apple Agenda (iCloud) gebruiken?

Kies de agenda die u wilt delen (in browser indeling in het linker paneel). Klik op de regel van die agenda op het pictogram Agenda-informatie weergeven (een persoon bijgesneden in een cirkel) aan de rechterkant van de regel. Vink in de pop-up Agenda delen het vakje openbare agenda aan. je ziet de URL hieronder, zoiets als webcal://p59-caldav.icloud.com/published/2/MTQxNzk0NDA2NjE0MTc5AAAAAXt2Dy6XXXXXXPXXxuZnTLDV9xr6A6_m3r_GU33Qj. Klik op Link kopiëren en OK. Plak dat in het veld “Agenda-ID of iCal-URL” van de widget (vóór versie 1.3.1 moest je webcal in https wijzigen)

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

Ik zie alleen de titel van de kalender en de tekst ‘Bezig met verwerken’, zelfs na meer dan een minuut wachten, of een bericht &#61 Code: undefined = Msg: HTTP error, status = 500.

Waarschijnlijk heb je de instelling “Gebruik client tijdzone instellingen, met REST” gekozen in “Gebruik client tijdzone instellingen”. Met deze actieve instelling zal de widget eerst worden weergegeven als een plaatshouder met alleen de titel en de tekstverwerking. In de HTML van deze plaatshouder zijn ook enkele ID’s als parameters voor de JavaScript REST oproep om de inhoud op te halen nadat de pagina is geladen. Deze oproep wordt niet uitgevoerd (correct).
Om correct te werken, moet JavaScript ingeschakeld zijn in een browser met een versie nieuwer dan 2016, maar niet in Internet Explorer.
Dit wordt waarschijnlijk veroorzaakt doordat het JavaScript weergavebestand met het ophaalcommando niet is geladen, bijvoorbeeld in de editor van Elementor of een andere pagebuilder die probeert een voorbeeld van de widget te tonen maar het benodigde JavaScript niet laadt. Dit is een bekend probleem, je kunt dit omzeilen door eerst “Gebruik WordPress tijdzone instellingen, geen REST” in te stellen totdat je tevreden bent met alle andere instellingen en vervolgens “Gebruik client tijdzone …” in te stellen.
Als je de Sibid wijzigt zonder op de Update knop te klikken, kan de nieuwe Sibid al zijn opgeslagen in de plugin opties voor de REST oproep, maar niet in de blok attributen. Als je toch op Update klikt, wordt het probleem opgelost.
De REST oproep kan ook mislukt zijn om andere redenen, dan zou een nieuwe poging waarschijnlijk het probleem oplossen, maar dat heb ik nog nooit gezien bij het testen.
Als je het niet kunt oplossen, kun je natuurlijk een fout / vraag melden in ons community ondersteuningsforum.

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 .

Dit blok heeft een fout ondervonden en kan niet worden voorvertoond.

Waarschijnlijk heb je een pagina (opnieuw) geopend waar het blok wordt bewerkt, maar je wachtwoordcookie is verlopen.
Log opnieuw in op WordPress en open de pagina opnieuw. Het blok zal beschikbaar zijn.

Dit blok bevat onverwachte of ongeldige inhoud.

Na een update van de plugin verschijnt in plaats van de block inhoud
de melding “Dit blok bevat onverwachte of ongeldige inhoud.” wordt weergegeven en een knop “Poging tot blokherstel”.

Waarschijnlijk wordt dit veroorzaakt door een verschil in de opgeslagen uitvoer en de uitvoer die zou worden opgeslagen als het blok nu zou worden opgeslagen. Dit zal het geval zijn als de code in de opslag is gewijzigd als gevolg van de plug-in-update (of downgrade). Dit zou automatisch moeten worden opgelost door de deprecation code, maar dit is niet altijd mogelijk als een blok op een pagina wordt geplaatst als onderdeel van een gesynchroniseerd patroon, als u terugkeert naar een oudere versie of als de deprecation code niet correct werkt.

* Als u op de knop “Probeer blok herstel” drukt, wordt de uitvoer in het nieuwe formaat opgeslagen en wordt daarmee het probleem opgelost.

* Als het om een gesynchroniseerd patroon gaat, moet je “Blok herstel proberen” in het originele patroon via Origineel bewerken of “Uiterlijk/Patronen”.

Hoe stel ik verschillende kleuren en tekst groottes in voor de datums, de samenvatting en de details?

Er is geen instelling voor de kleur of het lettertype van onderdelen in deze plugin.
Mijn filosofie is dat lay-out en code/inhoud zoveel mogelijk gescheiden moeten worden.
Bovendien moet de plugin naadloos passen bij de stijl van de site en volledig aanpasbaar zijn via CSS.

Dus voor kleur en lettertype worden de instellingen van het thema gebruikt en vervolgens toegepast via CSS.
Maar je kunt elk element binnen de plugin zijn eigen stijl geven (zoals kleur en lettergrootte) vanuit het thema via CSS.

Als je goed bekend bent met de CSS van je thema en het bevat klassen die je wilt gebruiken op deze velden, dan kun je die klassen toevoegen in de Geavanceerde instellingen: "SUFFIX GROUP CLASS:", "SUFFIX EVENT START CLASS:" and "SUFFIX EVENT DETAILS CLASS:"

Anders kun je een blok met extra CSS toevoegen (of extra css of gebruikers css of iets dergelijks), wat mogelijk is met de meeste thema’s.
BELANGRIJK:
Om de CSS heel specifiek op het simple-ical-blok te richten, is het het beste om iets unieks in te voeren in de instellingen van het blok/widget onder Geavanceerd in “HTML ANKER”, bijvoorbeeld ‘Simple-ical-Blok-1’, de code wordt vertaald naar een hoog niveau ID van het blok.
Met het volgende blok extra CSS kun je de datums rood en 24 px maken, de samenvatting blauw en 16 px,
en de details groen met een grijze achtergrond.

/*additional CSS for Simple-ical-Block-1 */
#Simple-ical-Block-1 .ical-date {
color: #ff0000;
font-size: 24px;
}
#Simple-ical-Block-1 .ical_summary {
color: #0000ff;
font-size: 16px;
}
#Simple-ical-Block-1 .ical_details {
color: #00ff00;
background-color: gray;
font-size: 16px;
}
/*end additional CSS for Simple-ical-Block-1 */

Hoe filter ik op categorieën

Waarschuwing: de plug-in ondersteunt alleen categorieën die beschikbaar zijn in het iCal-bestand. Microsoft Outlook ondersteunt categorieën, maar deelt deze niet via het ical-bestand.↵
Als de ical categorieën bevat, zijn er drie opties in de geavanceerde sectie om deze te gebruiken.

— Categorieën Filter Operator:↵
Hier kun je kiezen hoe je de filter categorieën vergelijkt met de gebeurtenis categorieën.

– Leeg geen filtering.↵
– ANY is waar als ten minste één van de elementen van de filter set aanwezig is in de gebeurtenissen set, of met andere woorden: de filter set doorsnijdt de gebeurtenissen set, de doorsnede bevat ten minste één element. Dit lijkt mij de meest praktische operator.

– ALL is waar als alle elementen van de filter set in de gebeurtenissen set voorkomen, of met andere woorden: de doorsnede bevat hetzelfde aantal elementen als de filter set. De gebeurtenissen set kan andere elementen bevatten.

– NOTANY is waar als ANY NIET waar is. De doorsnede is leeg.↵
– NOTALL is waar als ALL NIET waar is. De doorsnede bevat minder elementen dan de filter set.

– Een speciaal geval zijn evenementen zonder categorieën. In het filter verwerkt de plug-in dit alsof de categorie een nul tekenreeks (“”) is.

— Categorieën filterlijst:↵
– Lijst met filter categorieën gescheiden door een komma (niet tussen dubbele aanhalingstekens). Als een categorie een komma bevat, moet u er een backslash (\,) aan toevoegen. Er wordt een nul tekenreeks als categorie aangemaakt als er niets in de lijst wordt ingevoerd of als de lijst eindigt met een komma, of als er twee komma scheidingstekens direct naast elkaar staan.

– Categorieën (althans in deze plug-in) gedragen zich als eenvoudige tags en hebben geen intrinsieke betekenis of relatie. Als u dus alle evenementen met categorie bloem, roos of tulp wilt selecteren, moet u ze allemaal aan de filterlijst toevoegen. Bij categorie bloem selecteer je niet automatisch ook roos en tulp

— Categorieën weergeven met scheidingsteken: ↵
– Hier kunt u ervoor kiezen om de lijst met gebeurtenis categorieën weer te geven na de samenvatting en met welk scheidingsteken. Als u dit veld leeg laat, wordt de lijst niet weergegeven.

Als de gebeurtenis categorieën bevat, wordt de lijst met categorieën van deze gebeurtenis, opgeschoond als klassen (spaties verwijderd etc.), toegevoegd aan de html-klassen van de gebeurtenis (aan het list-group-item).

How can I report security bugs?

You can report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team help validate, triage and handle any security vulnerabilities. Report a security vulnerability.

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

20 juni 2023 1 reactie
Small but powerful plugin that has all the functions I need without messing your backend with complicate settings.
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 5 beoordelingen

Bijdragers & ontwikkelaars

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

Bijdragers

“Simple Google Calendar Outlook Events Widget” is vertaald in 2 localen. Dank voor de vertalers voor hun bijdragen.

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

Interesse in ontwikkeling?

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