上一篇：mysql concat_ws拼接后的字符串变为ox前缀的字符串(2024-09-11 11:06:10)
文章大纲

如何在fullcalendar事件title里展示html内容，并使其换行？

2024-09-21 06:08:06

换行后的最终效果

实现后的效果如下图所示：



实现目标

将单元格里title换行，并且用不同的样式区分诗词标题和作者。


解决思路

在title里直接使用html标签无效，只好采用&&符号将不同内容区分开。

然后在渲染单元格内容之前，再对title进行分割处理。


最终代码

注意本人使用的是fullcalendar的最新版本，官网在这里：https://fullcalendar.io/docs/initialize-globals


1. calendar的配置：

js 
var calendarConfig = {
    initialView: 'dayGridMonth',
    locale: 'zh',
    fixedWeekCount: false,
    headerToolbar: {
        start: 'today',
        center: 'title',
        end: 'prevYear,prev,next,nextYear'
    },
    buttonText: {
        today: '今天'
    },
    events: [],
    eventContent: function(cell){
        var content = $('<div />');

        console.log("title:", cell.event.title);
        var title = cell.event.title;
        var titleArr = title.split("&&");
        //诗词标题加粗
        content.append($('<strong />').text(titleArr[0]));
        //诗人加个className,方便控制css样式
        content.append($('<div class="poet">').text(titleArr[1]));

        return { html: content.get(0).outerHTML };
    },
    dateClick: function(dateObj){

    }
};


2. 对接后端数据：

js 
var planData = [];
$.each(resp.data, function(index, planItem){
    var poemTitle = planItem.title + '&&' + planItem.dynasty + '·' + planItem.poet;
    var cellData = {title: poemTitle, start:planItem.plan_date, end:planItem.plan_date};
    planData.push(cellData);
})
calendarConfig.events = planData;
上面eventContent里使用的&&分隔符对title字符串进行处理的，这里拼接title就也要使用&&分隔符。


3. 日历初始化：

js 
var calendarEl = document.getElementById("table_poem");
var calendar = new FullCalendar.Calendar(calendarEl, calendarConfig);



上一篇：mysql concat_ws拼接后的字符串变为ox前缀的字符串(2024-09-11 11:06:10)
我要评论
评论列表