Client brief:

Show the different coloured backgrounds to events based on tags

Method:

first go to admin/content/taxonomy/add/vocabulary and create a new taxonomy called calendar >

link it to event node type and add terms eg dropin, office, outreach, shop that reflect the

type of events that you wish to highlight.

then at node/add/event create a few test events all with different taxonomy terms

at admin/settings/date-time/formats add a new format g:ia and link it to a new format type

hourmin_g:ia > save

at admin/build/views/list > enable calendar view and edit > in fields remove updated date and

add from date > style hourmin_g:ia and Taxonomy (Term)

Go to /calendar and ensure that you can see the test events albeit all in the same colours.

make a backup copy calendar-month-node.tpl.php in sites\all\modules\calendar\theme folder and

then edit the original line 42 thus:

  <div class="calendar monthview" id="<?php print $node->date_id ?>">

becomes

  <div class="calendar monthview  color-<?php print $node->term_data_tid; ?>" id="<?php print $node->date_id ?>">

then add the following to your theme's style.css > in color-[number] replace my numbers with your relevant taxonomy term numbers

/*
* Color of calendar
*/
.calendar-calendar td .inner div.color-72 div,
.calendar-calendar td .inner div.color-72 div a {
  border:none;
  background: #FFE7CF;
  padding:0 2px;
}

.calendar-calendar td .inner div.color-73 div,
.calendar-calendar td .inner div.color-73 div a {
  border:none;
  background: #FFE7FF;
  padding:0 2px;
}

.calendar-calendar td .inner div.color-74 div,
.calendar-calendar td .inner div.color-74 div a {
  border:none;
  background: #DDFFFF;
  padding:0 2px;
}

.calendar-calendar td .inner div.color-75 div,
.calendar-calendar td .inner div.color-75 div a {
  border:none;
  background: #E7FFE7;
  padding:0 2px;
}

an example can be seen at http://ubercart.venturacottage.com/calendar/2010-07

Tags: 

Add new comment

More information about text formats

Filtered HTML

  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Strips broken/unpublished internal links from output.
  • Adds node titles to internal links found in content (as HTML "title" attribute).
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.