es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Ver el contenido completo al pasar el cursor sobre él en fullcalendar3.

14 Jul, 2023 Programación

Tengo el siguiente fullcalendar que he construido utilizando el siguiente código:

var todayDate = new Date();
$('#calendar').fullCalendar({
  defaultDate: todayDate,
  eventLimit: true, // permitir enlace "más" cuando hay demasiados eventos
  events: [{
    title: 'XX-XXXXX-X: YYYY,AAAAAA,BBBBB,CCCCCC,DDDDD,EEEEEE,FFFFFF,GGGGGG',
    start: '2021-10-06',
    color: 'yellow'
  }]
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<div class="ui container">
  <div class="ui grid">
    <div class="ui sixteen column">
      <div id="calendar"></div>
    </div>
  </div>
</div>

El resultado es el siguiente:

enter image description here

Pero como puedes ver, el contenido en 2021-10-06 es demasiado largo. ¿Existe alguna opción en fullcalendar mediante la cual se pueda ver el contenido completo al pasar el cursor sobre él?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una opción en fullcalendar para mostrar los detalles completos del evento al pasar el mouse sobre el mismo. Puedes utilizar la función de devolución de llamada eventRender para personalizar la renderización del evento. Aquí tienes un ejemplo de código:

    var todayDate = new Date();
$('#calendar').fullCalendar({
    defaultDate: todayDate,
    eventLimit: true, // permite el enlace "más" cuando hay demasiados eventos
    events: [{
        title: 'XX-XXXXX-X: YYYY,AAAAAA,BBBBB,CCCCCC,DDDDD,EEEEEE,FFFFFF,GGGGGG',
        start: '2021-10-06',
        color: 'yellow'
    }],
    eventRender: function(event, element) {
        element.attr('title', event.title); // agrega el atributo title con los detalles completos del evento
    }
});

    Este código utiliza la función attr() para agregar el atributo title al elemento del evento con los detalles completos del mismo. Cuando un usuario pasa el mouse sobre el evento, el navegador mostrará el contenido en un tooltip.

    Ten en cuenta que puedes personalizar el estilo del tooltip utilizando CSS. Por ejemplo, puedes utilizar la clase .ui-tooltip de la biblioteca Semantic UI para dar estilo al tooltip.

Comments are closed.