Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tooltip for fullcalendar in year view

Tags:

I want to add tooltip for the fullcalendar in year view. I tried with the below one but it added tooltip to month view. I tried with google but did not find anything related to this. Is there any other way to add a tooltip in year view?

eventMouseover: function(calEvent,jsEvent) {
            xOffset = 10;
            yOffset = 30;
            $("body").append(calEvent.tooltip);
            $("#tooltip")
                .css("top",(jsEvent.clientY - xOffset) + "px")
                .css("left",(jsEvent.clientX + yOffset) + "px")
                .fadeIn("fast");
    },
    eventMouseout: function(calEvent,jsEvent) {
        $("#tooltip").remove(); 
    }
like image 329
Karthik Avatar asked Mar 21 '12 09:03

Karthik


People also ask

How do I use eventRender in FullCalendar?

eventRender is a great way to attach effects to event elements, such as a Tooltip. js tooltip effect: var calendar = new Calendar(calendarEl, { events: [ { title: 'My Event', start: '2010-01-01', description: 'This is a cool event' } // more events here ], eventRender: function(info) { var tooltip = new Tooltip(info.

How do I select multiple dates in FullCalendar?

Detect when the user clicks on dates or times. Give the user the ability to select multiple dates or time slots with their mouse or touch device. Allows a user to highlight multiple days or timeslots by clicking and dragging.

How do I set events in FullCalendar?

Here is an example of how to specify an array of events: var calendar = new Calendar(calendarEl, { events: [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] });

How do I turn off weekends in FullCalendar?

Just go from the startDate to the endDate and check if any of those days are weekends. If so, display the alert / popup and return false. select: (start, end, allDay) => { var startDate = moment(start), endDate = moment(end), date = startDate. clone(), isWeekend = false; while (date.


1 Answers

eventMouseover: function(calEvent, jsEvent) {
    var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>';
    var $tooltip = $(tooltip).appendTo('body');

    $(this).mouseover(function(e) {
        $(this).css('z-index', 10000);
        $tooltip.fadeIn('500');
        $tooltip.fadeTo('10', 1.9);
    }).mousemove(function(e) {
        $tooltip.css('top', e.pageY + 10);
        $tooltip.css('left', e.pageX + 20);
    });
},

eventMouseout: function(calEvent, jsEvent) {
    $(this).css('z-index', 8);
    $('.tooltipevent').remove();
},
like image 135
jincheng Avatar answered Sep 20 '22 17:09

jincheng