using different colors or icons for different node types

Changing colors per node type can sort of be done using the built in functionality of the calendar module. If you go to admin/settings/calendar/ click on the calendar view which you want to set up the colors for and then click on Legend, you will see that there is a nice use of the color module on this page that let's you select different colors for each node type that may be displayed in the calendar. Setting a color here makes a stripe visible at the top of each calendar entry. It does not change the background or text color.

A little bug

There's currently what looks to me like a bug when using this. See the attached screenshot, which shows that when these colors are set, it makes text visible which says, "Key Event - {NODE_TYPE}" which looks kinda ugly. I didn't want this text to show, so to fix this on my site, I added this to my css:

.calendar .stripe {
  overflow:hidden;
}

Perhaps that should be included in the calendar.css file too. I'm not sure what the purpose of that text is, so another possibility would be to remove the text all together.

Suggested further improvements

It would be nice to be able to modify the display of the calendar items on a per-node-type basis through the addition of css rules in the website's theme. I don't think this can currently be done because there is no class for each item that includes the node-type in it's selector.

Currently, each item in the calendar gets an HTML id assigned to it like "calendar:197:field_time:3:4" but the class on that div is set to "calendar monthview". This gives no indication of the nodetype. Here is the code as it is output now:

<div id="calendar:197:field_time:3:4" class="calendar monthview">
  <div title="Key: Event - Academy Production" class="stripe" style="background-color: rgb(229, 172, 246); color: rgb(229, 172, 246);">Key Event - Academy Production</div>
  <div class="view-item view-item-events">
    <div class="view-field view-data-node-data-field-time-field-time-value"><span class="date-display-single">8:00 pm</span></div>
    <div class="view-field view-data-node-title"><a href="/events/production/fall-drama-good-times-are-killing-me">Fall Drama: The Good Times are Killing Me</a></div>
  </div>
</div>

Below, I've modified this to reflect another approach that would allow for more flexible theming of the calendars.

• assign a class to each calendar item that identifies the node type. It could also be keyed to the specific calendar so that it's consistent with the admin pages for calendar module. represented by @VIEWNAME-NODETYPE@ in the code below.
• use the color module to write values to a css file that gets included?

<div id="calendar:197:field_time:3:4" class="calendar monthview @VIEWNAME-NODETYPE@">
  <div title="Key: Event - Academy Production" class="stripe">Key Event - Academy Production</div>
  <div class="view-item view-item-events">
    <div class="view-field view-data-node-data-field-time-field-time-value"><span class="date-display-single">8:00 pm</span></div>
    <div class="view-field view-data-node-title"><a href="/events/production/this-is-the-name-of-my-event">This is the Name of my Event</a></div>
  </div>
</div>

and the css would then include the following rule for each node type that has a custom color set for it:

.calendar .@VIEWNAME-NODETYPE@ .stripe {
  background-color: rgb(229, 172, 246); 
  color: rgb(229, 172, 246);
}

Having code like this would make it easy to modify the treatment of items through additional css rules:

/* set the bg of the entire item of the specified node type */
.calendar .@VIEWNAME-NODETYPE@ {
  background-color: rgb(129, 72, 146); 
}
/* set the color of the node title */
.calendar .@VIEWNAME-NODETYPE@ .view-data-node-title {
  color: rgb(255, 255, 255);
}

I think it would also make it easier to extend this type of customization into the administrative UI, making it possible to set multiple variable there, perhaps for stripe color, bg color, text color.

I guess that this is now a feature request and bug report in one. Figured the bug report will take precedence.

The display of the key name was intended to be a usability feature so screen readers could 'read' the stripe, but it created all kinds of display problems and I finally got rid of this in the D6 version. I'm getting rid of it in this version too, so there will no need to hide the text.

Adding additional ways to control stripes won't get added into the D5 version because I'm not adding any new features. The D6 version has more options (content type and taxonomy) and any other changes will go into that version.

I'm going to switch this to a feature request for D6 and will look at it later to see how or if it could be incorporated there.

Hi,

This is interesting; I have a similar theming question.

We have only one node type that appears in the calendar "Event". Events have a taxonomy which controls which stripe colours appear on the calendar - fantastic feature; thanks Karen.

Each event has an event start and end date and time, optionally the submitter can submit a booking deadline (date).

If the booking deadline is populated the node/event has two entries on the calendar. One for the event and one several days/weeks/months before it as the booking deadline place holder.

I have hacked this at the moment; Fields are displayed in the current order:
Booking Deadline - rewritten output to replace field contents with chr(32); custom fieldname to Booking Title
Node Title - default options
Node:Teaser - hidden
Event Date - hidden

This allows for a single configuration to display both booking deadlines and normal entries and it works great, however (why is there always a 'however' or a 'but') my users have requested that we have a different background/foreground colour for the "Booking Deadline"

I can't see any documentation on how to theme the calendar; I have looked at the theme information and I have tonnes of theme tpls for me to look at; but I can't find any of them(not surprising I expect they aren't auto created)...

Here is the info provided by Theme: Information

Calendar page: Theming information

This section lists all possible templates for the display plugin and for the style plugins, ordered roughly from the least specific to the most specific. The active template for each plugin -- which is the most specific template found on the system -- is highlighted in bold.

* Display output: views-view.tpl.php, views-view--deadlines.tpl.php, views-view--calendar.tpl.php, views-view--deadlines--calendar.tpl.php, views-view--calendar-1.tpl.php, views-view--deadlines--calendar-1.tpl.php
* Style output: calendar-main.tpl.php, calendar-main--deadlines.tpl.php, calendar-main--calendar.tpl.php, calendar-main--deadlines--calendar.tpl.php, calendar-main--calendar-1.tpl.php, calendar-main--deadlines--calendar-1.tpl.php
* Field Content: Booking Deadline (field_deadline) (ID: field_deadline_value): views-view-field.tpl.php, views-view-field--field-deadline-value.tpl.php, views-view-field--deadlines.tpl.php, views-view-field--deadlines--field-deadline-value.tpl.php, views-view-field--calendar.tpl.php, views-view-field--calendar--field-deadline-value.tpl.php, views-view-field--deadlines--calendar.tpl.php, views-view-field--deadlines--calendar--field-deadline-value.tpl.php, views-view-field--calendar-1.tpl.php, views-view-field--calendar-1--field-deadline-value.tpl.php, views-view-field--deadlines--calendar-1.tpl.php, views-view-field--deadlines--calendar-1--field-deadline-value.tpl.php
* Field Node: Title (ID: title): views-view-field.tpl.php, views-view-field--title.tpl.php, views-view-field--deadlines.tpl.php, views-view-field--deadlines--title.tpl.php, views-view-field--calendar.tpl.php, views-view-field--calendar--title.tpl.php, views-view-field--deadlines--calendar.tpl.php, views-view-field--deadlines--calendar--title.tpl.php, views-view-field--calendar-1.tpl.php, views-view-field--calendar-1--title.tpl.php, views-view-field--deadlines--calendar-1.tpl.php, views-view-field--deadlines--calendar-1--title.tpl.php
* Field Node: Teaser (ID: teaser): views-view-field.tpl.php, views-view-field--teaser.tpl.php, views-view-field--deadlines.tpl.php, views-view-field--deadlines--teaser.tpl.php, views-view-field--calendar.tpl.php, views-view-field--calendar--teaser.tpl.php, views-view-field--deadlines--calendar.tpl.php, views-view-field--deadlines--calendar--teaser.tpl.php, views-view-field--calendar-1.tpl.php, views-view-field--calendar-1--teaser.tpl.php, views-view-field--deadlines--calendar-1.tpl.php, views-view-field--deadlines--calendar-1--teaser.tpl.php
* Field Content: Event Date & Time (field_eventdatetime) - From date (ID: field_eventdatetime_value): views-view-field.tpl.php, views-view-field--field-eventdatetime-value.tpl.php, views-view-field--deadlines.tpl.php, views-view-field--deadlines--field-eventdatetime-value.tpl.php, views-view-field--calendar.tpl.php, views-view-field--calendar--field-eventdatetime-value.tpl.php, views-view-field--deadlines--calendar.tpl.php, views-view-field--deadlines--calendar--field-eventdatetime-value.tpl.php, views-view-field--calendar-1.tpl.php, views-view-field--calendar-1--field-eventdatetime-value.tpl.php, views-view-field--deadlines--calendar-1.tpl.php, views-view-field--deadlines--calendar-1--field-eventdatetime-value.tpl.php

So; where does it go, and has someone got an example of how I can change the output based on the contents of the cell we are about to output?

We'd like red text and a different colour background initially.

Thanks

Richard
P.S. I forgot to say that I am on D6, V2, C2.1; I posted it here as it seemed related. If I need to move it to a new post please just say so...

Just happened to be looking for the same thing and saw this post. This is fairly trivial to implement by overriding calendar's tpl files. Just override calendar/theme/calendar-[year|month|week|day]-node.tpl.php and add code to include what you'd like on class. Here's an example for the calendar-month-node.tpl.php that adds the node type and taxonomy terms (if pathauto is enabled, cause I'm lazy :D)

<div class="view-item view-item-<?php print $view->name ?>">
<?php 
  $class = 'calendar monthview type-' . $node->type;
  if (module_load_include('inc', 'pathauto') !== FALSE) {
    $full_node = node_load(array('nid'=>$node->nid));
    foreach ($full_node->taxonomy as $term) {
      $class .= ' taxonomy-' . drupal_strtolower(pathauto_cleanstring($term->name));
    }
  }
?>
  <div class="<?php print $class?>" id="<?php print $node->date_id ?>">
    <?php print theme('calendar_stripe_stripe', $node); ?>
    <?php foreach ($fields as $field): ?>
      <div id="<?php print $field['id']; ?>" class="view-field view-data-<?php print $field['id'] ?>">
        <?php if ($field['label']): ?>
          <div class="view-label-<?php print $field['id'] ?>"><?php print $field['label'] ?></div>
        <?php endif; ?>  
        <?php print $field['data']; ?>
      </div>  
    <?php endforeach; ?>
  </div>    
</div>

This may not be super efficient as it's loading the full node.

subscribe

+1 from me too. I'm looking to have different colored text based on the node type (or taxonomy, either way would work for me)

Just wondering if anyone has had any luck making this work yet.

my hack is pretty simple; www.nafof.org.uk/calendar... I haven't got different background colours for different result sets / types yet.

I want to refer to the same node twice (once for the booking deadling and once for the event date time). at the moment I have it grabbing both and adding Booking Deadline before the instances where it is the booking deadline and nothing for the event datetime.

It's a solution of sorts but I'd prefer a subdued background and text colour for booking deadlines and more prominent eventdatetime entries.

itd be great if this could be supported in the module being able to set more details of the presentation. Not sure how this would work though as the template would need to be partially overridden... maybe...

R

Hi richard.e.morton,

I am relatively new at this (this is my first post) so please be gentle. I am working on a site where the user would like the entry deadline to appear as an event on the same calendar as the actual event, but on the deadline date. I am using Calendar2.2, Date2.3, and Views2.6 , Drupal 6.13. It sounds like you have done this:

From your post of 6/14/09:
"If the booking deadline is populated the node/event has two entries on the calendar. One for the event and one several days/weeks/months before it as the booking deadline place holder.

I have hacked this at the moment; Fields are displayed in the current order:
Booking Deadline - rewritten output to replace field contents with chr(32); custom fieldname to Booking Title
Node Title - default options
Node:Teaser - hidden
Event Date - hidden

This allows for a single configuration to display both booking deadlines and normal entries and it works great, however (why is there always a 'however' or a 'but') my users have requested that we have a different background/foreground colour for the "Booking Deadline"
"

I've tried to follow your instructions but I just don't get how you did it. Can you explain your hack one more time and for a newbie?

Thanks so much!

Richard,

Are the booking deadlines a taxonomy term or some other content type?

Izzy

The D6 branch is no longer supported so we're closing this issue. If you think this issue still exists in D7 you can open a new one.