एक पूर्ण कैलेंडर में एक ही सेल में एकाधिक रंग कैसे देना है?

Question

मैं एक ईवेंट कैलेंडर बनाना चाहता हूं। ऊपर और नीचे की ओर दो हॉल हैं। और कार्यों को am या pm में वर्गीकृत किया जाना चाहिए। सभी एक साथ ऊपर के लिए 4 अलग-अलग रंग हैं, ऊपर की ओर, नीचे की ओर और नीचे की ओर।

मैं कैलेंडर सेल को चार में विभाजित करना चाहता हूं और उनके लिए अलग-अलग रंग देना चाहता हूं। मैं केवल एक रंग पुनर्प्राप्त कर सकता था। मैं php codeigniter ढांचे का उपयोग कर रहा हूँ। मैं सीएसएस शैलियों में अच्छा नहीं हूं अगर कोई मुझे एक विचार दे सकता है कि अगर यह एक बड़ी मदद होगी। अग्रिम में धन्यवाद।

यह इस

मेरे वर्तमान उत्पादन इस

निम्नलिखित की तरह है की तरह होना चाहिए स्क्रिप्ट जो मैं कैलेंडर

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

उत्पन्न करने के लिए इस्तेमाल करते हैं

मो डेल

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(); 
    } 

नियंत्रक

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

अपने ही द्वारा एक तरह से कई रंग देने के लिए मिला। लेकिन सेल विभाजित नहीं कर सका। मैं इसे मान रहा हूं कि यह किसी और की मदद करेगा जब उन्हें ऐसा कुछ चाहिए। मैं केवल स्क्रिप्ट

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

मेरे उत्पादन

आशा इसी संघर्ष मैं था में किसी जिसका मदद मिलेगी बदल दिया है।