Daha fazla Metin in fullcalendar

Question

Ben fullcalendar JQuery-Plugin'i beğeniyorum. Şu anda olayda daha fazla bilgi görüntülemek için bir çözüm arıyorum. Örneğin DayView'da, 06:00 ile 10:00 arasında bir etkinlik görüyorsunuz. Şimdi bu etkinlikte ek bir açıklama görüntülemek istiyorum (sadece zaman ve başlık değil).

Answer 1

Ek bilgileri görüntülemek için bir araç ipucunu şahsen kullanırım, böylece birisi etkinliğin üzerine geldiğinde daha uzun bir açıklama görüntüleyebilir. Bu örnek, qTip kullanır, ancak herhangi bir araç ipucu uygulaması çalışır. Bir satır sonu izin ve aynı satırda birden bilgileri koymak için fullcalendar.js senaryoyu değiştirebilir tek bir satır değiştirilmesi ile

$(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

.

hattı ~ 3922 bulmak htmlEscape (ler) işlevi üzerinde FullCalendar.js olarak

ekleyin .Kapağı bunun sonuna (/ < br \ s? /? >/g '
').

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 />'); 
} 

Bu, başlığı ayırmak ve bilgileri ayırarak birden çok satıra sahip olmanızı sağlar. Örnek başlığı ile event.title değiştirin: 'Tüm Gün Etkinliği'ne + '< br/>' + 'Diğer Açıklama'

Answer 3

Bu kod size yardımcı olabilir:

$(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

Eh ben daha basit bir çözüm buldu Benim için:

Ben

fullcalendar.css değiştirdi ve ekledi aşağıdaki:

Sonuçlanan

: o gerektiğinde

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

şimdi sadece sarar.

Answer 5

İşte qTip2 ve eventMouseover kullanılarak açılır benim kod: Nedense

$(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

, ben,

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

çalışması için kullanmak zorunda i gün görünümünde sanırım.

Answer 7

Olası bir çözüm olarak: Başlığa daha fazla içerik ekleyin. bu css stil üzerine yaz:

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

Answer 8

yerine eventRender ait eventAfterRender geri arama öneriyoruz. /: Merhaba ben https gibi başlık şey göstermek can tam takvimde bir şeyi bilmek istiyorum

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