zem_event_calendar - colour coded categories

Alex007 · 2008-08-05 21:14:05

Hi All

I have just started using the zem_events and was wondering if it possible to do the following:

I am displaying the large calendar and have set up 5 different categories for events. I want each event to have its own custom colour just like google maps, for example i have the following:

news – red
sport – blue
music – green

…and so on.

Is it possible to add a class to one of the elements (possibly the ul class=“zem_event_list”) around the event – and that class be the event category name?

Thanks for any help or advice

A.

pepebe · 2008-08-06 09:21:22

Hi Alex007,

the actual display of events within a calendar is handled by the zem_event_cal_entry form.

Under specific circumstances, you can use <txp:zem_event_categorie /> to give each event a individual css style.

To do that, each event should belong to only one event category AND the event category has to be a single word. So if the event belongs to the category “News of the World” this will not work, while “News” will be fine.

OK, here we go…

Example:

<div class="<txp:zem_event_categories link="0" />">
<txp:zem_event_permlink wraptag="" >
<txp:zem_event_name label="Event" wraptag="" /></txp:zem_event_permlink>
<txp:zem_event_time label="Time" wraptag="" />
</div>

Thanks to <txp:zem_event_categories />, the enclosing <div> will get a class attribute carrying the name of the event’s category.

Note: Make sure to set link=“0” or you will get an ugly url added to your class…

Now you only have to write some lines into your css stylesheet like…

.News {background-color: red;}
.Sport {background-color: blue;}
.Music {background-color: green;}

As mentioned above, if your event category names are made up from multiple words and or an event belongs to moe than one category, you MIGHT have a problem with this approach.

Example:

eventname: iron man
event categories: sports, swimming, cycling, running, “iron man”

As a result you will get a enclosing div like that:

<div class=“sports swimming cycling running iron man”

This might become difficult to style…

Good luck

pepebe

P.S. There is some kind of discussion going on about some experimental hacks I introduced to zem_event: http://forum.textpattern.com/viewtopic.php?id=20796&p=59

Last edited by pepebe (2008-08-06 09:54:45)

pepebe · 2008-08-06 09:59:14

Hi Alex007,

Forget everything I told you about category names made up from multiple words.

“News of the World” is not a problem, if you apply some inline php to your form:

<div class="
<txp:php>
$cat= zem_event_categories (array('link' => '0'));
$class=strtr ($cat," ","_");
echo $class;
</txp:php>
">

As a result of our little php trick, you will get instead of “News of the World” a neat “News_of_the_World” entry in your class attribute.

The rest remains unchanged:

<txp:zem_event_permlink wraptag="" >
<txp:zem_event_name label="Event" wraptag="" /></txp:zem_event_permlink>
<txp:zem_event_time label="Time" wraptag="" />
</div>

Again, good Luck!

pepebe

P.S. If you have problems wih this trick, you should have a look at your textpattern preferences (admin->preferences-advanced).

P.P.S I should have thought of this approach right from the beginning. If you want to read something about this kind of textpattern magic, have a look at this wonderful article

Last edited by pepebe (2008-08-06 11:41:18)

Alex007 · 2008-08-06 16:57:25

Hi Pepebe,

Thanks for your replies – i am sure it will be very helpful once i get it working!
Am not sure what i am doing wrong but its not adding the categories.

This is what i have in my calendar template

<txp:zem_event_calendar />

And this shows the big calendar with the events – the event is linking to the article and below it i have the event start time like so Time: 09:30:00 – not sure why i its rendering the extra :00 but thats another issue ;(

So i’m not too sure where to add this code:

<div class="<txp:php> $cat= zem_event_categories (array('link' => '0')); $class=strtr ($cat," ","_"); echo $class; </txp:php> "> <txp:zem_event_permlink wraptag="" > <txp:zem_event_name label="Event" wraptag="" /></txp:zem_event_permlink> <txp:zem_event_time label="Time" wraptag="" /> </div>

Am i completely missing something here – i originally got the example from here

Thanks again for your help.
A.

pepebe · 2008-08-06 18:03:09

Two problems, one solution.

Because I have the feeling that you are new to textpattern and its magical ways some extensive explanation…

The way a bit of information contend is presented can be controlled by a form.

Surely you have seen something like this before

<txp:some_tag ... form="some_form" />

Forms can be used by tags, by other forms or even functions.

zem_event_calendar is just one of the many functions within zem_event. If you don’t tell it otherwise it will use the “zem_event_cal_entry” form to display its content.

So, if you want to change the way information is presented within the calendar, you can either change the standard form or create your own form instead. I would suggest to create your own one.

Go to Presentation->Forms

On the right side you will find a a list of forms. Among them a form called “zem_event_cal_entry”. Click it and it will open in the textarea in the middle.

<txp:zem_event_permlink wraptag="" >
<txp:zem_event_name label="Event" wraptag="" />
</txp:zem_event_permlink>

<txp:zem_event_time label="Time" wraptag="" />

These few lines define the information you will display for each event within a calendar.

It starts with a link to the event. You do this with zem_event_permlink. Normally you could write anything between its start and end tag, but instead you use zem_event_name to insert the name of the event itself. Finally you display the starting time of the event with zem_event_time.

This is the basic form you will find after installing zem_event.

Now lets create our own form. First copy the form to your clipboard. Then click the “Create new form” Link on the upper right side. Paste the content of your clipboard ito the empty textfield.

Give the new form a name. I would recomend to start the name with your initials. This makes it later easier for you to see whats your work and whats not.

As type choose “misc”

Hit the save button.

You now have your own working copy of zem_event_cal_entry.

To find out if it works copy something like this into your page template:

<txp: zem_event_calendar form="the_name_of_your_form" />

Now your calendar will use your new form to display events.

Lets start with getting rid of that horrible 08:00:00 time entry.

You can control the way zem_event_time is displayed by applying the “format” attribute.

Example:

<txp:zem_event_time format="%X" />

This will result in the exact same timeformat as before (for example: 08:00:00).

Try format=”%H:%M” and you will see 08:00 instead.

The same thing can be done with zem_event_date, zem_event_finish_time and zem_event_finish date. More about time formating can be found here

For a list of event information you could also put into your form, have a look here

I think you get the idea by now.

If you want to get the kind of output we were talking about earlier, copy the following code into your new form and thats it.

<div class=”
<txp:php>
$cat= zem_event_categories (array('link' => '0'));
$class=strtr ($cat," ","_");
echo $class;
</txp:php>
">
<txp:zem_event_permlink wraptag="" >
<txp:zem_event_name label="Event" wraptag="" />
</txp:zem_event_permlink>
<br>
<txp:zem_event_time label="Time" format="%H:%M" />
</div>

Good Luck!

pepebe

Last edited by pepebe (2008-08-06 18:07:07)

Alex007 · 2008-08-06 19:07:15

Brilliant i am now on the same page – not sure what happened, could be the result of me celebrating my birthday at the weekend!
That explanation was perfect to make the brain tick! i now have it working exactly as i want it ;p)

pepbe your a star

Thanks so much for the time to help
A.

pepebe · 2008-08-06 20:15:05

Happy Birthday Alex, happy happy Birthday!

Textpattern CMS

Textpattern CMS support forum

#1 2008-08-05 21:14:05

zem_event_calendar - colour coded categories

#2 2008-08-06 09:21:22

Re: zem_event_calendar - colour coded categories

#3 2008-08-06 09:59:14

Re: zem_event_calendar - colour coded categories

#4 2008-08-06 16:57:25

Re: zem_event_calendar - colour coded categories

#5 2008-08-06 18:03:09

Re: zem_event_calendar - colour coded categories

#6 2008-08-06 19:07:15

Re: zem_event_calendar - colour coded categories

#7 2008-08-06 20:15:05

Re: zem_event_calendar - colour coded categories

Board footer