yii2 fullcalendar向元素添加一个弹出窗口 [英] yii2 fullcalendar add a popup to element

问题描述

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

I was able to add the event description using the code

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

使用此链接中答案的帮助-

using the help from answer from this link - yii2 Fullcalendar - Why is alert for CalEvent working but not for updating innerHtml?

现在，我试图在鼠标悬停事件上添加与弹出窗口相同的内容.

Now I am trying to add the same as popup on mouseover event.

<?= \yii2fullcalendar\yii2fullcalendar::widget(array(
      'events'=> $events,
      'id'=>'calendar',

       'clientOptions' => [ 
        'editable' => true,
        'eventSources' => ['/eventcalendar/index'],
        'draggable' => true,
        'droppable' => true,
        'eventClick' => new JsExpression('JSEventClick'),
        ],

  ));?>

这很好.

和相关的html看起来像这样:

and the related html looks like this:

<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中的信息在鼠标悬停时显示为弹出窗口.

How I can achieve this that is the info in calEvent.nonstandard.field1 show as popup on mouseover.

推荐答案

我找到了对我有用的解决方案，希望其他人会觉得有用.

I found the solution which is working for me and hope other will find it useful.

 <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <?= \yii2fullcalendar\yii2fullcalendar::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是控制器中的事件数组中传递的非标准字段.

here field1 is the non standard field passed in events array in controller.

这篇关于yii2 fullcalendar向元素添加一个弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！