Hi, I read the documentation regarding event coloring and place the php snippet in my theme, but I was wondering would be able to give a more detailed step by step on creating different colors for different content types or in this case taxonomy terms. What would be the css necessary to create this? Thanks so much for your help.

Comments

tim.plunkett’s picture

Status: Active » Fixed

The code snippet there adds classes for the node type and all taxonomy terms.

For example, to make a taxonomy term with a term ID of 1 turn red, the CSS you would have to write would be:

.fc-event-tid-1,
.fc-event-tid-1 .fc-event-time,
.fc-event-tid-1 a {
  background-color: #FF0000;
}

The FullCalendar Colors submodule is only currently available to the 7.x-2.x branch. It might get ported to the 6.x-2.x branch, but 6.x-1.x is in bug-fix-only mode.

CinemaSaville’s picture

So are you saying this won't work for 6.x-1.x? I'd update to 6.x-2.x, but it required Views 3 and since I'm on a multi-site I can't afford to upgrade as Views 3 broke one of my production sites.

tim.plunkett’s picture

No, I'm saying that the above snippet is how it's done in 6.x-1.x. It should work great

There is a separate module for 7.x-2.x called "FullCalendar Colors" that you can use to do the coloring.

CinemaSaville’s picture

Thanks, Tim. Would the snippet to change it based on Content type of article read something like

.fc-event-type-article,
.fc-event-type-article .fc-event-time,
.fc-event-type-article a {
background-color: #FF0000;
}

tim.plunkett’s picture

yes, but you would have to implement your own theme hook

function THEMENAME_fullcalendar_classname($node){
  return 'fc-event-type-' . $node->type;
}

Then that CSS would work great.

CinemaSaville’s picture

Where would I put that code, in my template.php? Thanks so much for your tutelage, it's really helping. And is my css correct?

tim.plunkett’s picture

Yes, that would go in your template.php. Remember to clear the cache afterward. And the CSS looks good from here.

robcarr’s picture

And here's a template.php snippet for coloring according to OG:

<?php
function [theme_name]_fullcalendar_classname($node) {
  $className = array(
    'fc-event-default',
    $node->type,
  );
  // Organic Group IDs for coloring
  foreach ($node->og_groups as $gid) {
    $className[] = 'fc-event-gid-' . $gid;
  }
  return implode(' ', $className);
}
?>

#forwhatitsworth

CinemaSaville’s picture

I don't know why, but it didn't work when I put in that theme hook you gave me and the css.

In the template.php I put

function fusion_core_fullcalendar_classname($node){
return 'fc-event-type-' . $node->type;
}

Then in the local.css I put

.fc-event-type-catering,
.fc-event-type-catering .fc-event-time,
.fc-event-type-catering a {
background-color: #FF0000;
}

And it still looks the same as the default color. Is there something I may have missed? Thanks.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Crom’s picture

I think I am going crazy having stared at this for hours and I'd really appreciate a big kick in the right direction before I jump out of the window ;-) ... and probably one in the butt for being an idiot.

Everything is working fine, the views are lovely, the calendar looks wicked (even if I am stuck at 6.1.4 for various reasons).

In my template.php I have:

function sg_fullcalendar_classname($node) {
   return 'fc-event-type-' . $node->type;
}

I can trace this being called three times for my three content types.

Then in the CSS I have entries like this for the three content types:

.fc-event-type-meeting,
.fc-agenda .fc-event-type-meeting .fc-event-time,
.fc-event--type-meeting a {
  border-color: #000000;
  border-style: solid;
  background-color: #000000;
  color: #fff;
}

I copied the above from the fullcalendar.custom.css file.

The best I have managed to achieve - pathetic isn't it(!!) is that I've managed to get the background of the time element in one of the content type entries to go black with this:

.fc-event-type-lostandfound,
.fc-event-type-lostandfound .fc-event-time,
.fc-event-type-lostandfound a {
  background-color: #001100;
  border-color: none;
  color: inherit;
}

I cannot for the life of me work out how to get different coloured bars for different content types.
Please someone take pity on me because if I clear the cache one more time the server's going to pack up.
Thanks,
Crom

Crom’s picture

Status: Closed (fixed) » Active

sorry...I'm desperate (and forgot to open the issue).

CinemaSaville’s picture

Yeah, this never worked for me either. So it would be great to get some clarification.

aspilicious’s picture

In the color module we use the following css code

function _fullcalendar_colors_build_css_string($class, $color) {
  $css = ' .' . $class . ',';
  $css .= ' .' . $class . ' .fc-event-skin,';
  $css .= ' .' . $class . ' .fc-event-time,';
  $css .= ' .' . $class . ' a';
  $css .= '{background-color: ' . $color . '; border-color: ' . $color . ';}';
  return $css;
}

So to turn this in working css for you.

.fc-event-type-meeting,
.fc-event-type-meeting .fc-event-skin,
.fc-event-type-meeting .fc-event-time,
.fc-event-type-meeting a {
  border-color: #000000;
  border-style: solid;
  background-color: #000000;
  color: #fff;
}

This works for the color module in drupal 7, so I guess it should work for you as well :)

Btw, what version of fullcalendar are you using?

CinemaSaville’s picture

Status: Active » Fixed

That totally works! Thanks so much! Perfect.

aspilicious’s picture

I added some more information on the doc page.

http://drupal.org/node/1056752

Crom’s picture

Nice one. Thanks aspilicious

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.