Jquery插件中的長標題FullCalendar

Question

我在fullcalendar插件中使用長標題時遇到了一些問題。如果你有一個長的冠軍和短的事件時間（例如1天），所以你的事件標題將不適合。

我能用它做什麼？

Answer 1

您可以：

1. 變化的情況下呈現的方式，無論是在eventRender（回調，其中用戶可以修改DIV）或fullcalendar本身的來源。
2. 將日曆事件添加到顯示完整標題的工具提示，可能是qtip。
3. 修改日曆的大小並以分鐘爲單位遞增（對於星期視圖中的議程日），以便如果這是一個常見問題，則較短的事件會有更多的空間。

Answer 2

我固定它像這樣MonthView：

找到這個函數：（對我來說這是上線＃5381）

function daySegHTML(segs) 

在此功能中找到這段代碼：

html += 
    " class='" + classes.join(' ') + "'" + 
    " style='position:absolute;z-index:8;left:"+left+"px;" + skinCss + "'" + 

在此之前添加一段代碼，所以它應該看起來像這樣：

if(event.title.length > 10) 
    var eventShortTitle = event.title.substring(0,10) + '...'; 
else 
    var eventShortTitle = event.title; 

html += 
    " class='" + classes.join(' ') + "'" + 
    " style='position:absolute;z-index:8;left:"+left+"px;" + skinCss + "'" + 

那麼幾行婁找到這段代碼：

"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>" + 

這種替換：

"<span class='fc-event-title'>" + htmlEscape(eventShortTitle) + "</span>" + 

你長的標題問題是現在固定在月視圖。您可以爲「周」和「日」視圖執行相同的操作。

Answer 3

我提出這個問題有點不同的東西：

在fullcallendar源查找此部分：

if (seg.contentTop !== undefined && height - seg.contentTop < 10) { 
// not enough room for title, put it in the time header 
    eventElement.find('div.fc-event-time') 
    .text(formatDate(event.start, opt('timeFormat')) + ' - ' + event.title); 
(...) 

這if正在發生變化，短期事件的顯示方式。

我剛剛從源代碼中刪除整個if並添加eventAfterRender回調到我的js代碼：

eventAfterRender: (function(event, element, view) { 
    $(".fc-event").each(function(){ 
     if ($(this).height() < $(this).find('.fc-event-content').height()) { 
      var fcPrevHeight = $(this).height(); 
      var fcSlideHeight = $(this).height() + $(this).find('.fc-event-content').height(); 
      $(this).hover(  
       function() { 
        $(this).css('height', fcSlideHeight) 
       }, 
       function() { 
        $(this).css('height', fcPrevHeight); 
       } 
      ) 
     } 
    }) 
}) 

當事件是小，你不能看到整個事件的標題，這個代碼被改變div的高度，當鼠標懸停，所以你可以在事件的標題：P

Answer 4

給這一個鏡頭：

eventRender: function(event, element) { 
    var limit = 20; 
    if (event.title.length > limit) { 
     element.find('.fc-event-title').text(event.title.substr(0,limit)+'...').parent().attr('title', event.title); 
    } 
} 

，裁剪並用本地瀏覽器工具提示添加標題。你可以使用qtip如果你想

eventRender: function(event, element) { 
    var limit = 20; 
    if (event.title.length > limit) { 
     element.find('.fc-event-title').text(event.title.substr(0,limit)+'...'); 
     element.qtip({ 
      // qtip options here 
     }); 
    } 
} 

使用qtip2作爲qtip1與jQuery 1.9+ info here

Answer 5

打破。如果你想顯示多行標題，您可以覆蓋fullcalendar默認CSS。在FullCalendar 2.1.1

默認CSS

.fc-day-grid-event > .fc-content { 
    white-space: nowrap; 
    overflow: hidden; 
} 

取出white-space: nowrap;和YOUT標題將始終可見。

Answer 6

@Arron答案完美的作品對我來說，除了對版本FullCalendar v2.9.1

需要更新找到div與fc-title類，而不是.fc-event-title

var titleLimit = 20; 
    if (event.title.length > titleLimit) { 
     eventElement.find('.fc-title').text(event.title.substr(0,titleLimit)+'...').parent().attr('title', event.title); 
    }