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

Posted 2023-02-24

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

【英文标题】：how to give multiple colors in the same cell in a full calendar?

【发布时间】：2015-08-30 12:29:09

【问题描述】：

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

【问题讨论】：

它似乎没有一个简单的选项来定制你想要的方式。我能想到的唯一方法是创建一个custom view。您可能需要自定义 DayGrid

@code-jaff 是的。我认为我们不能分割细胞。但可以改变颜色

【参考方案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>

我的输出

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