eventsCalendar2: Listing Events in Side Column, as Well as Calendar Form

A couple of months ago, I created a tutorial on the implementation of eventsCalendar2, which you can read here:

https://forums.modx.com/thread/74010/eventscalendar2---a-quick-tutorial#dis-post-410742

In that tutorial, I mentioned that I had taken the component a little bit further by adding a listing of a certain number of calendar events and having them appear on a side column within the site. It's been since requested that I show how I did that and I thought others might benefit, so I've created this little added tutorial.

If you would like to see what I'm talking about, there is a site that, as of this writing, is being developed where I've implemented it. You can see the calendar implemented on this page:

http://67.222.24.164/~hawkresort/calendar-holiday-seasonal-events/

...and a sample of the listing on any number of pages, for instance this one:

http://67.222.24.164/~hawkresort/special-packages.html

(see right hand column).

I won't rehash the calendar implementation again, please refer to the above linked tutorial, however, once it is up and running, you can list the events this way:

First, note that the listing is based on Shaun McCormick's blog tutorial, which you can refer to here:

http://rtfm.modx.com/display/revolution20/Creating+a+Blog+in+MODx+Revolution


For this implementation, you won't need all the components installed that Shaun's blog requires...really only getResources and Archivist. I haven't tried to run it without Archivist but I assume this implementation needs it to run (I installed it in the above-named site because it has a blog and Archivist is required for that). You can experiment whether it needs it or not on your own. getResources, however, is a must.

So, you download and install those components. Then, what I did was:

1. created a chunk called calendarEventsPosts (call yours whatever you wish but make sure you use the proper name in step 2 below). In it, add this code:



Pretty straightforward, that code is the template the listing uses, but a couple things to note: first is that you can limit the number of characters that appear in the main part of the listing, in this case, to 400 characters. That's the 'limit=`400` part (backticks...not single quotes). Also, notice the date part. It takes that from the event_date TV I had created (see earlier tutorial) and the date format in this case gives you the result of that date, in the Month, Day, Year format. You can add or subtract elements from that template as you like...nothing is an absolute must for it to work; just a good starting point.

2. Made a chunk called calendarEventsPosts_code. In it, I added this code:



The css I'll leave up to you, of course.


3. I added the calendarEventsPosts_code chunk to the individual pages to make it show up. You can put it straight in the template or add it, page-by-page, by way of a TV or any of your favorite methods.

Other notes:

&parents=`76` refers to same container (76 is the ID in the case of my site) that holds the calendar events resources.

The &limit=`5` refers to the number of events that will show up in the listing (backticks...not single quotes).

&tpl=`calendarEventsPosts` refers to the name of the chunk you created above. Name as you wish but make sure you refer to the correct name.

Normally, the code, as tutorialized in Shaun's blog tutorial would have the events show up most recent first, then the next oldest one one, etc. In this case, I wanted the events to show up with reverse order. To reverse the order they show up, I added the part:



To sort the other way, use DESC instead of ASC.
The `event_date` is the name of the TV I created in the previous tutorial that takes date of the event. Please refer to that.

While doing my own research, this part:



came up and I added it to the code, although I confess that I'm not sure what it is for, or if it is absolutely necessary. Please test on your own and let me know if it is just worthless in this case.

Really, that should do it. Hope it helps someone out there.
[ed. note: waizen last edited this post 14 years, 4 months ago.]

Hi Willi, thanks very much for both tutorials, they've been extremely helpful.
However, I can't work out how to configure the sorting by date.
The events are actually sorted in descending order by published date.

The calendar itself is working perfectly fine including the AJAX navigation.

Here's my chunk


I've tried changing the TV name to tvevent_date as well and disabling caching options all over the place.
The site was originally a 2.0 version that I've updated to 2.2.2-pl (trad).
eventscalendar2 is 2.2.3-pl
I'm absolutely new to MODX and I reckon that I might be missing something obvious.

I've looked into the code for eventscalendar2.class.php and the only line that I see would modify the sorting in the query would be #334 under getEvents()

which is not actually getting hit at all.

I could really do with some pro-tips. Here's the live site if you fancy having a look
http://mjibusinesssolutions.com/events

thanks very much

Jaume [ed. note: jaumesancho last edited this post 14 years, 4 months ago.]

@Jaume

I hope I understand your question correctly. Looking at your site, the events seem to be ascending properly (did I mix up the words descending and ascending?) So, is your problem related to where the dates should be entered in the control panel, not whether they are ascending or not?

Based on those questions, the date you enter for the event should be done through the event_date TV...not the publish fields...in the control panel. Is the event_date TV field where you entered the desired dates of the event? You should be able to ignore the 'Published On' fields located in the Settings tab.

BTW: I don't think you should need to modify the code of the component to get it to work...at least I didn't.

Other than that, your call seems to be correct. Looking at your site, it appears that you went through my first tutorial okay. [ed. note: waizen last edited this post 14 years, 4 months ago.]

@Willi thanks a lot for getting back to me.

I am sorry, the events where indeed displaying according to their published date.
So as a workaround, I hardcoded the published dates so that the articles would display in the correct order.

I have created a duplicate of the section here http://mjibusinesssolutions.com/eventstest
And rest the articles within it to have the same exact published date.

On this test you can see how the event for the 14th of June is indeed showing before the one on the 10th.

Here are my config details as per the new "test" hierarchy.

Events template


Chunk code


I'd say that the the event_date TV variable is working as expected as that would affect the calendar otherwise.

Any thoughts?

ps: really sorry to have done the workaround and not updated my post accordingly.