title: Fullcalendar Dynamic Event Color Through MySQL
body: <p>this is my first post, so be gentle :)</p>
  
  <p>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...</p>
  
  <p>Here's what I'm trying to do:</p>
  
  <ul>
  <li>I am creating a website for my church and using the Fullcalendar class for our scheduler</li>
  <li>Note: Google Calendar is not an option</li>
  <li>I need to be able to set recurring events, and color each event based on whether or not it has been canceled</li>
  </ul>
  
  <p>Here's how far I've gotten:</p>
  
  <ul>
  <li>I have a MySQL database with 8 fields: p_id (for my use only), id, title, start, end, allDay, url, canceled</li>
  <li>I have a PHP file with the following code:</li>
  </ul>
  
  <p>.
      
  
  <pre><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);
  
  ?&gt;
  </code></pre>
  
  <ul>
  <li><p>I also have the following code in my HTML file:</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  
  $(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;
  
      }
  
  });
  
  
  });
  </code></pre>
  
  <p></p></li>
  </ul>
  
  <p>It all works great as far as using the events I have in the database and placing them on the calendar where they belong.</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>Can anyone help?  Please give me a lot of simple steps, because apparently, I'm not that smart :-S</p>
  
  <p><strong>EDIT:</strong>
  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?</p>