come assegnare più colori nella stessa cella in un calendario completo?

Question

Voglio creare un calendario degli eventi. Ci sono due sale al piano di sopra e al piano di sotto. e le funzioni dovrebbero essere categorizzate in am o pm. Tutti insieme ci sono 4 colori diversi per il piano di sopra, al primo piano, al piano di sotto e al pomeriggio.

Voglio dividere la cella del calendario in quattro e dare loro colori diversi. Potrei recuperare solo un colore. Sto usando il framework php codeigniter. Non sono bravo in stile CSS Se qualcuno mi può dare un'idea di come sarebbe se fosse di grande aiuto. Grazie in anticipo.

dovrebbe essere come questo

La mia uscita di corrente è come questo

segue è lo script che uso per generare il calendario

<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

trovato un modo dalla mia per dare più colori. ma non poteva dividere la cella. lo sto postando supponendo che aiuterà qualcun altro quando ha bisogno di qualcosa del genere. ho cambiato solo lo script

<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> 

La mia uscita

Spero che questo vi aiuterà qualcuno di cui nella stessa lotta ero.