title: Fullcalendar js event color as json
body: <p>I am using fullcalendar and I am able to display events sourcing from a json stream with rails.
  <a href="https://fullcalendar.io/docs/events-json-feed" rel="nofollow noreferrer">https://fullcalendar.io/docs/events-json-feed</a></p>
  
  <p>Now I would like to set the color of a specific event as it's shown in the example. I am specifying it in the json like so:</p>
  
  <pre><code>[{"id"=&gt;101, "style"=&gt;"Phone Call", "location"=&gt;"", "created_at"=&gt;Tue, 26 May 2020 14:31:08 UTC +00:00, "updated_at"=&gt;Tue, 26 May 2020 15:17:48 UTC +00:00, "summary"=&gt;"test", "organizer"=&gt;"somePerson", "job_id"=&gt;194, "start"=&gt;Mon, 27 Jan 2020 18:00:00 UTC +00:00, "title"=&gt;"test", "contacts"=&gt;[], "eventColor="=&gt;"#06fff7"}]
  </code></pre>
  
  <p>Note that "eventColor="=>"#06fff7" is set. </p>
  
  <p>However, it always displays all events in the same color... not the one specified.</p>
  
  <p>Is it possible to set the event color using the json stream?</p>
  
  <p>I have played with different options such as using colro, backgroundColor etc. I have used hex values or color names (e.g. 'yellow').</p>
  
  <p>No success. I really don't see what I am doing wrong.</p>
  
  <p>Any help is appreciated.</p>
  
  <p>=== UPDATE ===</p>
  
  <p>here is the json that is received by the browser:</p>
  
  <pre><code>eventColor: "yellow"
  contacts: []
  created_at: "2020-05-26T14:31:08.663Z"
  id: 102
  location: ""
  organizer: "som eperson "
  start: "2020-01-27T18:00:00.000Z"
  style: null
  summary: "test"
  title: "test"
  updated_at: "2020-05-26T14:31:08.738Z"
  </code></pre>
  
  <p>the information is displayed properly. However, the color is not recognized.</p>
  
  <p>I am initializing the calendar like so:</p>
  
  <pre><code>var calendar = new Calendar(calendarEl, {
      header: { center: 'dayGridMonth,timeGridWeek,listMonth' },
      plugins: [ listPlugin, timeGridPlugin, dayGridPlugin, bootstrapPlugin ],
      defaultView: 'dayGridMonth',
      height: 'auto',
      width: 'auto',
      editable: true,
      scrollTime: '08:00:00',
      themeSystem: 'bootstrap',
      events: '/jobs/' + jobId +  '/interviews.json',
  
      }
  </code></pre>
  
  <p>I removed the bootstrap theme to see if that makes a difference but it does not.</p>