fc title不显示在agendaWeek和agendaDay完整日历中

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',
}]

然后在事件中渲染

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

工作链路