[Solved]CalGuy's Calendar categories

[jasnick]

Using 1.10.2

I know i've posted about this before and have been trying to get it done for months but wondered if anyone has since discovered how to do it.

I have 6 categories in a calendar and want to make their links each a different color. Have tried:

.calendar tr td a
{
color: green;
}
.calendar tr td a .cgcalendar_category_1 {color: green;}
.calendar tr td a .cgcalendar_category_2 {color: red;}
.calendar tr td a .cgcalendar_category_3 {color: blue;}
bit it doesn't work.

Don't know what is the correct way to ID a category - perhaps by name? Such as Meetings, Social Events, Training Courses and so on.

Thanks

[Zoorlat]

This is a CSS question. The correct CSS syntax depends on the template/html you have. If you post a link or the source code for your generated calendar page, it will be much easier to help.

[jasnick]

Sorry, should have done that. I am, not well versed in php, only css and html.

Template: just the Sample as supplied
{strip}

<table class="calendar" id="cal-calendar">
<caption class="calendar-month"><span class="calendar-prev"><a href="{$navigation.prev}">«</a></span> {$month_names[$month]} {$year} <span class="calendar-next"><a href="{$navigation.next}">»</a></span></caption>
<tbody><tr>
{foreach from=$day_names item=day key=key}
<th abbr="{$day}">{$day_short_names[$key]}</th>
{/foreach}</tr>

<tr>
{* initial empty days *}
{if $first_of_month_weekday_number > 0}
<td colspan="{$first_of_month_weekday_number}"> </td>
{/if}

{* iterate over the days of this month *}
{assign var=weekday value=$first_of_month_weekday_number}
{foreach from=$days item=day key=key}
{if $weekday == 7}
{assign var=weekday value=0}
</tr>
<tr>
{/if}
<td {if isset($day.class)}class="{$day.class}"{/if}>
{if isset($day.events.0)}{$key}
<ul>
{foreach from=$day.events item=event}

<li><a href="{$event.url}">{$event.event_title}</a></li>
{/foreach}
</ul>
{else}{$key}{/if}
</td>
{math assign=weekday equation="x + 1" x=$weekday}
{/foreach}

{* remaining empty days *}
{if $weekday != 7}
<td colspan="{math equation="7-x" x=$weekday}"> </td>
{/if}


</tr>
</tbody></table>

{/strip}

CSS: with a few additions I experimented with

/*
Example stylesheet for Calendar module

For using this "big"-class insert something like this in your page
or template;

{cms_module module='Calendar'}

*/


/* make all links green */
.calendar tr td a
{
color: green;
}
.calendar tr td a .cgcalendar_category_1 {color: green;}
.calendar tr td a .cgcalendar_category_2 {color: red;}
.calendar tr td a .cgcalendar_category_3 {color: blue;}
.calendar tr td a .cgcalendar_category_4 {color:#000;}
.calendar tr td a .cgcalendar_category_5 {color: pink;}
.calendar tr td a .cgcalendar_category_6 {color:#ccc;}



/* highlight "today" for the small calendar */
.calendar-today
{
font-weight: bold;
}

/* display the "upcominglist" as one line per entry (assuming default class and id names) */
#cal-upcominglist .calendar-date-title
,#cal-upcominglist .calendar-summary-title
{
display: none;
}

#cal-upcominglist h2
,#cal-upcominglist .calendar-date
,#cal-upcominglist .calendar-summary
{
display: inline;
margin-right: 5px;
}



/* tidy up text sizes for lists */
#cal-list h1, #cal-upcominglist h1
{
color: red;
font-size: 120%;
}
#cal-list h2, cal-upcominglist h2
{
font-size: 110%;
}

/** large calendar rules (assuming default class and id names) **/

/* border on for #cal-calendar */
#cal-calendar{
xmargin: 0 0 0 2em;
border-collapse: collapse;
border: 1px solid #063;
margin: 0 auto;
}

/* nice squares for the #cal-calendar table */
#cal-calendar th
{
color: #603;
border: 1px solid black;
padding: 3px;
width: 75px;
}

#cal-calendar td {
color: #603;
border: 1px solid black;
vertical-align: top;
padding: 3px;
height: 75px;
width: 75px;
}

/* format summaries nicely in #cal-calendar */
#cal-calendar ul
{
margin: 0px;
padding: 0px;
padding-left: 5px;
}

#cal-calendar li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
/*added by me*/
#cal-calendar li a .cgcalendar_category_2 {color: red;}

.calendar .cgcalendar_category_2 {color: red;}

/* background colours for #cal-calendar */
#cal-calendar td
{
background-color: #fff;
}

#cal-calendar .calendar-day
{
background-color: #80ff80;
}

#cal-calendar .calendar-today
{
font-weight: normal;
background-color: #ee9;
}

.calendar-month {padding: 2em; color: #603; font-weight: bold;}

.calendar-event .calendar-date-title,
.calendar-event .calendar-summary-title,
.calendar-event .calendar-details-title
{
display: none;
}
.calendar-event .calendar-summary-title category_4 {color: blue;}
.calendar-event .category_2 {color: blue;}
.calendar-event {width: 850px; margin: 1em 0 0 3em; padding: 0 0 0 3em;}

Thanks

[spcherub]

Are you sure you posted the right template? I'm not able to see where you even print out the category, let alone add custom classes for the links.

S

[jasnick]

Thanks spcherub

I hope I have set things up correctly - not sure what you mean by
"print out the category"?

You can have a look at my calendar at www.mandurahwoodturners.com. Unfortunately since I upgraded, the navigation is not working properly (which I am working on) but you can still access the calendar by using the footer navigation: go to the Meetings/Events page. Once there, if you go to the January calendar, you can see two categories of meetings on the 19th. I really need them to be different colours.

Thanks - I appreciate your time

[spcherub]

In your template, where you have:

Code: Select all

<a href="{$event.url}">{$event.event_title}</a>

replace that with the following:

Code: Select all

<a href="{$event.url}"
{if isset($event.categories)}
class="{foreach from=$event.categories item=category}{$category.category_name} {/foreach}"
{/if}
>{$event.event_title}</a>

What this will do is insert a class for every category that the event is associated with into the <a> tag. The class name will be the same as the category name, so make sure you don't have spaces in your category names. You can then use CSS styling to target the specific classes and alter colors etc.

Code: Select all

.calendar tr td a.cgcalendar_category_1 {color: green;}
.calendar tr td a.cgcalendar_category_2 {color: red;}

Remember that an event can be in multiple categories - the code above will insert all the categories as class names, so in some cases one may override the other. If you only have one category per event, you should be ok.

Hope this helps.
-S

[jasnick]

Thank you so much spcherub

Its getting late - will try it tomorrow when I am more awake!

Thank you. Will post back how I get on.

[jasnick]

Altered the template as you suggested.

Not sure how to write the catgory names. In the Category list I made them all lowercase and used a hyphen when necessary. Eg: committee-meeting and meeting.

Then tried:

.calendar tr td a .cgcalendar_category_committee-meeting {color: red;}
.calendar tr td a .cgcalendar_category_meeting {color: green;}

The calendar is now picking up the "a" styling from the main stylesheet not the Calendar stylesheet.

Thanks

[Zoorlat]

On the site you linked to earlier, you can use this CSS to control the text-colours of your links:

Code: Select all

a.social-event {color:blue}

a.special-event {color:green}

since you know CSS, I guess you know all the other things you can do with the formatting, once you now know how to identify the element

[jasnick]

Oh dear - how simple is that!!! I can't believe it. I was looking at something like

.calendar tr td a .cgcalendar_category_committee-meeting {color: red;}

when all it needed was a simple "a" style.

So thanks to spcherub for setting me right on the template and thanks to you Zoorlat for this!

[Zoorlat]

Happy to help!
please add [Solved] to the topic if you feel it's solved.

z

[jasnick]

Just did that - before I saw your post! Thanks again!