Display events in the front-end like in manager?

Agenda
#1

I’m sorry if this question has an obvious answer, but is there an easy way to display the events in the front-end the same way like they are in the manager? Specifically I am looking for a weekly view of the events. It doesn’t seem like a snippet does anything like that out of the box, so I was wondering if that’s possible at all or if that’s where you have to use FullCalendar?

#2

To minic the backend would require FullCalendar.

#3

There is a new component in TailwindUI, that can be created with the AgendaCalendar snippet. Or you can use something like this: https://codepen.io/m0skar/pen/WjBdVW

#4

Thanks for the replies! I probably have to go with FullCalendar then, TailwindUI looks amazing, but is out of the budget unfortunately, definitely something to look into for the future, though.

How would I go about populating this dynamically with the events, having proper navigation through the weeks and so on? Do I have to write custom JS for that?

#5

TailwindUI and the CodePen examples work without JS. Then you just have to create a week based pagination snippet.

So if you really need a navigation and some dynamical loading, you should go with FullCalendar 3 (or 5 – I have to document that).

#6

Out of curiosity: this method would work then by adjusting the Agenda templates to the Tailwind or CodePen example I assume? How does this manage placing the events in the right date and timeslots without any scripts?

I think I would still like to keep it more dynamic though, so I got the basic Fullcalendar setup working, the syntax changed a bit in V5:

events: {
  url: 'assets/components/agenda/overview.php',
  method: 'POST',
  startParam: 'startdate',
  endParam: 'enddate',
  extraParams: function() {
    return {
      //calendars: calendars || 0,
      //categories: categories || 0,
      //query: query || '',
      limit: 0
    };
  }
}

Currently it is showing both active and non-active events though, how can I only show the active ones?

#7

Filtering active records has to be done in the connector or with the extended parameters.

#8

I did something similar in a project BERLINboxx - Hauptstadtkalender . It doesn’t look like a calendar, but it’s a date and categorie filtered event list. I can’t remember exactly how I did it, because it’s already a few years done, but I could create you a copy on GitHub for you if that helps.

#9

Thank you, that looks pretty close, to what I am looking for! I would need my data coming from a migxdb, though and I’m assuming that’s not what you did there?

If it’s not too much work, I (and probably others in the future) would still appreciate such a thorough example on Git!

#10

I dont use data from migx there but AgendaList in combination with the “getUrlParam” extra to filter the dates and categories
https://www.berlinboxx.de/hauptstadtkalender/?daterange=24.02.2022+-+24.03.2022&startdate=2022-02-24&enddate=2022-08-25&category=kultur.

I think as long as you get the migx data into your url, you can filter these.

The AgendaList call looks like this.

[[!AgendaList? &start=`[[!getUrlParam? &name=`startdate`]]` &end=`[[!getUrlParam? &name=`enddate`]]` &limit=`0` &tpl=`agendaListTpl` &wrapperTpl=`tplAgendaEventWrapper-custom` &daterangeFormat=`j.|\&\n\b\s\p\;F\&\n\b\s\p\;|Y|, |G|:i|\&\n\b\s\p\;\U\h\r` &daterangeSeparator=` – ` &locationTpl=`tplAgendaEventLocation-custom` &locale=`de_DE` ]]

I will delete the unnecessary stuff, rewrite my comments in english and upload an example as soon as possible.

1 Like
#11

startdate and enddate can be added to the request parameters in a future version, if thats wanted.