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

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.

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

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.

我想将日历单元格分成四个，并为它们提供不同的颜色。我只能检索一种颜色。我正在使用php codeigniter框架。我不擅长CSS风格如果有人可以给我一个想法，如果这将是一个很大的帮助。提前致谢。

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

1 个解决方案

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

希望这能帮助那些和我一样奋斗的人。