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

  ));?>

This is working fine.

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>

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

回答1:

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>

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

回答2:

There are several event handlers in full calendar plugin:

eventClick
eventMouseEnter
eventMouseLeave

So you can try

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

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

));?>

来源：https://stackoverflow.com/questions/58050155/yii2-fullcalendar-add-a-popup-to-element

标签

javascript

yii2

fullcalendar