javascript - FullCalendar 插件 3.1.0 显示不正确-6ren

javascript - FullCalendar 插件 3.1.0 显示不正确

转载作者：行者123 更新时间：2023-11-28 15:55:13

25

4

当我执行下面的代码时，FullCallendar 没有正确显示。我得到的结果如下:

根据 FullCallendar 演示，它应该如下所示: 调试控制台不显示任何错误。我究竟做错了什么？

$(document).ready(function() {

	$('#calendar').fullCalendar({
		defaultDate: '2016-12-12',
		editable: true,
		eventLimit: true, // allow "more" link when too many events
		events: [
			{
				title: 'All Day Event',
				start: '2016-12-01'
			},
			{
				title: 'Long Event',
				start: '2016-12-07',
				end: '2016-12-10'
			},
			{
				id: 999,
				title: 'Repeating Event',
				start: '2016-12-09T16:00:00'
			},
			{
				id: 999,
				title: 'Repeating Event',
				start: '2016-12-16T16:00:00'
			},
			{
				title: 'Conference',
				start: '2016-12-11',
				end: '2016-12-13'
			},
			{
				title: 'Meeting',
				start: '2016-12-12T10:30:00',
				end: '2016-12-12T12:30:00'
			},
			{
				title: 'Lunch',
				start: '2016-12-12T12:00:00'
			},
			{
				title: 'Meeting',
				start: '2016-12-12T14:30:00'
			},
			{
				title: 'Happy Hour',
				start: '2016-12-12T17:30:00'
			},
			{
				title: 'Dinner',
				start: '2016-12-12T20:00:00'
			},
			{
				title: 'Birthday Party',
				start: '2016-12-13T07:00:00'
			},
			{
				title: 'Click for Google',
				url: 'http://google.com/',
				start: '2016-12-28'
			}
		]
    });
});

body {
	margin: 40px 10px;
	padding: 0;
	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	font-size: 14px;
}

#calendar {
	max-width: 900px;
	margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.print.css" rel="stylesheet" type="text/css" />

<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
</head>
	<body>
		<div id='calendar'></div>
	</body>
</html>

最佳答案

我刚刚看了一下那个样式表，注意到它的 URL 中有单词 print。然后我查看了代码，评论说它适用于打印机友好版本。查看您的屏幕截图，我同意它正在做的事情。

我从 URL 中删除了 .print，看起来那个就是您需要的那个。

http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css

尝试删除打印机的那个。

关于javascript - FullCalendar 插件 3.1.0 显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41270805/

25

4

0

文章推荐： javascript - angularJS + jQuery jeditable 插件协同工作

文章推荐： swift - AVPlayer addObserver 永远不会被调用

文章推荐： javascript - 尝试将随机图像与其他随机图像交换

文章推荐： swift - 试图让 webView 加载 2 个 URLS

fullcalendar - FullCalendar 中的动态事件模板
有没有办法在 FullCalendar 中动态更改事件模板？更新。我想要的是指定新的事件 html(例如在 eventRender 回调中)并使 FullCalendar 将其用于我的事件渲染。像
fullcalendar - Fullcalendar 的彩色周末
我正在使用 FullCalendar 组件，我需要为周末、周五和周六着色。我已经按照这里的建议使用了以下内容: Can I set a different color for the weekend
fullcalendar - FullCalendar 中放置事件的时区
我正在实现 fullcalendar 并在时区问题上苦苦挣扎。这是代码: $('#calendar').fullCalendar({ //re-initialize the calendar
fullcalendar - 动态重新绘制 fullCalendar
我希望 fullCalendar 在不重新加载页面的情况下重绘自身(所有结构和事件)。场景: 我正在使用支持 Resource View 的 fullCalendar 补丁。 .对于一些用户操作，我
fullcalendar - 单个页面上的多个 FullCalendar
我想在同一页面上添加多个 FullCalendars(可选)以安排不同类型的事件并将信息保存在数据库中，但查看演示/示例代码，我似乎每页只能添加一个日历，因为它由呈现。 .您能否让我知道是否有办法
jquery - Fullcalendar:可拖动对象拒绝将 fullcalendar 视为可放置，即使 fullcalendar 接受放置
我已将 FullCalendar 设置为接受 drop，确实如此。但是我用 revert:'invalid' 构造的可拖动对象似乎无法将 FullCalendar 上的日期识别为可放置的，并恢复回来。
fullcalendar - 在页面中隐藏 FullCalendar schedulerLicenseKey
我公司最近购买了 Full-Calendar Scheduler 插件。有没有正确的方法在代码中隐藏许可证 key ？对此有哪些好的做法？最佳答案你是对的，没有办法完全隐藏 schedulerLi
fullcalendar-scheduler - FullCalendar 资源可点击
在 FullCalendar如何使资源可点击？我已经检查了 API，但我看不到任何相关内容，我是否遗漏了什么？我在找 resource-click -事件就像我们对事件一样？最佳答案在 res
fullcalendar - 在 fullCalendar 中将数据添加到每天的单元格中
我有额外的数据(在我的例子中是一个数字)，它是通过一个 javascript 函数获得的——我想在每天的单元格中显示它。例如 - 如果天数在右上角，我希望它显示在左上角 - 每天自动显示。我看到有
fullcalendar - 如何从 fullcalendar 对象中读取选项
我在单个页面上创建多个 fullcalendar，我想编写一个事件渲染回调，以便它可以从调用它的 fullcalendar 实例中读取选项，例如 minTime 和 maxTime，不知道如何做这个。
fullcalendar - 可以在 FullCalendar 中设置默认时隙高度吗？
看起来默认值为 20 像素，但我希望将其提高，因此长度为 1 个时隙的事件将能够显示事件标题和正文。当前，当事件长度为 1 个时隙时，仅显示事件标题。最佳答案任何仍在寻找新版本答案的人。在新版本
fullcalendar - 在 Fullcalendar 中更改过去事件的颜色
我正在尝试实现 this solution在 Fullcalendar 中“变灰”过去的事件，但我没有任何运气。不过，我不太精通 Javascript，所以我认为我犯了一些愚蠢的错误。我已经将建议的
fullcalendar - 如何取消 fullCalendar 中的旧选择？
我使用 jQuery fullCalendar (http://arshaw.com/fullcalendar/docs/selection/unselectAuto/) 我使用这个日历的可选版本 (
fullcalendar - 如何在 FullCalendar 中编辑事件的宽度？
这看起来非常简单，但我花了半天时间把头撞在墙上，试图弄清楚为什么我的全日历事件只显示在 77 像素，而单元格(月 View )的宽度似乎是 90 像素或更高。我曾尝试修改 fc-event css 规
fullcalendar - 如何更改 fullcalendar 中的列时间格式？
我正在尝试在全日历中将时间格式更改为 24 小时制。我试图找到它 here但我无法弄清楚。这里的代码片段: jQuery('#calendar').fullCalendar({ heade
fullcalendar - 如何防止 fullcalendar 在事件标题中显示开始时间？
在月 View 中 fullcalendar 有一个很好的功能，可以在非全天事件的顶行显示开始时间。如果您不想在事件标题中提供更多详细信息，这可能很有用。我想在月 View 中显示几个详细信息，例如
fullcalendar - 如何在 fullcalendar 中显示事件的描述
如何在 fullcalendar 中显示事件的描述？我有具有标题和描述的事件。那么如何显示描述呢？最佳答案当您添加标题和描述时，它将连接起来。使用以下代码，您可以连接标题: eventRen
fullcalendar - 访问 FullCalendar 中的日历事件数据
我正在尝试使用 FullCalendar 在网页上呈现 Google 日历中的事件。我想要开始日期/时间、描述和地点。 future 事件在一个 div 中，过去事件在另一个 div 中。现在，我的
fullcalendar - 在 FullCalendar 中突出显示所选日期
我正在尝试突出显示 FullCalender.io 中的选定日期(与当前日期类似)。已关注 FullCalendar - Highlight a particular day in week vie
fullcalendar - 如何向 FullCalendar 的单元格添加按钮和链接
我是 FullCalendar 新手。在我的项目中，我需要显示带有时间范围的日历以及每天为每个培训中心分配的参与者。更准确地说，一天可以有很多个培训时段，由培训中心进行。因此，我想展示哪个培训中心分配

首页

博学

6Ren·AI

商城

javascript - FullCalendar 插件 3.1.0 显示不正确