jak nadać wiele kolorów w tej samej komórce w pełnym kalendarzu?

Question

Chcę utworzyć kalendarz wydarzeń. Na górze i na dole są dwie sale. a funkcje powinny być podzielone na am lub pm. Wszystkie razem są 4 różne kolory na górze jestem, na górze po południu, na dole i na dole po południu.

Chcę podzielić komórkę kalendarza na cztery i nadać im różne kolory. Mogłem pobrać tylko jeden kolor. Korzystam ze struktury php codeigniter. Nie jestem dobry w stylach CSS Jeśli ktoś może dać mi pomysł, jak to byłoby wielką pomocą. Z góry dziękuję.

powinno być jak ten

Moja prąd wyjściowy jest podobny do tego

następującym to skrypt, który używam do generowania kalendarza

<script> 
    $(document).ready(function() { 
     var selected_date; 

     var holiday_list =<?php echo json_encode($calendar_results); ?>; 

     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: '<i class="fa fa-chevron-left"></i>', 
       next: '<i class="fa fa-chevron-right"></i>' 
      }, 
      eventLimit: true, 
      events: events 

     }); 


    }); 
</script> 

Mo del

function get_all_reservations_for_calendar(){ 
     $this->db->select('reservations.date_cal,reservations.type,reservations.title,reservations.description'); 
     $this->db->from('reservations'); 
     $this->db->where('is_deleted', '0'); 
     $query = $this->db->get(); 
     return $query->result(); 
    } 

Controller

function index() { 
     $reservation_service  = new Reservation_service(); 
     $output['calendar_results'] = $reservation_service->get_all_reservations_for_calendar(); 
     $partials     = array('content' => 'dashboard/dashboard_view'); 
     $this->template->load('template/main_template', $partials, $output); 
    } 

Answer 1

znalazł sposób przez moją rękę, aby dać wiele kolorów. ale nie mógł podzielić komórki. umieszczam to zakładając, że pomoże to komuś innemu, gdy będzie potrzebować czegoś takiego. zmieniłem tylko skrypt

<script> 
    $(document).ready(function() { 
     var selected_date; 

     var holiday_list =<?php echo json_encode($calendar_results); ?>;   
     var downHall=[]; 
     var upHall=[]; 
     var events = []; //The events array 

     $.each(holiday_list, function(key, value) { 
      events.push({ 
       title: value.type + value.title, //get the type(am or pm) 
       start: value.date_cal, //date of the calendar   
      });    

     if(value.title ==='Royal Princess Ballroom (Downstairs)' && value.type ==='am'){ 
       downHall.push({ 
        title: value.title + ' (' + value.type + ')' , //get the type(am or pm) 
        start: value.date_cal, //date of the calendar 
        color:'#FFFF00', 
        textColor:'#000603', 
       }); 
      }else if(value.title ==='Royal Princess Ballroom (Downstairs)' && value.type ==='pm'){ 
       downHall.push({ 
        title: value.title + ' (' + value.type + ')' , //get the type(am or pm) 
        start: value.date_cal, //date of the calendar 
        color:'#FE642E', 
        textColor:'#000603', 
       }); 
      } 
      else if(value.title ==='Grand Kings Ballroom (Upstairs)' && value.type ==='pm'){ 
       upHall.push({ 
        title: value.title + ' (' + value.type + ')' , //get the type(am or pm) 
        start: value.date_cal, //date of the calendar 
        color:'#9FF781', 
        textColor:'#000603', 

       }); 
      }else{ 
       upHall.push({ 
        title: value.title + ' (' + value.type + ')' , //get the type(am or pm) 
        start: value.date_cal, //date of the calendar 
        color:'#31B404', 
        textColor:'#000603', 
       }); 
      }    

     }); 
     /* 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: '<i class="fa fa-chevron-left"></i>', 
       next: '<i class="fa fa-chevron-right"></i>' 
      }, 
      eventLimit: true,   
      events: downHall.concat(upHall),     

     }); 


    }); 


</script> 

moje wyjście

nadzieję, że pomoże ktoś, kogo w tej samej walce ja.