CODEWITHSUNDEEP
cssfullcalendar
Kamila
Kamila

Reputation: 389

fullcalendar.js extend event on hover to show full content

I am using fullcalendar 1.x.

In the calendar some events have long title, which is not fully visible. What I would like to accomplish, is to expand (on hover, with slight delay) an event over to a next column, to show full content of .fc-content.

I'm not sure if I described it clearly, but here is working demo with a simulation of effect I would like to get. (in the simulation I am dynamically adding colspan, just to show how I would like event to look like on hover).

here is the script:

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.js"></script>
  <script src="script.js"></script>
  <script>
    $(document).ready(function() {
      $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,basicWeek,basicDay'
        },
        firstDay: 1,
        allDaySlot: false,
        timeFormat: 'H:mm',
        axisFormat: 'H:mm',
        height: 650,
        defaultDate: '2016-05-12',
        editable: true,
        displayEventEnd: {
          month: true
        },
        eventLimit: true, // allow "more" link when too many events
        events: [{
          title: 'All Day Event',
          start: '2016-05-01'
        }, {
          title: 'Long Event',
          start: '2016-05-07',
          end: '2016-05-10'
        }, {
          id: 999,
          title: 'Repeating Event',
          start: '2016-05-09T16:00:00'
        }, {
          id: 999,
          title: 'Repeating Event',
          start: '2016-05-16T16:00:00'
        }, {
          title: 'Conference',
          start: '2016-05-11',
          end: '2016-05-13'
        }, {
          title: 'Meeting',
          start: '2016-05-12T10:30:00',
          end: '2016-05-12T12:30:00'
        }, {
          title: 'Lunch',
          start: '2016-05-12T12:00:00'
        }, {
          title: 'Meeting',
          start: '2016-05-12T14:30:00',
          start: '2016-05-12T18:30:00'
        }, {
          title: 'Happy Hour',
          start: '2016-05-12T17:30:00'
        }, {
          title: 'Dinner',
          start: '2016-05-12T20:00:00'
        }, {
          title: 'Birthday Party',
          start: '2016-05-13T07:00:00'
        }, {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2016-05-28'
        }]
      });

      $('.fc-title').hover(function() {
        $(this).parent().parent().parent().attr('colSpan', 2);
      });

    });
  </script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div id="calendar"></div>
</body>

</html>

Thanks for hints!

Upvotes: 1

Views: 5092

Answers (3)

user3130061
user3130061

Reputation: 1

My code show entire event on his column with timegrid and fullcalendar v4

eventMouseEnter: function( mouseLeaveInfo ) {
    var myTarget = $(mouseLeaveInfo.el);
    if (!myTarget.hasClass('fc-event')) {
        myTarget = myTarget.closest('.fc-event');
    }
    //myTarget.css("display","inline-table");

    var oldch = myTarget.height();
    myTarget.data("myheight", oldch);
    var innerelem = myTarget.find(".fc-content").first();
    innerelem.css('max-height', 'none');
    innerelem.css('white-space', 'break-spaces');
    var ih = innerelem.height();
    if(oldch<ih){
        myTarget.css('height', ih+'px');
    }
},
eventMouseLeave: function( mouseLeaveInfo ){
    var myTarget = $(mouseLeaveInfo.el);

    if (!myTarget.hasClass('fc-event')) {
        myTarget = myTarget.closest('.fc-event');
    }
    //myTarget.css("display","block");

    var oldch = myTarget.data("myheight");
    var innerelem = myTarget.find(".fc-content").first();
    myTarget.css('height', oldch+'px');
    innerelem.css('white-space', 'nowrap');
    innerelem.css('max-height', '100%');
},

Upvotes: 0

Jeremy Wright
Jeremy Wright

Reputation: 621

                eventMouseover: function(event, jsEvent, view) {
                    var myTarget = $(jsEvent.target);

                    if (!myTarget.hasClass('fc-event')) {
                        myTarget = myTarget.closest('.fc-event');
                    }
                    myTarget.css("display","inline-table");
                },
                eventMouseout: function(event, jsEvent, view) {
                    var myTarget = $(jsEvent.target);

                    if (!myTarget.hasClass('fc-event')) {
                        myTarget = myTarget.closest('.fc-event');
                    }
                    myTarget.css("display","initial");
                }

This is a bit of a hack, but it achieved what I needed when I ran into the same issue.

Upvotes: 0

Raul Lea&#241;o Martinet
Raul Lea&#241;o Martinet

Reputation: 2113

I am not really sure about the effect that you are looking, but maybe something like this may help you:

.fc-event-hover {
  position: relative !important;
  height: 17px;
}
.fc-event-hover .fc-content {
  position: absolute !important;
  top: -1px;
  left: 0;
  background: red;
  z-index: 99999;
  width: auto;
  overflow: visible !important;
  background-color: #3a87ad;
  padding: 1px;
  border-radius: 2px;
}
.fc-content-skeleton tr td:last-child .fc-event-hover .fc-content {
  left: auto;
  right: 0;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.js"></script>
  <script src="script.js"></script>
  <script>
    $(document).ready(function() {
      $('#calendar').fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,basicWeek,basicDay'
        },
        firstDay: 1,
        allDaySlot: false,
        timeFormat: 'H:mm',
        axisFormat: 'H:mm',
        height: 650,
        defaultDate: '2016-05-12',
        editable: true,
        displayEventEnd: {
          month: true
        },
        eventLimit: true, // allow "more" link when too many events
        events: [{
          title: 'All Day EventAll Day Event',
          start: '2016-05-01'
        }, {
          title: 'Long Event',
          start: '2016-05-07',
          end: '2016-05-10'
        }, {
          id: 999,
          title: 'Repeating Event',
          start: '2016-05-09T16:00:00'
        }, {
          id: 999,
          title: 'Repeating Event',
          start: '2016-05-16T16:00:00'
        }, {
          title: 'Conference',
          start: '2016-05-11',
          end: '2016-05-13'
        }, {
          title: 'Meeting',
          start: '2016-05-12T10:30:00',
          end: '2016-05-12T12:30:00'
        }, {
          title: 'Lunch',
          start: '2016-05-12T12:00:00'
        }, {
          title: 'Meeting',
          start: '2016-05-12T14:30:00',
          start: '2016-05-12T18:30:00'
        }, {
          title: 'Happy Hour',
          start: '2016-05-12T17:30:00'
        }, {
          title: 'Dinner',
          start: '2016-05-12T20:00:00'
        }, {
          title: 'Birthday Party',
          start: '2016-05-13T07:00:00'
        }, {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2016-05-28'
        }]
      });

      $('.fc-event').mouseenter(function() {
        $(this).addClass('fc-event-hover');
      });
      $('.fc-event').mouseleave(function() {
        $(this).removeClass('fc-event-hover');
      });

    });
  </script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.3/fullcalendar.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div id="calendar"></div>
</body>

</html>

Upvotes: 1

Related Questions