Skip to main content

Every event its own color!

warning

This tutorial applies to Events Manager version 3 downwards and is marked for revision. It is currently kept here for posterity and demonstrating how one can extend Events Manager in different ways.

In version 5, you can now acheive the same effect by combining the category #_CATEGORYCOLOR placeholder with inline CSS styling in your event formats.

A client of mine came in with a request to assign a custom colour to each event. 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 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(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.