title: Change colors of each item in jQuery fullcalendar
body: <p>I am using <a href="http://arshaw.com/fullcalendar/" rel="nofollow noreferrer">Fullcalendar</a> for a planning of each employee. I want a different color for each item corresponding to a different employee.</p>
  
  <p>I added in a jQuery file the following lines:</p>
  
  <pre><code>var couleur = $('span.color').text();
  $('span.color').hide();
  
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  
  var calendar = $('#calendar').fullCalendar({
      theme: true,
      header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay'
      },
      eventClick: updateEvent,
      eventColor:couleur,
      selectable: true,
      selectHelper: true,
      select: selectDate,
      editable: true,
  
      events: "JsonResponse.ashx",
      eventDrop: eventDropped,
      eventResize: eventResized,
      eventRender: function (event, element) {
          //alert(event.title);
  
          element.qtip({
              content: event.description,
              position: { corner: { tooltip: 'bottomLeft', target: 'topleft'} },
              style: {
                  border: {
                      width: 0,
                      radius: 3,
                      color: '#2779AA'
  
                  },
                  padding: 10,
                  textAlign: 'left',
                  tip: true, // Give it a speech bubble tip with automatic corner detection
                  name: 'cream',
                  width: 400,
                  heigth: 600    // Style it according to the preset 'cream' style
              }
          });
      }
  });
  </code></pre>
  
  <p>And in the page that contains the calendar:</p>
  
  <pre><code>&lt;div id="calendar" runat="server"&gt;
      &lt;span id="span1" class="color" runat="server"&gt;red&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in the back-end code :</p>
  
  <pre><code>protected void Page_Load(object sender, EventArgs e)
  {
      //CalendarEvent cevent;
      DataTable dt = new DataTable();
      SqlConnection con2 = new SqlConnection("Data Source=PC;Initial Catalog=base;Persist Security Info=True;User ID=sa;Password=hhh");
      SqlCommand cmd = new SqlCommand("select couleur_planning from cadres where prénom='maher'", con2);
      cmd.CommandType = CommandType.Text;
      // con2.Open()
      SqlDataAdapter adp = new SqlDataAdapter(cmd);
      adp.Fill(dt);
      span1.InnerText ="";
  
      span1.InnerText = dt.Rows[0]["couleur_planning"].ToString();
  }
  </code></pre>
  
  <p>And it does not work. It colors all event colors by last color. <a href="https://stackoverflow.com/questions/5668248/how-i-change-events-background-color-with-different-colors-in-fullcalendar">I saw a similar question</a> and that's exactly what I want but I need to do it programmatically (I'm using the last version of <em>fullcalendar</em>).</p>
  
  <p>Data are extracted from that class: </p>
  
  <pre><code>public static List&lt;CalendarEvent&gt; getEvents(DateTime start, DateTime end)
  {
      //  string listcheck = HttpContext.Current.Session["listcheck"].ToString();
      List&lt;CalendarEvent&gt; events = new List&lt;CalendarEvent&gt;();
      SqlConnection con = new SqlConnection(connectionString);
      string sql;
      sql = "select D.date_deb as deb,D.date_fin as fin ,M.code as code,M.Objet as ob,M.type_mission as t,M.ville," +
  "  M.Etat_mission,prénom,'Mission' AS type,S.nom  from Mission_date D  inner join missions M on " +
     " M.code=D.code_mission inner join mission_cadre C on D.code_mission=C.code_mission inner join cadres on cadres.code=C.code_cadre" +
      " join sociétés S on S.code=M.code_client " +
   "   where  ((D.Date_deb&gt;='" + start + "' and D.Date_deb&lt;='" + end + "')  OR (D.Date_fin&gt;='" + start + "' and D.Date_fin&lt;='" + end + "')) and " +
        " C.code_cadre In (select code from cadres)   union select tache_date.date_deb,tache_date.date_fin ,taches.code,Objet,type_tache,'',Etat_tache,prénom,'Tache' AS type,''  from tache_date " +
      "inner join taches on taches.code=tache_date.code_tache inner join tache_cadre C on tache_date.code_tache=C.code_tache inner join cadres on cadres.code=C.code_cadre where " +
       "((tache_date.Date_deb&gt;='" + start + "' and tache_date.Date_deb&lt;='" + end + "')  OR (tache_date.Date_fin&gt;='" + start + "' and tache_date.Date_fin&lt;='" + end + "')) and  C.code_cadre In (select code from cadres) " +
  "union select Réunions.DateRéunion + Réunions.HeureDébut,Réunions.DateRéunion + Réunions.HeureFin ,Réunions.code,Réunions.Objet,''," +
   " '','',prénom,'Réunion' AS type,'' from Réunions  inner join réunion_cadre on .."
  
      SqlCommand cmd = new SqlCommand(sql, con);
            using (con)
      {
          con.Open();
          SqlDataReader reader = cmd.ExecuteReader();
          while (reader.Read())
          {
  
              CalendarEvent cevent = new CalendarEvent();
              // cevent.id = (Int32 )reader["code"];
              cevent.title = (string)reader[8] + ":" + "|" + SearchForChar((string)reader[7]) + "|" + SearchForChar((string)reader[9]) + "|" + SearchForChar((string)reader[6]) + "|" + SearchForChar((string)reader[4]) + "|" + SearchForChar((string)reader[3]) + "|" + SearchForChar((string)reader[5]) + "|";
              cevent.description = (string)reader[8] + ":" + "|" + (string)reader[7] + "|" + (string)reader[9] + "|" + (string)reader[6] + "|" + (string)reader[4] + "|" + (string)reader[3] + "|" + (string)reader[5] + "|";
              cevent.start = (DateTime)reader["deb"];
              cevent.end = (DateTime)reader["fin"];
              cevent.ApplyColor(Color.Aqua);
              events.Add(cevent);
  
          }
      }
      return events;
       }
  </code></pre>
  
  <p>And the JSON file :</p>
  
  <pre><code>public void ProcessRequest(HttpContext context)
  {
      context.Response.ContentType = "application/json";
  
      DateTime start = new DateTime(1970, 1, 1);
      DateTime end = new DateTime(1970, 1, 1);
  
      start = start.AddSeconds(double.Parse(context.Request.QueryString["start"]));
      end = end.AddSeconds(double.Parse(context.Request.QueryString["end"]));
  
  
      String result = String.Empty;
  
      result += "[";
  
      List&lt;int&gt; idList = new List&lt;int&gt;();
      foreach (CalendarEvent cevent in EventDAO.getEvents(start, end))
      {
          result += convertCalendarEventIntoString(cevent);
          idList.Add(cevent.id);
      }
  
      if (result.EndsWith(","))
      {
          result = result.Substring(0, result.Length - 1);
      }
  
      result += "]";
      //store list of event ids in Session, so that it can be accessed in web methods
      context.Session["idList"] = idList;
  
      context.Response.Write(result);
  }
  
  private String convertCalendarEventIntoString(CalendarEvent cevent)
  {
      String allDay = "true";
      if (ConvertToTimestamp(cevent.start).ToString().Equals(ConvertToTimestamp(cevent.end).ToString()))
      {
  
          if (cevent.start.Hour == 0 &amp;&amp; cevent.start.Minute == 0 &amp;&amp; cevent.start.Second == 0)
          {
              allDay = "true";
          }
          else
          {
              allDay = "false";
          }
      }
      else
      {
          if (cevent.start.Hour == 0 &amp;&amp; cevent.start.Minute == 0 &amp;&amp; cevent.start.Second == 0
              &amp;&amp; cevent.end.Hour == 0 &amp;&amp; cevent.end.Minute == 0 &amp;&amp; cevent.end.Second == 0)
          {
              allDay = "true";
          }
          else
          {
              allDay = "false";
          }
      }
      return    "{" +
                "id: '" + cevent.id + "'," +
                "title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
                "start:  " + ConvertToTimestamp(cevent.start).ToString() + "," +
                "end: " + ConvertToTimestamp(cevent.end).ToString() + "," +
                "allDay:" + allDay + "," +
                "description: '" + HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" +
                "},";
  }
  
  
  public bool IsReusable
  {
      get
      {
          return false;
      }
  }
  
  private long ConvertToTimestamp(DateTime value)
  {
  
  
      long epoch = (value.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
      return epoch;
  
  }
  }
  </code></pre>