CODEWITHSUNDEEP
javascriptjquerycalendarfullcalendar
Avishake
Avishake

Reputation: 470

How to show start and end time in full calendar on mouseover?


I am working on full calendar for some days. I am facing a problem and I search in lot of place, nothing is working.
I want to show the start and end time on mouseover. I have customised the calendar in a day format. Where I have 30 min. slots. There are some events. I have the code where the event tile is shown on mouse over not the start and time. Below the working code of mouseover section.

eventMouseover: function(event, jsEvent, view) {
 if (view.name !== 'agendaDay') {
    $(jsEvent.target).attr('title', event.title);
   }
},

The event title is display here. Need to show the start and end time. Please help me. And also if possible to add style in the mouseover section. How to do these things, please help.

Thanks in advance for help.

Upvotes: 1

Views: 10027

Answers (2)

eleanar
eleanar

Reputation: 68

If I understand you correctly, you can try this solution :

                    eventMouseover: function(calEvent, jsEvent) {  

                    var durationTime = moment(calEvent.start).format('HH') + ":" + moment(calEvent.start).format('mm') + " - " + moment(calEvent.end).format('HH') + ":" + moment(calEvent.end).format('mm')
                    var tooltip = '<div class="tooltipevent" style="width:100px; height:20px; position:absolute;z-index:1000;">' + durationTime + '</div>';
                    $("body").append(tooltip);
                    $(this).mouseover(function(e) {
                        $(this).css('z-index', 10000);
                        $('.tooltipevent').fadeIn('500');
                        $('.tooltipevent').fadeTo('10', 1.9);
                    }).mousemove(function(e) {
                        $('.tooltipevent').css('top', e.pageY + 10);
                        $('.tooltipevent').css('left', e.pageX + 20);
                    });
                },

                eventMouseout: function(calEvent, jsEvent) {
                    $(this).css('z-index', 8);
                    $('.tooltipevent').remove();
                }

this solution is ref by this > Tooltip for fullcalendar in year view

Upvotes: 3

smcd
smcd

Reputation: 3265

If you use a tooltip library like qTip2 it is easy to add and style a tooltip. Editing the example from eventRender as a demo

$('#calendar').fullCalendar({
  defaultView: 'basicWeek',
  events: [{
      title: 'My Event',
      start: moment().format('YYYY-MM-DD') + ' 16:30',
      end: moment().format('YYYY-MM-DD') + ' 17:00',
      description: 'This is an event from 4:30pm to 5:00pm'
    }
    // more events here
  ],
  eventRender: function(event, element) {
    element.qtip({
      content: 	'<b>' + event.start.format('hh:mma') + ' - ' + event.end.format('hh:mma') + '</b>' +
        	'<br>' +
        	'<u>' + event.description + '</u>'
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.2/fullcalendar.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.2/fullcalendar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.css" rel="stylesheet"/>
<div id='calendar'></div>

Upvotes: 0

Related Questions