как дать несколько цветов в одной ячейке в полном календаре?

Я хочу создать календарь событий. Наверху и внизу есть два зала. и функции должны быть разделены на am или pm. Все вместе есть 4 различных цвета для верхнего утра, верхнего вечера, Нижнего утра и нижнего вечера.

Я хочу разделить ячейку календаря на четыре и дать им разные цвета. Я смог восстановить только один цвет.Я использую PHP codeigniter framework. Я не очень хорош в стилях css, если кто-то может дать мне идею, как это сделать, если бы большое подспорье. Заранее спасибо.

Это должно быть так

на что это должно быть похоже

Мой текущий выход таков

мой нынешний выход

Ниже приведен сценарий, который я использую для создания календаря

<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);
    }
1 5
css php codeigniter fullcalendar

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>

Мой вывод

Введите описание изображения здесь

Надеюсь, это поможет кому-то, кто в той же борьбе был и я.
1