一个强大的js日历控件 FullCalendar 外加一堆可以直接运行的测试代码拿走不谢

最新推荐文章于 2025-04-22 14:44:14 发布

末贵

最新推荐文章于 2025-04-22 14:44:14 发布

阅读量2.4k

点赞数

分类专栏： Js&JQuery 文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/moguicy123/article/details/114866768

版权

Js&JQuery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了FullCalendar日历控件，提供官网和文档地址，以及下载链接。FullCalendar适合需要高级日期功能的场景。文章展示了初始化日历的步骤，强调在结合jQuery时的选择器使用技巧，并提供了基本使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资料地址

简单介绍

这样的控件作为简单的日期选择，是显得比较笨重的，但如果需要比日期选择更高级的功能，FullCalendar可提供了更多的选择。

初始化日历

下载好日历控件之后，解压到某个目录，然后创建一个html文件，需要引入
main.css和main.js两个文件，

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/main.css' rel='stylesheet' />
    <script src='fullcalendar/main.js'></script>
    <script>
		//文档加载完成之后执行的代码
      document.addEventListener('DOMContentLoaded', function() {
        
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth'
        });
        calendar.render();
      });

    </script>
  </head>
  <body>
    <div id='calendar'></div>
  </body>
</html>

初始化之后的效果如下
在这里插入图片描述

如果是需要结合Jquery 使用的话，要注意一点，下使用Jquery选择器时：$("#calendar")[0]
因为返回的是一个数组，所以需要明确一下初始化的具体元素，当然在Jquery中获取到选择的第一个元素的方式不止一种，这里不对Jquery做过多的说明。

FullCalendar 基本使用

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset='utf-8' />
		<link href='fullcalendar-5.5.1/main.css' rel='stylesheet' />
		<script src='fullcalendar-5.5.1/main.js'></script>
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				var calendarEl = document.getElementById('calendar');
				var calendar = new FullCalendar.Calendar(calendarEl, {

					initialView: 'dayGridWeek',
					//初始化本地语言
					locale: 'zh-cn',
					//设置视图区域高度
					contentHeight: window.screen.height - 290,
					//初始化顶部工具栏
					headerToolbar: {
						left: 'prev',
						center: 'title',
						right: 'today,next'
					},
					//把右侧today按钮翻译为中文
					buttonText: {
						today: '今天',
					},
					//事件点击
					eventClick: function(info) {
						var eventObj = info.event;
					},
					//日期点击
					dateClick: function(info) {
						alert(info.dateStr);

					},
					select: function(info) {
						alert('selected ' + info.startStr + ' to ' + info.endStr);
					},

					selectable: true,
					//配置获取后台数据的url
					//eventSources: ["url"],
					//静态数据
					events: [{
							"title": "工作计划",
							"start": "2021-03-15",
							"color": "green"
						},
						{
							"title": "技术评估",
							"start": "2021-03-16",
							"end": "2021-03-06"
						},
						{
							"title": "开会",
							"start": "2021-03-15T10:30:00+00:00",
							"end": "2021-03-15T12:30:00+00:00"
						},
						{
							"title": "午饭时间",
							"start": "2021-03-16T12:00:00+00:00"
						},
						{
							"title": "客户回访",
							"start": "2021-03-18T07:00:00+00:00",
							"color": "red"
						}
					],
					//对于返回的数据，如果需要重新组织内容，则使用事件数据转换方法
					eventDataTransform: function(data) {
						data.title = data.title + "-append";
						//  data.display='background';
						return data;
					},

				});
				calendar.render();
			});
		</script>
	</head>
	<body>
		<div id='calendar'></div>
	</body>
</html>