Add title when hovering over event

Question

Add title when hovering over event

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I need to pass the mouse to see the name of the event, at the moment if the name is too big I can not see, as in the example below:

I'musingfullcalendartomanagemyeventcalendar,andmycodeisconfiguredlikethis:

$('#calendar').fullCalendar({//putyouroptionsandcallbackshereselectable:true,editable:true,events:[@foreach($celula->reunioesas$reuniao){title:'{{$reuniao->TXT_TEMAX_REUNI}}',start:'{{$reuniao->getStart}}',allDay:true,id:'{{$reuniao->COD_IDENT_REUNI}}',className:'bgm-cyan'},@endforeach],select:function(start,end,allDay){startDisplay=$.fullCalendar.formatRange(start,start,'DD/MM/YYYY');$("#addEvent").show();
           $("#editEvent").hide();
           $("#addNew-event").modal("show");
           $("#addNew-event input:text").val("");
           $("#getStart").val(start);
           $(".getStartDate").val(startDisplay);
           $("#getEnd").val(start);
           $('input[type=text][name=TMP_HORAX_REUNI]').val("{{$celula->TMP_HORAX_CELUL}}");
           $('input[type=text][name=TXT_RUAXX_REUNI]').val("{{$celula->TXT_RUAXX_CELUL}}");
           $('input[type=text][name=TXT_BAIRR_REUNI]').val("{{$celula->TXT_BAIRR_CELUL}}");
           $('input[type=text][name=TXT_CIDAD_REUNI]').val("{{$celula->TXT_CIDAD_CELUL}}");
           $('input[type=text][name=TXT_ESTAD_REUNI]').val("{{$celula->TXT_ESTAD_CELUL}}");
           $('input[type=text][name=TXT_NUMER_REUNI]').val("{{$celula->TXT_NUMER_CELUL}}");
           $('input[type=text][name=TXT_COMPL_REUNI]').val("{{$celula->TXT_COMPL_CELUL}}");
       },
       eventClick: function(event, element) {
          $("#addEvent").hide()
          $("#editEvent").show().data("ev", event);
          $("#addNew-event").modal("show");
          $("#addNew-event input:text").val("");
          $("#eventName").val(event.title);
      }
  });

So I need to pass the mouse, it appears the whole title of the event. How to do this?

javascript jquery fullcalendar

asked by anonymous 10.01.2017 / 20:45

2 answers

2

I used this code inside the eventRender.

 $(element).tooltip({title: event.title});

12.01.2017 / 18:20

Inner join repeating data Script to change player (old Jquery game)

score 3 · Accepted Answer

Good morning!

I already had to do this in an old project that I did. Follow the code, I hope it helps. : D

eventMouseover: function (calEvent, jsEvent) {
    var data = new Date(calEvent.data); //formatar data - inicio
    var d = data.getDate();
    d += 1;
    var m = data.getMonth();
    m += 1; // JavaScript months are 0-11
    var y = data.getFullYear();
    if (d < 10) {
    d = "0" + d;
    }
    if (m < 10) {
    m = "0" + m;
    }
    var data_formatada = (d + "/" + m + "/" + y); //formatar data - fim

    var horario;
    if (calEvent.allDay == true) {
    horario = "Dia todo";
    } else {
    horario = 'Hora:</label> <label class="c2">' + calEvent.hora + " | " + calEvent.horafim;
    }

    var tooltip = '\
                    <div class="tooltipevent tooltip_agenda">\n\
                    <label class="titulo">' + calEvent.descricao + '</label><br/>' +
            '<label class="c1">Data:</label> <label class="c2">' + data_formatada + '</label><br/>\n\
                    <label class="c1">' + horario + '</label><br/>\n\
                    <label class="cliente"> ' + calEvent.cliente + '</label></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();
            $('tooltip').remove();
            },