Javascript 在fullcalendar中显示更多文本

我正在寻找一个解决方案，以显示事件中的更多信息

例如，在DayView中，您可以看到从06:00到10:00的事件。

---

我想在此事件中显示一个附加说明（不仅是时间和标题）

我个人使用工具提示来显示其他信息，因此当有人将鼠标悬停在事件上方时，他们可以查看更长的描述。本例使用，但任何工具提示实现都可以

$（文档）.ready（函数（）{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，基本周，基本日”
},
//事件：“Calendar.asmx/EventList”，
//defaultView:“dayView”，
活动：[
{
标题：“全天活动”，
开始日期：新日期（y、m、1），
描述：'长描述'，
身份证号码：1
},
{
标题：“长期活动”，
开始日期：新日期（y、m、d-5），
结束：新日期（y、m、1），
描述：“长描述3”，
身份证号码：2
}],
eventRender:函数（事件，元素）{
元素qtip({
内容：event.description+'
'+event.start，
风格：{
背景：“黑色”，
颜色：“#FFFFFF”
},
职位：{
角落：{
目标：'中心'，
工具提示：“底部中间”
}
}
});
}
});
});

通过修改一行，您可以修改fullcalendar.js脚本以允许换行，并将多个信息放在同一行上

在第3922行的FullCalendar.js中找到htmlEscape函数，并在其末尾添加.replace（//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 />');
}

功能htmlEscape（s）{
返回s.replace（/&/g，“&；”）
.replace（//g'，）
.替换（/'/g''；'））
.替换（/“/g，”））
.替换（/\n/g，“
”）
.替换（/br\s？\/？/g，
）；
}

这将允许标题有多行，分隔信息。示例将event.title替换为

---

标题：“全天活动”+”
“+”其他说明“

此代码可以帮助您：

$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar（{
活动：
[ 
{ 
id:1，
标题：“第一个事件”，
开始：。。。，
完:。。。，
描述：“第一个描述”
}, 
{ 
id:2，
标题：“第二个事件”，
开始：。。。，
完:。。。，
描述：“第二描述”
}
], 
eventRender:函数（事件，元素）{
元素。查找（'.fc title'）。追加（“
”+事件。说明）；
} 
});
}   

我找到了一个更简单的解决方案：

我更改了fullcalendar.css

并增加了以下内容：

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

导致：

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

---

现在它只在需要时包装。

下面是我使用qTip2和

eventMouseover弹出的代码：

$（文档）.ready（函数（）{
//设置完整日历
//设置完整日历
（功能（）{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
var day=date.toLocaleDateString（）；
变量工具提示=$（''）.qtip({
id:'完整日历'，
预渲染：正确，
内容：{
文本：“”，
标题：{
按钮：正确
}
},
职位：{
我的‘底部中心’，
在‘顶尖中心’，
目标：“鼠标”，
视口：$（“#完整日历”），
调整：{
老鼠：错，
卷轴：假
}
},
秀:假,，
隐藏：错，
样式：“qtip灯”
}).qtip（“api”）；
$（'#fullcalendar'）。fullcalendar({
是的，
DisableDraging:对，
身高：600，
标题：{
左：'标题'，
中心：''，
右图：“今天上一个，下一个”
},
dayClick:function（）{tooltip.hide（）}，
eventResizeStart:function（）{tooltip.hide（）}，
eventDragStart:function（）{tooltip.hide（）}，
viewDisplay:function（）{tooltip.hide（）}，
活动：[
{
标题：“全天活动”，
开始日期：新日期（2014年3月1日）
},
{
标题：“长期活动”，
开始日期：新日期（y、m、d-5），
结束：新日期（y、m、d-2）
},
{
身份证号码：999，
标题：“重复事件”，
开始日期：新日期（y、m、d+4、16、0），
全天：错
},
{
标题:"会议",，
开始日期：新日期（y、m、d、10、30），
全天：错
},
{
标题：“春季会员大会”，
开始日期：新日期（y、m、d+6、7、0），
结束：新日期（y、m、d+6、13、0），
全天：错，
描述：'保留日期！加入我们的年度会员大会。早餐将于上午7:30开始供应，以EFEC信仰体系和我们的承诺为特色
element.find('.fc-event-inner').empty();

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

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

// `data` ismy JSON object.
$.each(data, function(index, value) {
  value.title = '<div class="title">' + value.title + '</div>';
  value.title += '<div class="deets"><span class="time"><img src="/themes/custom/bp/images/clock.svg">' + value.start_time + ' - ' + value.end_time + '</span>';
  value.title += '<span class="location"><img src="/themes/custom/bp/images/pin.svg">' + value.location + '</span></div>';
  value.title += '<div class="learn-more">LEARN MORE <span class="arrow"></span></span>';
});

// Initialize the calendar object.
calendar = new FullCalendar.Calendar(cal, {
  events: data,
  plugins: ['dayGrid'],
  eventRender: function(event) {
    // This is required to parse the HTML.
    const title = $(event.el).find('.fc-title');
    title.html(title.text());
  }
});
calendar.render();