Jquery'中的长标题；s插件完整日历_Jquery_Fullcalendar

Jquery'中的长标题；s插件完整日历

jquery fullcalendar

Jquery'中的长标题；s插件完整日历,jquery,fullcalendar,Jquery,Fullcalendar,我对fullcalendar插件中的长标题有点问题。如果你有一个长标题和短事件时间（例如1天），那么你的事件标题将不合适我能用它做什么？您可以：更改事件的呈现方式，可以是在（用户可以修改div的回调）中，也可以是在fullcalendar本身的源中将工具提示添加到日历事件中，以显示完整标题，可能带有修改日历的大小，并以分钟为单位递增（对于“每周日程”视图），以便在频繁出现此问题时，较短的事件有更多的空间你可以：更改事件的呈现方式，可以是在（用户可以修改div的回调）中，也可以是在fu

我对fullcalendar插件中的长标题有点问题。如果你有一个长标题和短事件时间（例如1天），那么你的事件标题将不合适

我能用它做什么？

您可以：

更改事件的呈现方式，可以是在（用户可以修改div的回调）中，也可以是在fullcalendar本身的源中

将工具提示添加到日历事件中，以显示完整标题，可能带有

修改日历的大小，并以分钟为单位递增（对于“每周日程”视图），以便在频繁出现此问题时，较短的事件有更多的空间

你可以：

更改事件的呈现方式，可以是在（用户可以修改div的回调）中，也可以是在fullcalendar本身的源中

将工具提示添加到日历事件中，以显示完整标题，可能带有

修改日历的大小，并以分钟为单位递增（对于“每周日程”视图），以便在频繁出现此问题时，较短的事件有更多的空间

我为MonthView这样做：

查找此函数：（对我来说，它位于第5381行）

在此函数中查找以下代码：

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

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

在此之前添加一段代码，因此应如下所示：

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 + "'" +

下面几行代码可以找到：

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

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

“”+htmlEscape（event.title）+”+

将其替换为以下内容：

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

“”+htmlEscape（eventShortTitle）+”+

您的长标题问题现在已在月视图中修复。您可以对周视图和日视图执行相同的操作。

我对MonthView进行了如下修复：

查找此函数：（对我来说，它位于第5381行）

在此函数中查找以下代码：

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

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

在此之前添加一段代码，因此应如下所示：

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 + "'" +

下面几行代码可以找到：

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

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

“”+htmlEscape（event.title）+”+

将其替换为以下内容：

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

“”+htmlEscape（eventShortTitle）+”+

您的长标题问题现在已在月视图中修复。您可以对周视图和日视图执行相同的操作。

我对这个问题做了一些不同的处理：

在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);
(...)

当事件很小且您无法看到整个事件标题时，此代码会在鼠标悬停时更改div的高度，以便您可以查看事件的标题：p

我对此问题做了一些不同的处理：

在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);
(...)

当事件很小且您无法看到整个事件标题时，此代码会在鼠标悬停时更改div的高度，以便您可以查看事件标题：p

尝试一下：

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+一起中断

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+中断。如果要在多行中显示标题，可以覆盖fullcalendar默认CSS

FullCalendar v2.1.1中的默认CSS

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

删除

空白：nowrap和您的标题将始终可见。
如果要在多行中显示标题，可以覆盖fullcalendar默认CSS
FullCalendar v2.1.1中的默认CSS
.fc-day-grid-event > .fc-content {
   white-space: nowrap;
   overflow: hidden;
}

删除空白：nowrap和您的标题将始终可见。
@Arron answer对我来说非常适合，除了更新版本FullCalendar v2.9.1

需要查找具有类fc标题的div
，而不是。fc事件标题的
var titleLimit = 20;
    if (event.title.length > titleLimit) {
        eventElement.find('.fc-title').text(event.title.substr(0,titleLimit)+'...').parent().attr('title', event.title);
    }

@除了更新版本FullCalendar v2.9.1

需要查找具有类fc标题的div
，而不是。fc事件标题的
var titleLimit = 20;
    if (event.title.length > titleLimit) {
        eventElement.find('.fc-title').text(event.title.substr(0,titleLimit)+'...').parent().attr('title', event.title);
    }

以下是其他eventRender
答案的一个变体，仅适用于月份视图，其中标题被严重截断：
eventRender: function(event, element, view) {
    var limit = 10;
    if (view.type === 'month' && event.title.length > limit) {
        element.find('.fc-title').parent().attr('title', event.title);
    }
}

以下是其他eventRender
答案的一个变体，仅适用于月份视图，其中标题被严重截断：
eventRender: function(event, element, view) {
    var limit = 10;
    if (view.type === 'month' && event.title.length > limit) {
        element.find('.fc-title').parent().attr('title', event.title);
    }
}

您可以使用funceventRender
在事件中的时间和标题之间添加一条分隔线
It解决方案仅适用于月视图
eventRender:函数（事件、元素、视图）{
var限值=10；
如果（view.type==='month'&&event.title&&event.title.length>限制）{
元素。查找（'.fc title'）[0]。insertAdjacentHTML（'beforebegin'，“
”）；
}
} 
您可以使用funceventRender
在事件中的时间和标题之间添加一条分隔线
It解决方案仅适用于月视图
eventRender:函数（事件、元素、视图）{
var限值=10；
如果（view.type==='month'&&event.title&&event.title.length>限制）{
元素。查找（'.fc title'）[0]。insertAdjacentHTML（'beforebegin'，“
”）；
}
} 
您能轻松说出周和日视图的代码所在位置吗？@DimitrisPapageorgiou |对不起，我很久以前就在使用FullCalendar了。我现在甚至没有代码…哦，无论如何，我找到了代码所在的位置，但问题是相同的代码同时影响周视图和日视图，相反，我希望对周视图进行不同的调整，对日视图进行不同的调整…当然，所有这些现在都无关紧要，因为正如您所说，您没有在完整日历上工作anymore@DimitrisPapageorgiou|只有一个提示，如果您使用fullCalendar，请确保您花足够的时间理解插件的代码。一旦您了解了这一点，您将开始享受fullCalendar的工作。我还没有找到区分日视图和周视图的方法。我必须知道这一原因，因为我必须对日视图中的事件标题长度进行不同的调整。您是否可以轻松地说出周代码的位置