fc-title 不显示在议程周和议程日全日历中

Question

我在 codeigniter 中创建了完整的日历议程。我想问一下，为什么fc-title 不显示在agendaWeek 或agendaDay 中？ fc-title 仅显示在 month 视图中。在agendaWeek 和agendaDay 中，只显示时间开始和时间结束。当我签入inspect element，agendaWeek 和agendaDay，fc-time 之后，它不显示fc-title 选项卡。

这是查看代码

    <div class="tab-pane fade show active" id="nav-agenda" role="tabpanel" aria-labelledby="nav-agenda-tab">

      <div class="header-calendar">
          <div style="float:left">
              <button id="prev" class="btn btn-primary"><</button>
              <button id="next" class="btn btn-primary">></button>
              <button id="my-today-button" class="btn btn-lightblue2">Today</button>
          </div>
          <h2 class="center" id="title" style="font-size: 24px"></h2>
             <div style="float:right">
                <div class="input-group">
                   <span class="input-group-btn">
                      <button id="add_event" class="btn btn-primary" data-toggle="modal" data-target="#newAgenda"> <i class="fa fa-plus-circle" aria-hidden="true"></i> Add </button> &nbsp;
                   </span>
                   <select id="select" class="form-control">
                       <option value="month" selected>
                         Month
                       </option>
                       <option value="agendaDay">
                         Day
                       </option>
                       <option value="agendaWeek">
                         Week
                       </option>
                       <option value="listMonth">
                         All Schedule
                       </option>
                    </select>
                 </div>
                </div>  
              </div>
              <div>
                  <div id="calendar"></div>
                  <div id='datepicker'></div>
              </div>
              <br>
           </div>

这是js代码

 <script type="text/javascript">
    $(document).ready(function(){
    /*============================ FullCalendar ========================*/
    var initialLocaleCode = 'id';
    var calendar = $('#calendar').fullCalendar({
        editable:false,
        header: false,
        events:"<?php echo base_url(); ?>VideoConference/load",
        selectable:true,
        selectHelper:true,
        minTime: "05:00:00",
        maxTime: "24:30:00",
        slotDuration: '00:15',
        slotLabelFormat:"HH:mm",
        height: 500,
        dayMaxEvents: true,
        timeFormat: 'HH:mm',
        
        eventRender: function(events, element, view) { 
            
            element.find('.fc-title').append("<i>" + events.room+"-"+events.class); 
            element.find('.fc-list-item').append("<div style='color:#000'>"); 
            element.find('.fc-list-item-title').append("<i>" + events.room+"-"+events.class);
            var starts = moment().format('YYYY-MM-DD HH:mm');
            var start = moment(events.start).format('YYYY-MM-DD HH:mm');
            var end = moment(events.end).format('YYYY-MM-DD HH:mm');
            if (starts >= start && starts <= end) {
                element.css('background-color', '#00a65a !important;');
                element.css('color', '#fff');
                element.css('border', '5px solid red !important');
            } else if (start <= starts) {
                element.css('background-color', '#707070 !important;');
                element.css('color', '#fff');
                element.css('border', '5px solid red !important');
                element.find('.fc td').css('background-color', '#707070 !important;');
            }
        },
            
        viewRender: (view) => {
            let date = new Date();
            switch (view.type) {
                case 'agendaDay':
                date = view.start.format('DD dddd YYYY')
                break
                case 'agendaWeek':
                date = view.start.format('MMMM')
                break
                case 'month':
                date = view.start.format('MMMM')
                break
                case 'schedule':
                date = view.start.format('MMMM')
                break
            }
            $('#title').text(view.title);
        },
     .....
  </script>

这是控制器代码

 public function load()
 {
    $event_data = $this->calendar->fetch_all_event();
    
    foreach($event_data->result_array() as $row)
    {
        $data[] = array(
            'id' => $row['id'],
            'room' => $row['room'],
            'start' => $row['start_time'],
            'end' => $row['end_time'],
            'class' => $row['class']
        );
    }
    
    echo json_encode($data);
 }

任何帮助将不胜感激。

Answer 1

在事件中添加属性标题

   events: [{
    start: '2020-08-19 08:00:00',
    end: '2020-08-19 10:00:00',
    allDay: true,
    class: 'Full',
    title: 'Maths',
    room: 'Maths',
    textColor: '#000',
    className: 'event-full'
  }, {
    start: '2020-08-20 10:00:00',
    end: '2020-08-20 12:00:00',
    allDay: false,
    class: '2hr',
    room: 'Science',
    title: 'Science',
  }]

然后在 eventRender 中

 element.find('.fc-title').html("<i>" + events.room + "-" + events.class + "</i>");

Working Link