Skip to main content
Kinetic Community

Kinetic Calendar Colors

What defines the Kinetic Calendar Colors and how can I change them?

Usage

For versions before 2.0, the Colors that Kinetic Calendar uses are defined in the kinetic.js file.  This file can be found in the following location on your Web Server:

MYWEBSERVER\webapps\KinCal\js\kinetic.js

The function that defines the colors is called buildColors and it contatins the following syntax:

    // build calendar colors
    function buildColors() {
        var colors, i;

        // define the first 28 colors
        colors = [
            '#7EA30B','#437899','#C45B00','#1E4866','#E4B716','#1E6648','#060674','#94720C',
            '#A83B25','#0C5FEC','#662200','#33CC66','#FFCC66','#000000','#7EA30B','#437899',
            '#C45B00','#1E4866','#E4B716','#1E6648','#060674','#94720C','#A83B25','#0C5FEC',
            '#662200','#33CC66','#FFCC66','#000000'];

        // all calendars / event types / filter values above 28 will all
        // have the same color
        for (i = 0; i < 996; i += 1) {
            colors.push("#E48E0C");
        }
        return colors;
    }
  

Please note that Kinetic Calendar will use the colors defined in the colors array in the specified order.

Example

If you want the color Red (#FF0000) to appear first you would need to change the colors array to the following:

    // build calendar colors
    function buildColors() {
        var colors, i;

        // define the first 29 colors Red being the First
        colors = [
            '#FF0000','#7EA30B','#437899','#C45B00','#1E4866','#E4B716','#1E6648','#060674','#94720C',
            '#A83B25','#0C5FEC','#662200','#33CC66','#FFCC66','#000000','#7EA30B','#437899',
            '#C45B00','#1E4866','#E4B716','#1E6648','#060674','#94720C','#A83B25','#0C5FEC',
            '#662200','#33CC66','#FFCC66','#000000'];

        // all calendars / event types / filter values above 28 will all
        // have the same color
        for (i = 0; i < 996; i += 1) {
            colors.push("#E48E0C");
        }
        return colors;
    }

Calendar 2.X

In Calendar versions 2.0 and greater, there are two files that need to be modified.

MYWEBSERVER\webapps\KineticCalendar\resources\js\debug\core.js

This file will look and need to be modified like that from the previous version, described above. There is also a minified js file, used when not running in debug that will need to be modified:

MYWEBSERVER\webapps\KineticCalendar\resources\js\application-min.js

This file will be significantly less friendly to modify. First, if you break this, you break the entire application most likely, not just the colors. Back this up before making changes. Second, the file will look something like this when you open it up:

There is nothing wrong with the file or your editor. This is the minified file. If you search for the value of orange in the above function (#E48E0C), you will find the code you need:

function V(y){var d,m;d=["#7EA30B","#437899","#C45B00","#1E4866","#E4B716","#1E6648","#060674","#94720C","#A83B25","#0C5FEC","#662200","#33CC66","#FFCC66","#000000","#7EA30B","#437899","#C45B00","#1E4866","#E4B716","#1E6648","#060674","#94720C","#A83B25","#0C5FEC","#662200","#33CC66","#FFCC66","#000000"];if(y){d=d.reverse();}for(m=0;m<996;m+=1){d.push("#E48E0C");}return d;}

You will want to make the same sort of edit to this array, adding the color(s) you want. For example

function V(y){var d,m;d=["#FF0000","#7EA30B","#437899","#C45B00","#1E4866","#E4B716","#1E6648","#060674","#94720C","#A83B25","#0C5FEC","#662200","#33CC66","#FFCC66","#000000","#7EA30B","#437899","#C45B00","#1E4866","#E4B716","#1E6648","#060674","#94720C","#A83B25","#0C5FEC","#662200","#33CC66","#FFCC66","#000000"];if(y){d=d.reverse();}for(m=0;m<996;m+=1){d.push("#E48E0C");}return d;}

Note the double quotes here instead of single quotes. 

No restart is necessary to see your updates.