Issue 446: Easier Event Colorization
Status:  Duplicate
Merged:  issue 117
Owner: ----
Closed:  Apr 2010
Reported by pierre.b...@gmail.com, Apr 14, 2010
At the moment you can change the event colours in the css and/or by
creating new css classes.

I am generating my calendar from a php script and I would like to randomly
add different colours to the different events.
The events are generated from the database and I cannot achieve this with
css classes!

Would it be possible to have it as an event option like:

events: [
		{
			title: 'All Day Event',
			start: new Date(y, m, 1),
                        bgcolor: black,
                        color: white
		},
		{
			title: 'Long Event',
			start: new Date(y, m, d-5),
			end: new Date(y, m, d-2),
                        bgcolor: red,
                        color: white
		},
        ]


Kind regards
Apr 26, 2010
#1 marcin.m...@gmail.com
You can simply generate css classes on your main page in <head> section using php or
whatever server-side language you use and name those classes like .class_ffffff for
white and include in it color: #ffffff; After that you can use the same loop to add
this class to each event that you generate in your ajax script. You know the color -
you know the class that you have to use (white color #ffffff - use class .class_ffffff)
I hope this is clear for you.

Regards,
Marcin
Apr 26, 2010
Project Member #2 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Duplicate
Mergedinto: 117
Apr 26, 2010
#4 pierre.b...@gmail.com
as I said in my original post, I know you can use the css classes.

I understand what you mean, but the question is, how do you "randomly" generate 
classes with this class names...
 You said "You can simply generate css classes on your main page in <head> section 
using php or whatever server-side language you use and name those classes like 
.class_ffffff for white and include in it color: #ffffff;"

Maybe you know a "simple" solution to achieve this, but right now I don't see one, so 
a pseudo-code version of your solution would be welcome.

I still think it would be easier to have the color as an event option.
Apr 27, 2010
#5 marcin.m...@gmail.com
First you should create an array with colours you want to use (and store it in
session so you can use it later in your ajax script):

eg. index.php
-------------
$_SESSION['colors'] = array("ffffff", "c0c0c0", "444444");

In <head> section in your html do something like this:

<style type="text/css">
<?php
foreach($_SESSION['colors'] as $color)
{
  echo '.class_'.$color.', ';
  echo '.fc-agenda .class_'.$color.' .fc-event-time,'; 
  echo '.class_'.$color.' a {';
  echo 'border-style: solid;'; 
  echo 'background-color: #'.$color.';';
  echo 'border-color: #'.$color.';';
  echo 'color: #fff;'; 
  echo '}';
}
?>
</style>

Loop above will generate classes that you can use within FullCalendar. Now you should
be getting events from your database in ajax script.

eg. ajax/events.php
-------------------
<?php
$sql = mysql_query('SELECT * FROM events');
$events = array();
while($row = mysql_fetch_assoc($sql))
{
  // you wanted it random
  shuffle($_SESSION['colors']);

  // create temp array with available options
  $calendar_styling = array('allDay' => true, 'editable' => false, 'className' =>
'class_'.$_SESSION['color'][0]);

  // merge it with your events array
  $events[] = array_merge($row, $calendar_styling);

}

// echo json encoded events or whatever you are doing to get it on your calendar
echo json_encode($events);
?>

Haven't tried it, but should work. Hope this is what you wanted.
Apr 27, 2010
#6 pierre.b...@gmail.com
Hehe yes that will do thanks you very much for you support! :)