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:

<?php
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(document).ready(function(){ 
			jQuery('#event_attributes').hide(); 
			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); 
			jQuery('#colorpicker').colorPicker({ 
				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){
					jQuery('input[name=mtm_1_name]').val(color);
				} 
			}); 
		});
	</script>
	<?php 
} ?>

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…