Every event its own color!

Posted on October 6, 2010

Colourful requests

A client of mine came in with a weird request.

  • I want to assign a custom colour to each event!
  • (mumble mumble, might be trouble..) Ehr, hum, Are you sure you do need this?
  • I am!

End of negotiations.

At first I thought I was going to have to mod Events Manager and frankly I wasn’t so happy with the idea. Modding means breaking the autoupdate feature, next time I push out a new Events Manager I’ll have to mod again etc etc.

But then I had an idea.

Attributes to the rescue!

What if I use attributes to implement this feature?
I might assign a color attribute to events, and then use it to style the events item in the list!

Thanks to Marcus’s clever implementation, this was super easy.

After making sure attributes were enabled, I changed the *Default event list format* ins the *Settings* page.
I set it to:

 <li>#D #j #M #Y - #H:#i<br/><a href='#_EVENTPAGEURL' style='color: #_ATT{color}{FF6103}'>#_NAME</a></li>

As you see, I included my custom `color` into the style attribute of the `a` element.

So back I went to adding events, and I saw a nice text field for entering hexadecimal color values.

Did I say nice? Hum…

Color picking

Of course you cannot tell a client to open his app or webservice of choice to translate his favourite hue into an hex code. Javascript color pickers were invented exactly to spare you the such an hassle.

After a few tests I settled with using the [Syronex jQuery Color Picker](http://www.syronex.com/software/jquery-color-picker) because it has pretty much what I had been looking for: it is simple, and yet allows the customizaiton of the text and the colors array. This is the road I took, but if you need a super powerful color picker you can just mod my code and tweak the Syronex-related parts.

So I put the Syronex plugin into the js folder of my theme, and then added this to my theme `functions.php` file:

if (isset ( $_GET ['action'] ) && ($_GET ['action'] == 'edit_event') || isset ( $_GET ['page'] ) && ($_GET ['page'] == 'new_event'))
	add_action ( 'admin_head', 'fa_mod_em' );
function fa_mod_em() {
	<script src="<?php bloginfo ( 'stylesheet_directory' ); ?>/js/syronex-color-picker/syronex-colorpicker.js" type="text/javascript" charset="utf-8"></script>
	<link rel='stylesheet' id='color-picker-css' href='<?php bloginfo ( 'stylesheet_directory' ); ?>/js/syronex-color-picker/syronex-colorpicker.css' type='text/css' media='all' />
	<script type="text/javascript" charset="utf-8"> 
			jQuery('#side-sortables').prepend("<div class='postbox'>\n\t<div class='handlediv' title='Fare clic per cambiare.'><br /></div><h3 class='hndle'><span>colore evento</span></h3><div class='inside'><div id='colorpicker'>ciao</div><br/>Seleziona il colore dell'evento</div></div>"); 
			colors = new Array( "#FF6103", "#FFFFFF", "#FF0000", "#FFFF88", "#ACC475", "#6BBA70", "#006E2E", "#738B9C", "#4096EE", "#356AA0", "#FF0096", "#B02B2C", "#000000" ); 
			selectedColor = jQuery.inArray(jQuery('input[name=mtm_1_name]').val(), colors); 
				defaultColor: selectedColor, 
				// index of the default color (optional) 
				columns: 13, // number of columns (optional) 
				color: colors, // list of colors (optional) 
				// click event - selected color is passed as arg. 
				click: function(color){
} ?>

The code might look scary but it does something pretty simple. It hides the *Events Manager* attributes `div` and tells the Syronex plugin which colors to use and where to put the user’s choice.

This is not just cool, this is unobtrusive!

Believe it or not, this worked. And, most importantly, I didn’t need to touch a line of *Events Manager*, so now I can safely upgrade the client website to *Events Manger* 3.0.

What about the client?

He was happy, until the next request…


  1. Ian.... says:

    and if i would like to asign a colour to each category, is that possible?

  2. Vito says:

    I am trying to implement with 4.0rc1. Is there anything I might be missing? Thanks.

    • Vito says:

      Sorry, my previous post was very unclear. I am having trouble implementing what is described above. I have inserted the code correctly within the Default event list format and the new field appears when I create a new event. However, whatever color I insert in the new color field does not get applied. Is there anything that should be done differently when trying to implement with 4.0rc1? Any help would be appreciated.

    • marcus says:

      This is probably out of date now for 4.x (this was actually written by Davide back in version 2.x)

      I’m in the middle of writing tutorials, so will revisit this asap, but you probably want to change this:


      to this:


      although not sure that’ll work if you have more than one attribute.

Interested in Events Manager?

Sign up to our newsletter, receive a free add-on and an additional 10% discount for Pro!

You will receive a confirmation email which you must click on, you will then be sent another welcome email with links to your discount and free add-on.