laravel-fullcalendar icon indicating copy to clipboard operation
laravel-fullcalendar copied to clipboard

Using Bootstrap Popover with eventMouseover

Open blackjarnold opened this issue 7 years ago • 7 comments
trafficstars

Hello!

Thanks maddhatter for this awesome package!

So I want to use Bootstrap's Popover method with FullCalendar. I want to do like this: screen shot 2018-01-31 at 12 46 09

So far I have this in my EventsController: screen shot 2018-01-31 at 12 44 35

As it is not possible to use load bootstrap in the controller, how should I do this? Is it possible to call a function from the view?

I am quite new to Laravel, so any help would be appreciated!

Thanks!

blackjarnold avatar Jan 31 '18 11:01 blackjarnold

Use the callback 'eventRender'. Something like this:

'eventRender' => 'function eventRender(event,element,view) {
  element.popover({ ...

guillermobt avatar Feb 02 '18 13:02 guillermobt

I'll give that a try. Thank you!

blackjarnold avatar Feb 02 '18 18:02 blackjarnold

Do I put it inside the eventMouseover callback? Another issue is that I can't put html inside the eventRender because of the quotations. :/

blackjarnold avatar Feb 02 '18 20:02 blackjarnold

guillermobt your method is not working, any help on the topic ?

powolnymarcel avatar Apr 12 '18 09:04 powolnymarcel

Hello, I have the same problem since several days a "tooltip" or a "mouseover" are impossible ... Nothing on Web I despair ... help me

Iperia17 avatar Apr 26 '18 14:04 Iperia17

Yep I tried this exact same method before I found this. Anytime you set eventRender at all it bombs. I tried putting the function directly in the string like above, also tried calling a pre-made javascript function called popit. Both failed with the same error:

$calendar = Calendar::addEvents($events) ->setOptions([ 'eventRender' => "popit" ]);

app.js:77086 Uncaught TypeError: optHandler.apply is not a function at Calendar.publiclyTrigger (app.js:77086) at MonthView.DateComponent.publiclyTrigger (app.js:76514) at DayGridEventRenderer.EventRenderer.filterEventRenderEl (app.js:72138) at HTMLAnchorElement. (app.js:72098) at Function.each (app.js:5302) at jQuery.fn.init.each (app.js:5137) at DayGridEventRenderer.EventRenderer.renderFgSegEls (app.js:72094) at DayGridEventRenderer.EventRenderer.renderFgRanges (app.js:72018) at DayGridEventRenderer.EventRenderer.render (app.js:72007) at SubClass.DateComponent.executeEventRender (app.js:76581)

nickpoulos avatar Oct 28 '18 01:10 nickpoulos

Here is an example for bootstrap tooltip

$calendar = Calendar::addEvents($events)->setOptions(['firstDay' => 1])->setCallbacks(['eventRender' => 'function (event,jqEvent,view) {jqEvent.tooltip({placement: "top", title: event.title});}']);

Also , I added some css because the tooltip was not fully visible:

.tooltip { position: fixed; }

simeonbugarija avatar Jun 17 '19 21:06 simeonbugarija