how to give multiple colors in the same cell in a full calendar?

Question

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.

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.

it should be like this

My current output is like this

following is the script which i use to generate the calendar

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

Model

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

Found a way by my own to give multiple colors. but couldn't divided the cell. i am posting it assuming it will help someone else when they need something like that. i changed only the 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>

My output

Hope this will help someone whose in the same struggle i was.