如何在完整日历的同一单元格中赋予多种颜色？

Question

我想创建一个活动日历。楼上楼下有两个大厅。功能应分为上午或下午。楼上上午、楼上下午、楼下上午和楼下下午总共有 4 种不同的颜色。

我想将日历单元格分成四个并为它们分配不同的颜色。我只能检索一种颜色。我正在使用 php codeigniter 框架。我不擅长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);
    }

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>

我的输出

希望这会帮助那些与我一样挣扎的人。