eventsCalendar2 - a Quick Tutorial

I have been working with the eventsCalendar2 component lately for a project I'm working on and found the component to work great. In case anyone would like to install this system, I have taken the opportunity to provide a quick tutorial below. I find the component to install easily and works reliably.

Basically, the calendar works by having the calendar live on a page which is set as a container. Within this container are resources, each representing the events. Not only does the system pull the events from this container and display them over the calendar as popups (you hover over a colored date to have them pop up), each event in the popups act as links that take you to the resource pages where you can add as much detail about the event as you want.

The component's page is located here: http://modx.com/extras/package/eventscalendar22 A working demo is located here: http://webstartpage.ru/modx/eventscalendar2.html

I want to thank developer Bezumkin for all the help.

So, these are the steps to set up the component:

1. Download and install eventsCalendar2 through the package manager.
2. Add jquery to the page.
3. Set up a container to hold calendar events in. That is also the page that the calendar will appear on the site.
4. Set up a TV called event_date. Set input type (in Input Options tab) to 'date'. Make sure the container can see it
5. Set up a call in container that looks like this:



Make sure it is uncached so that the jquery will function correctly. I think I read somewhere that the call may not need the tv written next to event_date anymore. I haven’t verified this yet.

6. Create different calendar events by creating resources within the Calendar container. Use the event_date TV to enter the date of the event.

7. If you want to change the day the calendar week starts on (that is, whether the first column shows Sunday or Monday), add and experiment with this property within the call:



Experiment with day '1' or '0' to get the effect you want.

8. CSS is located at assets > components > eventscalendar2 > css > default.css

9. If your site is based in the United States, you know that the date formats are usually Month, day, year. With this component, the default, as it appears in the popups, is Day, Month, Year. To change that, all you need to do is add this as a property to the call:



This includes the time, which you may or may not want (it's the H and M part).

10. Out of the box, you may find that the system is European formatted. In order to Americanize the system a bit, the call ended up looking like this:



This changed the colored days to appear on Saturday and Sunday. I found that if the &first_day was set to `1`, the week started with Monday, with Friday and Saturday colored red. Unfortunately, this also changed the day the month started to an incorrect day. In this case, setting it to `1` had February 1, 2012 start on a Tuesday. It's supposed to start on Wednesday. But, setting &first_day set to `0` corrected this problem. Changing &first_day to `0` shifted the red colored days to Saturday and Sunday. At this point, the labels of the days of the week were wrong along the top of the calendar. This was then corrected by changing the lexicon of the days of the week to the outputted value.

I'm sure the way I just wrote that may not be clear, but if you go to System > Lexicon, then filter the namespace dropdown to eventsCalendar2, you will see what I mean. I also understand that this will be corrected soon in the component, so you may not even need to deal with this by the time you install it. [ed. note: waizen last edited this post 14 years, 7 months ago.]

Thanks Waizen, I have a project I will be trying this out on. It seems like eventsCalendar2 could be used in combination with the Articles add-on to make a really effective events manager.

I've already combined this component with Shaun McCormick's blog tutorial (https://forums.modx.com/thread/74010/eventscalendar2---a-quick-tutorial#dis-post-410742) as a way to show calendar events in a side column. Both the calendar and blog utilize the items in a container for material. The blog (side column listing of calendar events) just pulls from the calendar container. Works great.

Thanks for the Quick Tutorial

I use MODx v2.1.5-pl with eventsCalendar2 v2.2.2-pl and jQuery v1.7.1 and get the following Error-Log:

[2012-02-26 19:34:04] (ERROR @ /var/www/web0815/html/modx/core/components/eventscalendar2/model/eventscalendar2/eventscalendar2.class.php : 395) PHP warning: Invalid argument supplied for foreach()

My call:


Have anywhere a solution for it? Or maybe it's a bug?

---

btw:
It's possible to create an event with 2 or more days with 2 TVs (e.g. Event-Weekend or 3days Events)? Like



or multiple dates like



It would be great!
[ed. note: krischel last edited this post 13 years, 5 months ago.]

Hi,

I would like to know how to change the calendar's language? Is there a path to a file where it (or the words) could be changed?

Thanks!

If you do not specify a &lang, it is taken from system settings (Language cultureKey).
I try &lang=`en`, but that isn't working ;-(

Here you can find the language files: core/components/eventscalendar2/lexicon/
Create a new language-file or use the "Lexicon Management" [ed. note: krischel last edited this post 14 years, 7 months ago.]

I use MODx v2.1.5-pl with eventsCalendar2 v2.2.2-pl and jQuery v1.7.1 and get the following Error-Log:

[2012-02-26 19:34:04] (ERROR @ /var/www/web0815/html/modx/core/components/eventscalendar2/model/eventscalendar2/eventscalendar2.class.php : 395) PHP warning: Invalid argument supplied for foreach()

addition: same error with MODx 2.2.0-pl2

my solution:

:-)

Got an add-on novice question for you here:

3. Set up a container to hold calendar events in. That is also the page that the calendar will appear on the site.

What is meant by "container"?

@whitesphynx:

As I understand it, a container is nothing more than a resource in your resource tree (a web page) that you make act like a container. If you look at one such page in the tree (how to turn a page into a container is covered below), it looks, visually, and behaves, like a 'folder' in your computer's file management program. If you have a Windows PC and use the Windows Explorer program, you will notice a bunch of folders, which you can drag files into. You can also drag other folders inside other folders, etc, right?

Well, containers within MODx behave similarly. When you turn a resource (a web page) into a container, you are basically turning it into something similar to a folder on a PC. It still behaves like any other page, but it can now 'contain' other resources in it.

Why would you want to do that?

Multiple reasons. In MODx, for example (well, actually, through the use of Wayfinder), you can create dropdown menus, whereby the container ends up acting like the top-level menu item and the resources inside that container act as the menu's dropdown menu items. You can also have containers inside containers, much like folders inside of folders in your computer's file management system. A similar visual model.

In the case of the eventsCalendar2 component, the developer wrote the thing in such a way that the calendar, which is appearing within the container resource, takes the events from the material (resources/web pages) inside of it. A great system, in my opinion. Not only does the calendar take the listings from the contained material, the contained material serves as the detail page for the event.

Now, the way you turn a given resource into a container is simply to click on that resource in the Resources tree, making it editable in your control panel. One of the top tabs in the main part of the page is called 'Settings' (since you are just starting out, I assume you will be building with, at least MODx 2.2?). Click on that and somewhere in the resulting page, near the right is a bunch of check boxes. One of them is labeled 'container'. Check that and hit save. You may need to refresh the page (I always seem to need to).

When the page stops doing its refresh dance, you will notice that the page, as it appears in the Resources tree in the left column now looks, visually, like a folder.

At this point, You can create content inside of it (other resources inside that container) by right-clicking on it (on a PC) and choosing 'create > create a document here', just like you would normally elsewhere. You can also drag other resources into it, just like in your computer's file management system.

And that should be it.

BTW: as a shortcut to the above way of turning a file into a container, you can always just go to a resource, right-click on it, and create another resource there, as if it was already a container. It will, not only create a contained resource, it will also turn the top resource into a container at the same time, automatically.

Hope this helps. [ed. note: waizen last edited this post 14 years, 5 months ago.]