title: how to give multiple colors in the same cell in a full calendar?
body: <p>I want to create an event calendar. There are two halls in upstairs and downstairs. and functions should be categorized into am or pm. All together there are 4 different colors for upstairs am, upstairs pm, downstairs am and downstairs pm.  </p>
  
  <p>I want to divided the calendar cell into four and give different colors for them. I could retrieve only one color.I am using php codeigniter framework. I am not good in css styles If someone can give me an idea how to that if would be a great help. Thanks in advance.</p>
  
  <p>it should be like this</p>
  
  <p><img src="https://i.stack.imgur.com/30J9q.png" alt="what it should be like"></p>
  
  <p>My current output is like this</p>
  
  <p><img src="https://i.stack.imgur.com/gfX8g.png" alt="my current output"></p>
  
  <p>following is the script which i use to generate the calendar</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          var selected_date;
  
          var holiday_list =&lt;?php echo json_encode($calendar_results); ?&gt;;
  
          var events = []; //The events array
  
          $.each(holiday_list, function(key, value) {
              events.push({               
                  title:value.type, //get the type(am or pm)
                  start: value.date_cal,  //date of the calendar           
              });
          });
  
          /* initialize the calendar
           -----------------------------------------------------------------*/
  
          var date = new Date();
          var d = date.getDate();
          var m = date.getMonth();
          var y = date.getFullYear();
  
          var calendar = $('#calendar').fullCalendar({
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay'
              },
              isRTL: $('body').hasClass('rtl'), //rtl support for calendar
              selectable: true,
              selectHelper: true,
              select: function(start, end, allDay) {
  
                  selected_date = new Date(start);
                  selected_date = $.fullCalendar.formatDate(selected_date, 'yyyy-MM-dd');
  
              },
              editable: true,
              droppable: false, // this allows things to be dropped onto the calendar !!!
              drop: function(date, allDay) { // this function is called when something is dropped
  
              },
              buttonText: {
                  prev: '&lt;i class="fa fa-chevron-left"&gt;&lt;/i&gt;',
                  next: '&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;'
              },
              eventLimit: true,
              events: events
  
          });
  
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Model</p>
  
  <pre><code>function get_all_reservations_for_calendar(){
          $this-&gt;db-&gt;select('reservations.date_cal,reservations.type,reservations.title,reservations.description');
          $this-&gt;db-&gt;from('reservations');
          $this-&gt;db-&gt;where('is_deleted', '0');
          $query = $this-&gt;db-&gt;get();
          return $query-&gt;result();
      }
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>function index() {
          $reservation_service        = new Reservation_service();
          $output['calendar_results'] = $reservation_service-&gt;get_all_reservations_for_calendar();
          $partials                   = array('content' =&gt; 'dashboard/dashboard_view');
          $this-&gt;template-&gt;load('template/main_template', $partials, $output);
      }
  </code></pre>