Yii2 全日历 在元素中添加弹出窗口

Question

>我能够使用代码添加事件描述

<script>
var JSEventClick = (function(calEvent, jsEvent, view) {
for (var element of document.getElementsByClassName('fc-title')) {
element.innerHTML += calEvent.nonstandard.field1
}
});
</script>

使用此链接中的答案的帮助 - yii2 完整日历 - 为什么 CalEvent 的警报有效，但更新 innerHtml 无效？

现在我正在尝试添加与鼠标悬停事件弹出窗口相同的内容。

<?= yii2fullcalendaryii2fullcalendar::widget(array(
'events'=> $events,
'id'=>'calendar',
'clientOptions' => [ 
'editable' => true,
'eventSources' => ['/eventcalendar/index'],
'draggable' => true,
'droppable' => true,
'eventClick' => new JsExpression('JSEventClick'),
],
));?>

这工作正常。

相关的 HTML 如下所示：

<td class="fc-event-container">
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable">
<div class="fc-content"> 
<span class="fc-title">IPS Annual Day</span></div>
<div class="fc-resizer fc-end-resizer"></div></a></td>

我如何实现这一目标，即calEvent.nonstandard.field1中的信息在鼠标悬停时显示为弹出窗口。

Answer 1

我找到了对我有用的解决方案，并希望其他人会发现它很有用。

<?php // echo $this->render('_search', ['model' => $searchModel]); ?>
<?= yii2fullcalendaryii2fullcalendar::widget([
'events' => $events,
'eventRender' => new JsExpression(
<<<'JS'
(eventObj, $el)=>{
$el.popover({
title: eventObj.title,
content: eventObj.nonstandard.field1,
trigger: 'hover',
placement: 'top',
container: 'body'
});
}
JS
)
]);
?>
</div>

此处 field1 是在控制器的事件数组中传递的非标准字段。

Answer 2

完整日历插件中有几个事件处理程序：

• 事件点击
• 事件鼠标输入
• 事件鼠标离开

所以你可以试试

<?= yii2fullcalendaryii2fullcalendar::widget(array(
'events'=> $events,
'id'=>'calendar',
'clientOptions' => [ 
'editable' => true,
'eventSources' => ['/eventcalendar/index'],
'draggable' => true,
'droppable' => true,
'eventMouseEnter' => new JsExpression('JSEventClick'),
],

((;？>