In deze tutorial laten we je zien hoe je een evenementenkalender toevoegt aan Elementor met behulp van FooEvents in 2024. De kalenders zullen meerdere evenementen weergeven die worden weergegeven in verschillende tabbladen met verschillende weergavemodi.
Stap 1: Installeer Elementor en FooEvents Kalender plugins
Eerst moet je ervoor zorgen dat je de Elementor plugin geïnstalleerd. Deze kan worden gevonden op wordpress.org en direct geïnstalleerd vanuit de sectie plugins op je website.
Log in op je WordPress admin dashboard en navigeer naar Plugins > Nieuw toevoegen. Zoek dan naar Elementor en installeer de Elementor websitebouwer plugin.
Zoek vervolgens naar FooEvents en installeer de Evenementenkalender voor FooEvents FooEvents biedt twee manieren om evenementen te creëren op uw WordPress site. De eerste optie is om evenement details toe te voegen aan een standaard WordPress post of pagina met behulp van de FooEvents Kalender plugin. Dit doe je wanneer je het bericht of de pagina bewerkt. De FooEvents Agenda plugin voegt een basis evenement instellingen formulier toe aan de onderkant van de post, pagina's en aangepaste post types. Met behulp van dit formulier kun je de datum en tijd van het evenement instellen. Eenmaal ingesteld, zullen ze worden weergegeven in kalenders gegenereerd door de FooEvents kalender plugin.
De tweede en meer geavanceerde optie is om de FooEvents voor WooCommerce plugin en extensies om evenement en ticketing functionaliteit toe te voegen aan je WooCommerce producten. FooEvents voor WooCommerce maakt het mogelijk om onbeperkt tickets te verkopen rechtstreeks vanaf uw website en check-ins te beheren met behulp van de gratis FooEvents Check-ins apps. De FooEvents Boekingen De plugin kan ook worden gebruikt om toegang tot boekbare tijdslots te verkopen, wat later in deze tutorial zal worden geïllustreerd.
Als je een paar testgebeurtenissen hebt ingesteld, ga dan door naar de volgende stap.
Stap 2: Maak een nieuwe pagina
Maak een nieuwe pagina en stel de paginatitel in. Ga vervolgens naar de Elementor page builder door op de knop Bewerken met Elementor knop.
Stap 3: Elementor Tabs toevoegen
Zodra de pagina is geladen, voegt u een element Tabbladen toe aan het hoofdgedeelte van de pagina. Standaard maakt Elementor twee voorbeeldtabbladen. Verwijder het tweede tabblad en breid de bewerkingsopties van het eerste tabblad uit.
Stap 4: Een Elementor Evenementenkalender toevoegen met FooEvents
Wijzig het eerste tabblad en verander de titel in 'Alle', voordat u de FooEvents Kalender shortcode naar het inhoudsgedeelte van het tabblad.
[fooevents_calendar id="1"]
Als je meerdere kalenders aan een pagina toevoegt, is het belangrijk om voor elke kalender een unieke ID op te geven (bijvoorbeeld id="1″). Je kunt dan een voorbeeld van de kalender bekijken, waarin alle gebeurtenissen worden weergegeven die plaatsvinden in de huidige maand.
Stap 5: Voeg een kalender toe voor specifieke evenementcategorieën
Dupliceer vervolgens het tabblad dat we zojuist hebben gemaakt en verander de titel in Activiteiten. Deze kalender moet dan alle gebeurtenissen weergeven die activiteiten zijn. Bij het maken van evenementen met behulp van de FooEvents voor WooCommerce plugin, kunt u het organiseren van de gebeurtenissen met behulp van de WooCommerce categorieën functie. Voor deze demo hebben we de Bus Tour tour toegevoegd aan de categorie activiteiten. Met behulp van de include_cat shortcode parameter, kunnen we vervolgens filteren op de kalender om alleen gebeurtenissen die zijn gecategoriseerd als activiteiten weer te geven. We kunnen dit proces ook dupliceren voor evenementen die zijn gecategoriseerd als 'Conferenties'.
[fooevents_calendar id="2″ include_cat="activities"]
Stap 6: Kalenders toevoegen voor specifieke tijdsperioden
Maak een kalender die alleen gebeurtenissen weergeeft die plaatsvinden op de huidige kalenderdag door de defaultview parameter te gebruiken met de waarde ingesteld als listday. Je kunt deze parameter ook gebruiken in combinatie met andere parameters zoals de include_cat parameter indien nodig. Volg hetzelfde proces en maak een tabblad Weekweergave waarbij we de standaardweergave opgeven als lijstWeek. Deze weergave toont dan alle gebeurtenissen die plaatsvinden in de huidige week.
Maak een tabblad voor de maandweergave waarin alle gebeurtenissen worden weergegeven die plaatsvinden in de huidige kalendermaand met behulp van listMonth en de parameter defaultdate om aan te geven welke maand moet worden weergegeven. Maak een tabblad om alle gebeurtenissen weer te geven die plaatsvinden in het huidige jaar met behulp van de waarde listYear.
[fooevents_calendar id="3″ defaultview="listDay"]
Stap 7: Voeg een kalender toe voor specifieke herhaalde gebeurtenissen
Maak een kalender voor specifieke terugkerende evenementen. De bustour maakt bijvoorbeeld gebruik van de FooEvents boekingsplugin en wordt herhaald op verschillende datums en tijden. Je kunt een kalender maken die alleen deze tijden weergeeft door de ID van het product op te geven. Het enige wat je hoeft te doen is de ID te achterhalen, een tabblad te maken met de naam Bus Tour en de ID van het product in te stellen als postparameter. De agenda toont dan alleen boekingen voor dit evenement.
Dat was het! Je weet nu hoe je FooEvents en Elementor kunt gebruiken om evenementenkalenders aan je website toe te voegen die meerdere evenementen weergeven in verschillende tabbladen met verschillende weergavemodi. Elk van deze kalenders kan verder worden gefilterd met behulp van een aantal shortcode-parameters. Je kunt hier meer over lezen door naar het FooEvents helpcentrum te gaan en te navigeren naar de kalender shortcodes help doc.
Misschien ben je ook geïnteresseerd in deze inhoud van onze partner FooSales WooCommerce POS:
English 
German 
Dutch 
Spanish 
Italian 
Portuguese 
French 
Polish 
Czech 
Greek