title: fullcalendar (jquery + json + php) - save div color attribute to mysql
body: <p>So I managed to follow one of the tutorials for the fullcalendar script to hook up the jquery based calendar to my MySQL database, allowing me to write and read calendar events into the database.
  The variables handed over from jquery to mysql are things such as the unique event ID, start date, end date, title, etc. but sadly, not the tab color of the event. Since I am using draggable "external events", which basically are draggable  buttons that you can drag n drop onto the calendar (which naturally all have different colors), I am now having the problem that I cannot make fullcalendar extract the color of the div and then pass it over via PHP into my MySQL database.</p>
  
  <p>So here is the question:
  How can I adjust the jquery script to extract the <code>var color = event.backgroundColor;</code> variable and add it on to my php script?</p>
  
  <p>I have no clue about jquery nor javascript, hence would really appreciate help. I also tried to throw a few bucks towards a freelance programmer but even he ultimately gave up.</p>
  
  <p>Here the code I have so far:</p>
  
  <p>Fullcalendar script in calendar.php</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
  
          var zone = "08:00";  //Change this to your timezone
  
      $.ajax({
          url: 'process.php',
          type: 'POST', // Send post data
          data: 'type=fetch',
          async: false,
          success: function(s){
              json_events = s;
          }
      });
  
  
      var currentMousePos = {
          x: -1,
          y: -1
      };
          jQuery(document).on("mousemove", function (event) {
          currentMousePos.x = event.pageX;
          currentMousePos.y = event.pageY;
      });
  
          /* initialize the external events
          -----------------------------------------------------------------*/
  
          $('#external-events .external-event').each(function() {
  
              // store data so the calendar knows to render an event upon drop
              $(this).data('event', {
                  title: $.trim($(this).html()), // use the element's text as the event title
                  //color: $.trim($(this).backgroundColor()), // use the element's bgcolor as the events background
                  stick: true // maintain when user navigates (see docs on the renderEvent method)
              });
  
              // make the event draggable using jQuery UI
              $(this).draggable({
                  zIndex: 999,
                  revert: true,      // will cause the event to go back to its
                  revertDuration: 0  //  original position after the drag
              });
  
          });
  
  
          /* initialize the calendar
          -----------------------------------------------------------------*/
  
          $('#calendar').fullCalendar({
              events: JSON.parse(json_events),
              //events: [{"id":"14","title":"New Event","start":"2015-01-24T16:00:00+04:00","allDay":false}],
              utc: true,
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay'
              },
              editable: true,
              droppable: true, 
              slotDuration: '00:30:00',
              eventReceive: function(event){
                  var title = event.title;
                  var start = event.start.format("YYYY-MM-DD[T]HH:mm:SS");
                  var color = event.backgroundColor;
                  $.ajax({
                      url: 'process.php',
                      data: 'type=new&amp;title='+title+'&amp;startdate='+start+'&amp;zone='+zone+'&amp;color='+color,
                      type: 'POST',
                      dataType: 'json',
                      success: function(response){
                          event.id = response.eventid;
                          $('#calendar').fullCalendar('updateEvent',event);
                      },
                      error: function(e){
                          console.log(e.responseText);
  
                      }
                  });
                  $('#calendar').fullCalendar('updateEvent',event);
                  console.log(event);
              },
              eventDrop: function(event, delta, revertFunc) {
                  var title = event.title;
                  var start = event.start.format();
                  var end = (event.end == null) ? start : event.end.format();
                  var color = event.backgroundColor;
                  $.ajax({
                      url: 'process.php',
                      data: 'type=resetdate&amp;title='+title+'&amp;start='+start+'&amp;end='+end+'&amp;eventid='+event.id+'&amp;color='+color,
                      type: 'POST',
                      dataType: 'json',
                      success: function(response){
                          if(response.status != 'success')                            
                          revertFunc();
                      },
                      error: function(e){                     
                          revertFunc();
                          alert('Error processing your request: '+e.responseText);
                      }
                  });
              },
              eventClick: function(event, jsEvent, view) {
                  console.log(event.id);
                    var title = prompt('Event Title:', event.title, { buttons: { Ok: true, Cancel: false} });
                    if (title){
                        event.title = title;
                        console.log('type=changetitle&amp;title='+title+'&amp;eventid='+event.id);
                        $.ajax({
                              url: 'process.php',
                              data: 'type=changetitle&amp;title='+title+'&amp;eventid='+event.id,
                              type: 'POST',
                              dataType: 'json',
                              success: function(response){    
                                  if(response.status == 'success')                            
                                      $('#calendar').fullCalendar('updateEvent',event);
                              },
                              error: function(e){
                                  alert('Error processing your request: '+e.responseText);
                              }
                          });
                    }
              },
              eventResize: function(event, delta, revertFunc) {
                  console.log(event);
                  var title = event.title;
                  var end = event.end.format();
                  var start = event.start.format();
                  var color = event.backgroundColor;
                  $.ajax({
                      url: 'process.php',
                      data: 'type=resetdate&amp;title='+title+'&amp;start='+start+'&amp;end='+end+'&amp;eventid='+event.id+'&amp;color='+color,
                      type: 'POST',
                      dataType: 'json',
                      success: function(response){
                          if(response.status != 'success')                            
                          revertFunc();
                      },
                      error: function(e){                     
                          revertFunc();
                          alert('Error processing your request: '+e.responseText);
                      }
                  });
              },
              eventDragStop: function (event, jsEvent, ui, view) {
                  if (isElemOverDiv()) {
                      var con = confirm('Are you sure to delete this event permanently?');
                      if(con == true) {
                          $.ajax({
                              url: 'process.php',
                              data: 'type=remove&amp;eventid='+event.id,
                              type: 'POST',
                              dataType: 'json',
                              success: function(response){
                                  console.log(response);
                                  if(response.status == 'success'){
                                      $('#calendar').fullCalendar('removeEvents');
                                      getFreshEvents();
                                  }
                              },
                              error: function(e){ 
                                  alert('Error processing your request: '+e.responseText);
                              }
                          });
                      }   
                  }
              }
  
          });
  
      function getFreshEvents(){
          $.ajax({
              url: 'process.php',
              type: 'POST', // Send post data
              data: 'type=fetch',
              async: false,
              success: function(s){
                  freshevents = s;
              }
          });
          $('#calendar').fullCalendar('addEventSource', JSON.parse(freshevents));
      }
  
  
      function isElemOverDiv() {
          var trashEl = jQuery('#trash');
  
          var ofs = trashEl.offset();
  
          var x1 = ofs.left;
          var x2 = ofs.left + trashEl.outerWidth(true);
          var y1 = ofs.top;
          var y2 = ofs.top + trashEl.outerHeight(true);
  
          if (currentMousePos.x &gt;= x1 &amp;&amp; currentMousePos.x &lt;= x2 &amp;&amp;
              currentMousePos.y &gt;= y1 &amp;&amp; currentMousePos.y &lt;= y2) {
              return true;
          }
          return false;
      }
  
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>calendar.php - > external events aka the draggable event buttons</p>
  
  <pre><code>  &lt;div class="box box-solid"&gt;
      &lt;div class="box-header with-border"&gt;
        &lt;h4 class="box-title"&gt;Draggable Audits&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="box-body"&gt;
        &lt;!-- the events --&gt;
        &lt;div id="external-events"&gt;
          &lt;div class="external-event bg-aqua"&gt;FO Check-In&lt;/div&gt;
          &lt;div class="external-event bg-blue"&gt;FO Check-Out&lt;/div&gt;
          &lt;div class="external-event bg-light-blue"&gt;HSKP Room&lt;/div&gt;
          &lt;div class="external-event bg-teal"&gt;Fitness Centre&lt;/div&gt;
          &lt;div class="external-event bg-yellow"&gt;Reservation&lt;/div&gt;
          &lt;div class="external-event bg-orange"&gt;F+B Breakfast&lt;/div&gt;
          &lt;div class="external-event bg-green"&gt;F+B A La Carte&lt;/div&gt;
          &lt;div class="external-event bg-lime"&gt;F+B Chinese&lt;/div&gt;
          &lt;div class="external-event bg-red"&gt;F+B Chinese PDR&lt;/div&gt;
          &lt;div class="external-event bg-purple"&gt;FO Club IC&lt;/div&gt;
          &lt;div class="external-event bg-fuchsia"&gt;F+B Lobby Lounge&lt;/div&gt;
          &lt;div class="external-event bg-muted"&gt;Ballroom Event&lt;/div&gt;
          &lt;div class="external-event bg-navy"&gt;SEC Fire Drill&lt;/div&gt;
  
          &lt;div class="checkbox"&gt;
            &lt;label for="drop-remove"&gt;
              &lt;input type="checkbox" id="drop-remove"&gt;
              remove after drop
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;button id="trash" type="button" class="btn btn-primary btn-danger btn-lg"&gt;DRAG HERE TO DELETE&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.box-body --&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>process.php script that handles the reading and writing into the MySQL table
  (Note: fetching the color field works fine, but I have no way of writing the color data into the table since I cant extract the <code>event.backgroundcolor()</code> variable from jquery)</p>
  
  <pre><code>&lt;?php
  session_start();
  
  include '../plugins/MySQL/connect_db.php';
  $con = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
  
  $type = $_POST['type'];
  $holidex = $_SESSION['Holidex'];
  
  if($type == 'new')
  {
      $startdate = $_POST['startdate'].'+'.$_POST['zone'];
      $title = $_POST['title'];
      $color = $_POST['color'];
      $insert = mysqli_query($con,"INSERT INTO calendar(`title`, `startdate`, `enddate`, `allDay`, `color`, `holidex`) VALUES('$title','$startdate','$startdate','true','$color','$holidex')");
      $lastid = mysqli_insert_id($con);
      echo json_encode(array('status'=&gt;'success','eventid'=&gt;$lastid));
  }
  
  if($type == 'changetitle')
  {
      $eventid = $_POST['eventid'];
      $title = $_POST['title'];
      $update = mysqli_query($con,"UPDATE calendar SET title='$title' where id='$eventid' and holidex='$holidex'");
      if($update)
          echo json_encode(array('status'=&gt;'success'));
      else
          echo json_encode(array('status'=&gt;'failed'));
  }
  
  if($type == 'resetdate')
  {
      $title = $_POST['title'];
      $startdate = $_POST['start'];
      $enddate = $_POST['end'];
      $eventid = $_POST['eventid'];
      $update = mysqli_query($con,"UPDATE calendar SET title='$title', startdate = '$startdate', enddate = '$enddate', holidex = '$holidex' where id='$eventid' and holidex='$holidex'");
      if($update)
          echo json_encode(array('status'=&gt;'success'));
      else
          echo json_encode(array('status'=&gt;'failed'));
  }
  
  if($type == 'remove')
  {
      $eventid = $_POST['eventid'];
      $delete = mysqli_query($con,"DELETE FROM calendar where id='$eventid' and holidex='$holidex'");
      if($delete)
          echo json_encode(array('status'=&gt;'success'));
      else
          echo json_encode(array('status'=&gt;'failed'));
  }
  
  if($type == 'fetch')
  {
      $events = array();
      $query = mysqli_query($con, "SELECT * FROM calendar where holidex='$holidex'");
      while($fetch = mysqli_fetch_array($query,MYSQLI_ASSOC))
      {
      $e = array();
      $e['id'] = $fetch['id'];
      $e['title'] = $fetch['title'];
      $e['start'] = $fetch['startdate'];
      $e['end'] = $fetch['enddate'];
  
      $allday = ($fetch['allDay'] == "true") ? true : false;
      $e['allDay'] = $allday;
  
      $e['color'] = $fetch['color'];
      array_push($events, $e);
      }
      echo json_encode($events);
  }
  
  
  ?&gt;
  </code></pre>