mostrar más texto en fullcalendar

Question

me gusta el fullcalendar JQuery-Plugin. En este momento estoy buscando una solución para mostrar más información en el evento. Por ejemplo en el DayView que ver un evento 6:00-10:00. Ahora quiero mostrar una descripción adicional en este evento (no solo la hora y el título).

Answer 1

Yo personalmente uso un texto de ayuda para visualizar información adicional, así que cuando alguien se cierne sobre el evento que se puede ver una descripción más largos. En este ejemplo se utiliza qTip, pero cualquier aplicación sobre herramientas funcionaría.

$(document).ready(function() { 
    var date = new Date(); 
    var d = date.getDate(); 
    var m = date.getMonth(); 
    var y = date.getFullYear(); 
    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev, next today', 
      center: 'title', 
      right: 'month, basicWeek, basicDay' 
     }, 
     //events: "Calendar.asmx/EventList", 
     //defaultView: 'dayView', 
     events: [ 
     { 
      title: 'All Day Event', 
      start: new Date(y, m, 1), 
      description: 'long description', 
      id: 1 
     }, 
     { 
      title: 'Long Event', 
      start: new Date(y, m, d - 5), 
      end: new Date(y, m, 1), 
      description: 'long description3', 
      id: 2 
     }], 
     eventRender: function(event, element) { 
      element.qtip({ 
       content: event.description + '<br />' + event.start, 
       style: { 
        background: 'black', 
        color: '#FFFFFF' 
       }, 
       position: { 
        corner: { 
         target: 'center', 
         tooltip: 'bottomMiddle' 
        } 
       } 
      }); 
     } 
    }); 
}); 

Answer 2

Con la modificación de una sola línea que podría alterar la secuencia de comandos fullcalendar.js para permitir un salto de línea y poner la información múltiple en la misma línea.

En FullCalendar.js sobre la función ~ 3922 hallazgo htmlEscape (s) línea y añadir .replace (/ br < \ s? /? >/g, '
') al final de la misma.

function htmlEscape(s) { 
    return s.replace(/&/g, '&') 
    .replace(/</g, '&lt;') 
    .replace(/>/g, '&gt;') 
    .replace(/'/g, '&#039;') 
    .replace(/"/g, '&quot;') 
    .replace(/\n/g, '<br />') 
    .replace(/&lt;br\s?\/?&gt;/g, '<br />'); 
} 

Esto le permitirá tener varias líneas para el título, separando la información. Ejemplo sustituir el event.title con título: 'Todo el día' + '< br/>' + 'Otros Descripción'

Answer 3

Este código puede ayudarle a:

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
     events: 
      [ 
       { 
        id: 1, 
        title: First Event', 
        start: ......., 
        end: ....., 
        description: 'first description' 
       }, 
       { 
        id: 2, 
        title: 'Second Event', 
        start: ......., 
        end: ....., 
        description: 'second description' 
       } 
      ], 
     eventRender: function(event, element) { 
      element.find('.fc-title').append("<br/>" + event.description); 
     } 
    }); 
} 

Answer 4

Bueno he encontrado una solución más simple para mí:

he cambiado fullcalendar.css

y añadió lo siguiente:

float: left; 
clear: none; 
margin-right: 10px; 

El resultado es:

.fc-event-time, 
.fc-event-title { 
    padding: 0 1px; 
    float: left; 
    clear: none; 
    margin-right: 10px; 
} 

ahora sólo envuelve cuando se necesita.

Answer 5

Aquí está mi código para emergente usando qTip2 y eventMouseover:

$(document).ready(function() { 
    // Setup FullCalendar 
    // Setup FullCalendar 
    (function() { 
     var date = new Date(); 
     var d = date.getDate(); 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 
     var day=date.toLocaleDateString(); 

     var tooltip = $('<div/>').qtip({ 
      id: 'fullcalendar', 
      prerender: true, 
      content: { 
       text: ' ', 
       title: { 
        button: true 
       } 
      }, 
      position: { 
       my: 'bottom center', 
       at: 'top center', 
       target: 'mouse', 
       viewport: $('#fullcalendar'), 
       adjust: { 
        mouse: false, 
        scroll: false 
       } 
      }, 
      show: false, 
      hide: false, 
      style: 'qtip-light' 
     }).qtip('api'); 

     $('#fullcalendar').fullCalendar({ 
      editable: true, 
      disableDragging: true, 
      height: 600, 
      header: { 
       left: 'title', 
       center: '', 
       right: 'today prev,next' 
      }, 

      dayClick: function() { tooltip.hide() }, 
      eventResizeStart: function() { tooltip.hide() }, 
      eventDragStart: function() { tooltip.hide() }, 
      viewDisplay: function() { tooltip.hide() }, 
      events: [ 
       { 
        title: 'All Day Event', 
        start: new Date(2014, 3, 1) 
       }, 
       { 
        title: 'Long Event', 
        start: new Date(y, m, d-5), 
        end: new Date(y, m, d-2) 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: new Date(y, m, d+4, 16, 0), 
        allDay: false 
       }, 
       { 
        title: 'Meeting', 
        start: new Date(y, m, d, 10, 30), 
        allDay: false 
       }, 
       { 
        title: 'Spring Membership Conference', 
        start: new Date(y, m, d+6, 7,0), 
        end: new Date(y, m, d+6, 13,0), 
        allDay: false, 
        description:'save the date! Join us for our Annual Membership Conference. Breakfast will be served beginning at 7:30 a.m. Featuring The EFEC Belief System & Our Pledge lunch' 
       }, 
       { 
        title: 'Birthday Party', 
        start: new Date(y, m, d+1, 19, 0), 
        end: new Date(y, m, d+1, 22, 30), 
        allDay: false 
       } 
      ], 
      eventMouseover : function(data, event, view) { 
       var content = 
       '<p>'+data.description +'<p>'+ 
       '<h3>'+data.title+'</h3>' + 
        '<p><b>Start:</b> '+data.start+'<br />' + 
        (data.end && '<p><b>End:</b> '+data.end+'</p>' || ''); 

       tooltip.set({ 
        'content.text': content 
       }) 
       .reposition(event).show(event); 
      }, 
     }); 
    }()); 
}); 

Answer 6

Por alguna razón, tengo que usar

element.find('.fc-event-inner').empty(); 

a hacer que funcione, que supongo que estoy en la vista del día.

Answer 7

como una posible solución: añadir algo más de contenido extra para el título. sobrescribir este estilo css:

.fc-day-grid-event .fc-content { 
    white-space: normal; 
} 

Answer 8

Yo recomendaría el uso de la devolución de llamada eventAfterRender en lugar de eventRender. De hecho si se utiliza eventRender que pueda poner en peligro la correcta visualización de los eventos, en coffeescript, algo así como:

$("#calendar").fullCalendar 
    eventAfterRender: (event, element) -> 
     element.find('.fc-title').after("<span>"+event.description+"</span>")