CODEWITHSUNDEEP
jquerytwitter-bootstrapfullcalendarpopover
Apostolos
Apostolos

Reputation: 8101

Having a bootstrap3 popover appearing in the bottom of an event in fullcalendar

I am using fullcalendar jquery as a calendar in my app. I want to be able to render a popover when user hovers over an event. I want the popover to hover right of the event in the month view and bottom in the agenda and day view. My code is the following. 

$(document).ready(function (){
    $("#calendar").fullCalendar({
        header:{
            left:'prev today next',
            center:'title',
            right:'month, agendaWeek, agendaDay'
        },
        slotEventOverlap:false,
        allDaySlot:false,
        axisFormat:'HH:mm',
        slotMinutes:15,
        events: '/calendar/eventsfeed',
        eventMouseover:function (calEvent){
            $(this).popover({
                trigger:'hover',
                title:calEvent.title,
                content:calEvent.description,
                container:"body"
            });
        },
        dayRender:function (date, cell){

        },
        dayClick:function (date, allDay){
            if (allDay){
                $("#calendar").fullCalendar('changeView', 'agendaDay');
                $("#calendar").fullCalendar('gotoDate',date);
            }else{
                month = date.getMonth()+1
                hours = date.getHours() >= 10 ? date.getHours() : "0"+date.getHours();
                minutes = date.getMinutes() >= 10 ? date.getMinutes() : "0"+date.getMinutes();
                window.location = '/calendar/entry/create/'+date.getFullYear()+'/'+month+'/'+date.getDate()+'/'+hours+':'+minutes;
            }

        },
        agenda:{
            eventMouseover:function(calEvent){
                $(this).popover({
                    trigger:'hover',
                    title:calEvent.title,
                    content:calEvent.description,
                    container:"body",
                    placement:'bottom'
                });
            },
        },
        day:{
            eventMouseover:function(calEvent){
                $(this).popover({
                    trigger:'hover',
                    title:calEvent.title,
                    content:calEvent.description,
                    container:"body",
                    placement:'bottom'
                });
            }
        }
    });
});

I don't know how to load fullcalendar in bootply so to use it with bootstrap 3. The problem is that popover always renders on right no matter if i tell it to render in bottom...How can i change this behavour?

Upvotes: 2

Views: 2548

Answers (2)

Triple_6
Triple_6

Reputation: 89

Try replace "placement" with "top" :

$(this).popover({
                  title: event.title + eventort,
                  placement: 'top',
                  trigger: 'manual',
                  delay: { show: 200, hide: 100 },
                  animation: true,
                  container: '#calendar',
                  html: true,
                  content: contenttext
              });

Upvotes: 0

user3045127
user3045127

Reputation: 21

try using the popover like this:

$(this).popover({
                      title: event.title + eventort,
                      placement: placement,
                      trigger: 'manual',
                      delay: { show: 200, hide: 100 },
                      animation: true,
                      container: '#calendar',
                      html: true,
                      content: contenttext
                  });

$(this).popover('show');

Upvotes: 2

Related Questions