Wie man mehrere Farben in der gleichen Zelle in einem vollen Kalender gibt?

Question

Ich möchte einen Ereigniskalender erstellen. Es gibt zwei Hallen im Obergeschoss und im Erdgeschoss. und Funktionen sollten in am oder pm kategorisiert werden. Alle zusammen gibt es 4 verschiedene Farben für die oberen, am oberen und unteren, unten und am Abend.

Ich möchte die Kalenderzelle in vier teilen und verschiedene Farben für sie geben. Ich könnte nur eine Farbe abrufen. Ich verwende PHP Codeigniter-Framework. Ich bin nicht gut in CSS-Stile Wenn jemand mir eine Idee geben kann, wie das, wenn eine große Hilfe wäre. Danke im Voraus.

es wie dies

sein sollte

Meine aktuelle Ausgabe wie diese ist

finden Sie das Skript, das ich verwende, um den Kalender zu generieren

<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

einen Weg durch meine eigenen Gefunden mehrere Farben zu geben. aber konnte die Zelle nicht teilen. Ich poste es, vorausgesetzt, es wird jemand anderem helfen, wenn sie so etwas brauchen. i verändern nur das Skript

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

Mein Ausgang

Hope this jemanden, das im gleichen Kampf helfen wird ich war.