修改fullCalendar插件，支持title显示html内容

最新推荐文章于 2024-04-24 09:27:42 发布
置顶 最新推荐文章于 2024-04-24 09:27:42 发布
阅读量2.3w 收藏 4
点赞数 3
分类专栏： 前端笔记 文章标签： fullCalendar html 日历插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c1143359684/article/details/96331645
版权

博主使用的fullCalendar版本是v4.2.0。

附上插件git地址：fullcalendar插件git地址

初始化日历插件时添加以下日程事件渲染方法：
eventRender: function (info) {//当日程事件渲染时触发
    //让title显示HTML内容
    $(info.el).html(info.event.title);
}

添加以上代码即可在events数据配置的title属性里面使用HTML标签了。部分配置及效果如下：

部分配置代码
部分配置代码

 

部分配置代码
构造带HTML标签的标题

 

部分配置代码
最终效果

 

caiycx
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
改造之后的fullCalendar（改事件背景、标题自定义、无星期、左右按钮）
04-20
NULL 博文链接：https://lihong11.iteye.com/blog/1897471
fullCalendar 插件 日历日程事件title不换行问题解决方法
qq_38472535的博客
07-24 723
fullCalendar 插件 日历日程事件title不换行问题解决方法
php使用fullcalendar日历插件详解
01-02
最近做课程表的项目，找了好多个插件感觉都不好用，无意间看到了fullcalendar，还挺简单的，很方便，先贴一张项目页面 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!-- 日历插件 --> <link href='/public/school/table/fullcalendar.min.css' rel='stylesheet' /> <link href='/public/school/table/fullcalendar.print.min.css' rel='stylesheet' media='print'
jquery 简单的title显示插件
10-29
个代码，针对学习jquery插件制作的朋友可以参考下。效果并不是主要的。
使用插件fullcalendar日历插件制作课程表
04-08
使用插件fullcalendar日历插件制作课程表 实例参考https://blog.csdn.net/qq_25285531/article/details/130356264#comments_32087741
fullcalendar日历插件title展示html
weixin_45623615的博客
06-22 1145
初始化日历插件时添加以下日程事件渲染方法： eventRender: function (event, element) { //让title显示HTML内容 element.html(event.title); }
vuefullcalendar 知识总结
m0_66571906的博客
07-04 5103
vuecalendar的总结介绍
vue使用fullcalendar组件月视图title内容过长显示不全
tan0206的博客
05-12 3342
vue 使用fullcalendar组件的时候，标题过长，导致被overflow: hidden; 我们可以换行； 先找到它的css样式 在该页面下的css中加入这个。（>>>是穿透) .fc-unthemed >>> .fc-content{ white-space: normal; } 最后效果是这样的 或者溢出…隐藏 .fc-unthemed >>> .fc-content{ text-overflow: ellipsis; } ...
fullcalendar v5.3.2 日历插件+LayerUi弹窗，实现自定义HTML表格
飞奔的屎壳郎
10-09 6411
fullcalendar官网：https://fullcalendar.io/ 插件下载地址（v5.3.2版本）：https://github.com/fullcalendar/fullcalendar/releases 项目中用的是 LayerUi弹窗+fullcalendar日历插件，上面是效果图 我这里用的是v5.3.2版本，5.x以上版本好像改版了，命令与4.X完全不一样 注意：日历插件里面的表格是 自定义的HTML代码 当前的项目中有个BUG，就是点击单元格后，弹出窗口 演示效果如下： 下载下的
fullcalendar中title内容过长显示不全的问题
qq_32734273的博客
10-20 5217
添加属性： eventRender: function (event, element) {     element.html(event.title);            }   页面详细代码： &lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &l...
农历版的FullCalendar插件
08-10
农历版的FullCalendar插件，带有order排序和ajax异步提交等功能。数据库访问和操作参考我的文章。
前端日历插件fullcalendar
05-25
前端日历插件，包含js和css，以及index.html。采用的是fullcalendar
fullcalendar利用html显示出来而且是最新的3.2.0
05-27
fullcalendar利用html显示出来而且是最新的3.2.0
图片懒加载
m0_47999208的博客
04-18 208
的页面，这有两个属性src和data-src。页面滚动到图片的位置才会加载相应的图片。
Web前端开发之HTML_3
zx1026409886的博客
04-23 801
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 279
【代码】用html写一个旋转菜单。
用html画一个四叶草
liulang68的博客
04-20 975
以上是部分代码，需要请看主页加联系方式。
HTML 入门
lvshihao_的博客
04-16 1078
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
html-docx-js网页转为word格式框架
qq_43235503的博客
04-21 294
html-docx-js网页转为word格式框架
FullCalendar 插件是如何使用的
06-06
FullCalendar 是一个非常流行的日历插件，可以用来显示日程安排、事件等。它支持各种不同的视图（月视图、周视图、日视图等），并且可以自定义事件的颜色、标签等。 使用 FullCalendar 插件，你需要先在页面中引入 FullCalendar 的 JavaScript 和 CSS 文件。然后，你需要在页面中创建一个空的 `div` 元素，并给它一个唯一的 ID。接下来，你可以在 JavaScript 中初始化 FullCalendar，并指定要显示的数据源（比如一个 JSON 数据文件或一个 AJAX 调用）。 以下是一个简单的 FullCalendar 示例代码： HTML 代码： ```html <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' rel='stylesheet' /> <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.print.min.css' rel='stylesheet' media='print' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script> </head> <body> <div id='calendar'></div> <script> $(document).ready(function() { // page is now ready, initialize the calendar... $('#calendar').fullCalendar({ // put your options and callbacks here }) }); </script> </body> </html> ``` JavaScript 代码： ```javascript $('#calendar').fullCalendar({ events: [ { title: 'My Event', start: '2021-09-01' } ] }); ``` 这个例子中，我们首先在 HTML 中引入了 FullCalendar 的 JavaScript 和 CSS 文件。然后，我们在页面中创建了一个空的 `div` 元素，并给它一个唯一的 ID（这里是 `calendar`）。接下来，在 JavaScript 中，我们使用 jQuery 的 `$(document).ready()` 方法来确保页面已经加载完毕后再初始化 FullCalendar。最后，我们指定了一个事件数据源，这个数据源只包含一个事件，它的标题是 `My Event`，开始时间是 2021 年 9 月 1 日。 当你打开这个页面时，你应该能看到一个简单的日历，上面显示着一个事件。你可以尝试添加更多的事件，或者尝试使用 FullCalendar 的其他功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值