Php 如何在完整日历的同一单元格中提供多种颜色？

我想创建一个活动日历。楼上和楼下有两个大厅。功能应分为am或pm。楼上上午、楼上下午、楼下上午和楼下下午共有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 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);
    }

---

我自己找到了一种方法，可以提供多种颜色。但不能分裂细胞。我发布它的前提是，当其他人需要这样的东西时，它将帮助他们。我只改变了剧本

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

$（文档）.ready（函数（）{
选择的var\u日期；
var holiday_list=；
var downHall=[]；
var upHall=[]；
var events=[]；//事件数组
$.each（假日列表、函数（键、值）{
事件。推({
title:value.type+value.title，//获取类型（am或pm）
开始：value.date\u cal，//日历的日期
});            
如果（value.title==='Royal Princess舞厅（楼下）&&value.type=='am'）{
向下推({
title:value.title+'（'+value.type+'），//获取类型（am或pm）
开始：value.date\u cal，//日历的日期
颜色：'#FFFF00'，
textColor:“#000603”，
});
}否则如果（value.title==='Royal公主舞厅（楼下）&&value.type==='pm'）{
向下推({
title:value.title+'（'+value.type+'），//获取类型（am或pm）
开始：value.date\u cal，//日历的日期
颜色：“#FE642E”，
textColor:“#000603”，
});
}
否则如果（value.title==='Grand Kings舞厅（楼上）&&value.type=='pm'）{
向上推({
title:value.title+'（'+value.type+'），//获取类型（am或pm）
开始：value.date\u cal，//日历的日期
颜色：“#9FF781”，
textColor:“#000603”，
});
}否则{
向上推({
title:value.title+'（'+value.type+'），//获取类型（am或pm）
开始：value.date\u cal，//日历的日期
颜色：“#31B404”，
textColor:“#000603”，
});
}            
});
/*初始化日历
-----------------------------------------------------------------*/
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
var calendar=$（“#calendar”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
isRTL:$（'body'）.hasClass（'rtl'），//对日历的rtl支持
是的，
selectHelper:对，
选择：功能（开始、结束、全天）{
所选日期=新日期（开始）；
选定的_日期=$.fullCalendar.formatDate（选定的_日期'yyyy-MM-dd'）；
},
是的，
droppable:false，//这允许将内容拖放到日历上！！！
drop:function（date，allDay）{//在删除某些内容时调用此函数
},
按钮文字：{
上一页：''，
下一步：“”
},
eventLimit：对，
活动：下行大厅、康卡特（上行大厅），
});
});

我的输出

---

希望这能帮助那些和我一样挣扎的人。

它似乎没有一个简单的选项来定制你想要的方式。我能想到的唯一办法就是创造一个。你可能需要定制@code jaff是的。我想我们不能把细胞分开。但是你可以改变颜色

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