Fullcalendar Dynamic Event Color Through MySQL

Question

this is my first post, so be gentle :)

I am brand new to PHP, MySQL, and JQUERY, but I have a lot of experience programming with AS3, Java, and C++, so I have some frame of reference to how some of this stuff works...

Here's what I'm trying to do:

I am creating a website for my church and using the Fullcalendar class for our scheduler
Note: Google Calendar is not an option
I need to be able to set recurring events, and color each event based on whether or not it has been canceled

Here's how far I've gotten:

I have a MySQL database with 8 fields: p_id (for my use only), id, title, start, end, allDay, url, canceled
I have a PHP file with the following code:

.

//--------------------------------------------------------------------------
// Example php script for fetching data from mysql database
//--------------------------------------------------------------------------
$host = "fakehost";
$user = "fakeuser";
$pass = "fakepwd";

$databaseName = "fake_db";
$tableName = "tbl_calendar";

//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);

//--------------------------------------------------------------------------
// 2) Query database for data
//--------------------------------------------------------------------------
$query = "SELECT id,title,start, DATE_FORMAT(start, '%Y-%m-%d %H:%i' ) AS startDate, end, url FROM $tableName ORDER BY startDate DESC";
$result = mysql_query($query) or die(mysql_error());

$array = array();
while($row = mysql_fetch_assoc($result)){
$array[] = $row; 
}  

//--------------------------------------------------------------------------
// 3) echo result as json 
//--------------------------------------------------------------------------
echo json_encode($array);

?>

I also have the following code in my HTML file:

<script type='text/javascript'>

$(document).ready(function() {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: false,

    allDayDefault: false,

    url: true,

    timeFormat: 'h(:mm)t', // uppercase H for 24-hour clock
    agenda: 'h(:mm)t' , // 5:00 - 6:30
    '': 'h(:mm)t', // for all other views

    events: "../data/get_calendar.php",
    eventDrop: function(event, delta) {
        alert(event.title + ' ha sido movido ' + delta + ' dias\n' + '(should probably update your database)');

    },

    loading: function(bool) {
        if (bool) $('#loading').show();
        else $('#loading').hide();
    },

    eventClick: function(calEvent, jsEvent, view) {

         //alert('Event: ' + calEvent.title);
         //alert('Url: ' + calEvent.url);
         //alert('View: ' + view.name);

         window.open(calEvent.url, blank);
         return false;

    }

});


});

It all works great as far as using the events I have in the database and placing them on the calendar where they belong.

The problem is that I'm trying to add specific CSS classes to each event. I would like canceled events to be Red, for example (versus deleting them).

I have looked through a lot of material. Read a lot about event sources and I just don't get it... I can't make it work. Ideally, I'd like to add another field to my database and just have it apply a class name or color automatically. I can apply colors through hard code, but I just don't understand how to do it through the database.

Can anyone help? Please give me a lot of simple steps, because apparently, I'm not that smart :-S

EDIT: I have tried to add a field called "className" and I've written corresponding CSS rules. I thought that would do it, but when I inspect the element, I don't see the className anywhere... I don't think it's applying it automatically from the MySQL database. I also tried Brotherli's suggestion below, but can't get that to work either (probably user error). Perhaps I need to change some of my fullcalendar jquery code?

$query = "SELECT id,title,start, DATE_FORMAT(start, '%Y-%m-%d %H:%i' ) AS startDate, end, url FROM $tableName ORDER BY startDate DESC"; why are you not including 'Canceled' in this query. You should do it to use value of 'canceled' if false make background-color of your row or where-ever you are fetching it(I could not get it) as red — Sami
You are echo-ing(writing/displaying) your record using php and jquery on a web page from database. right? Delete some comments. As we are not allowed to chat much. — Sami
Yes, the end of my php file does this: echo json_encode($array); The html file imports it using this line: events: "../data/get_calendar.php" — Ephezius

brotherli brotherli · Accepted Answer · 2012-09-18T14:18:30

You can define CSS classes on a per-event basis. See attribute 'className' in http://arshaw.com/fullcalendar/docs/event_data/Event_Object/

Change your PHP code to something like

while($row = mysql_fetch_assoc($result)){
    if ($row['deleted'])
        $row['className'][] = 'deleted';
    if ($row['canceled'])
        $row['className'][] = 'canceled';
    $array[] = $row; 
}

Alternatively you can also add CSS classes on the client using the eventRender callback.

Fullcalendar Dynamic Event Color Through MySQL

1 Answers