JS日程管理插件FullCalendar中文说明文档

JS日程管理插件FullCalendar是一款强大的工具，它为开发者提供了丰富的属性设置和方法调用，以便快速完成日历日程的开发。本文将详细梳理FullCalendar的常用属性和方法，以及回调函数等，以中文文档的形式呈现，供广大开发者参考。

一、普通显示设置

1. header属性：设置日历头部信息，包括左中右三个位置的不同配置，如标题、月份/周/日切换按钮等。

2. theme属性：决定是否使用jquery的ui主题，需要加载相关css和js文件。

3. buttonIcons属性：设置header中按钮的样式，如prev、next等。

4. firstDay属性：设置一周中显示的第一天是哪天，默认周日是0，周一是1。

5. isRTL属性：当设置为true时，日历从右往左显示。

6. weekends属性：决定是否显示周末，即周六和周日。

7. hiddenDays属性：隐藏一周中的特定几天，如隐藏周二和周五。

8. weekMode属性：在月视图中显示周的模式，包括固定显示6周高、不固定周数但高度随周数变化、不固定周数但高度固定等。

9. weekNumbers属性：是否在日历中显示周次，即一年中的第几周。

10. weekNumberCalculation属性：设置周次的显示格式。

二、高度设置

1. height属性：设置日历的整体高度，包括header部分。

2. contentHeight属性：设置日历主体内容的高度，不包括header部分。

3. aspectRatio属性：设置日历单元格宽度与高度的比例。

三、浏览器窗口变化相关

1. handleWindowResize属性：决定是否随浏览器窗口大小变化而自动变化。

2. windowResize回调函数：当浏览器窗口变化时触发，可以进行相关操作。

3. render方法：绑定日历到指定的id上。

通过FullCalendar提供的API，开发者可以根据实际需求快速完成日历日程的开发，实现丰富的日程管理功能。以上中文文档仅供参考，更多详细信息和用法请查阅FullCalendar官方文档。深入了解FullCalendar：视图、方法以及日程选项

===========================

在Web开发中，FullCalendar无疑是一个强大的工具，它允许开发者轻松地在网页上创建和管理日历。本文将深入FullCalendar的各个方面，包括视图、方法和日程选项。

一、视图

-

FullCalendar提供了五种不同的视图，以满足不同的需求。

1. month（月视图）：展示整个月的日历。

2. basicWeek（基本周视图）：以简洁的方式展示一周的日历，左侧不显示具体时间。

3. basicDay（基本日视图）：展示一天的详细日历，左侧同样不显示具体时间。

4. agendaWeek（周视图带日程）：展示一周的日历，同时包含日程安排。

5. agendaDay（日视图带日程）：详细展示一天的日历，包括各种日程安排。

二、视图属性

每个视图都有一系列的属性，这些属性描述了视图的特性。

name：视图的名称，如"month"、"basicWeek"等。

title：视图的标题，例如"2013年9月"。

start和end：视图中开始和结束的日期。

visStart和visEnd：可访问的日期范围。

三. 方法

-

FullCalendar提供了一系列的方法，允许开发者动态地操作日历。

destroy：销毁日历，将其恢复到初始化前的状态。例如，使用`$('id').fullCalendar('destroy');`来销毁一个特定的日历。

getView：获取当前视图的详细信息，如标题。例如，使用`var view = $('calendar').fullCalendar('getView');`来获取当前视图的标题。

changeView：切换视图。使用`.fullCalendar('changeView', viewName)`来切换到指定的视图。其中，`viewName`为上述五种视图中的一种。

四、日程选项

对于agendaWeek和agendaDay视图，FullCalendar还提供了一系列的日程选项。这些选项允许开发者定制日历的显示方式，以满足特定的需求。具体的选项包括但不限于事件的颜色、事件的高度、是否显示全天事件等。

--

日历属性设置详解

让我们深入了解一系列关于日历的属性设置，以定制我们的日历体验。通过调整这些属性，我们可以确保日历功能符合我们的需求，提供最佳的用户体验。

属性描述

allDaySlot: 在agenda视图模式下，此属性决定是否显示全天的日程安排。默认值为true，意味着在日历上方会显示全天的日程信息。

allDayText: 定义日历上方显示全天信息的文本内容。例如，我们可以将其设置为“全天事件”。

axisFormat: 设置日历左侧的时间显示格式。默认格式为'h(:mm)tt'，即显示如5:30pm的时间格式。

slotMinutes: 在agenda视图中，设置两个时间之间的间隔（分钟数）。例如，如果设置为30分钟，那么每半小时就会有一个时间间隔。

defaultEventMinutes: 事件默认的执行时间长度。如果事件对象没有指定执行时间，它将默认执行两个小时。这对于没有特定时间需求的事件非常有用。

firstHour: 当切换到agenda视图时，初始滚动条滚动到的时间位置。例如，设置为6意味着滚动条将默认滚动到早上六点钟的位置。

minTime & maxTime: 设置显示时间的起始和结束点。例如，我们可以设定从早上八点开始显示时间，一直到晚上十二点结束。这些设置对于特定时间范围的日历非常有用。

slotEventOverlap: 设置视图中的事件是否允许重叠覆盖。这对于在繁忙的时间段内展示多个事件非常有用。默认值为true，意味着事件可以重叠显示。

当前日期设置描述

除了上述属性外，我们还可以通过一系列方法来设置日历的当前日期和时间。例如：

year: 设置日历显示的年份为特定的四位数字年份，如2023。如果不设置，则默认为当前年份。

month: 设置初始化日历的月份。从一月开始为第一个月（即索引为0）。如果不指定年份和月份，则默认为一月开始。我们可以通过此属性跳转到特定的月份进行查看或编辑日程安排。通过调用方法如`$('calendar').fullCalendar('prev');`和`$('calendar').fullCalendar('next');`来切换到上一或下一个月份视图。还有`prevYear`和`nextYear`方法来切换到上一年或下一年视图。而`today`方法则可以直接跳转到当前日期查看日程安排。通过调用`gotoDate`方法指定进入特定日期的视图。如果指定参数如年份、月份和日期则可以精确地定位到某一天的日程安排上。而`incrementDate`方法则以当前时间为轴进行日历的跳转操作可以方便我们快速地向前或向后移动时间并查看对应的日程安排变化状态等等；通过调用 `getDate` 方法获取当前日历中的日期信息；最后我们可以自定义日历显示的文本信息比如将月份等文本信息设置为中文以便于用户理解和使用等来满足项目需求实现个性化的定制体验等等功能来优化我们的日历使用体验让我们的生活更加便捷高效智能化管理自己的时间和任务安排实现工作和生活的无缝对接进一步提升个人效率和整体幸福感满足广大用户的实际需求同时也有助于我们更好地了解和把握个人时间和生活规划的方向和目标从而为未来的发展打下坚实的基础从而实现高效工作和愉快生活的完美结合从而享受到科技带来的便利和高效提升生活质量和工作效率让我们的生活更加美好和充实以及高效化智能化的管理方式为我们的生活带来更多的便利和便捷体验方式让我们能够更好地掌控自己的时间和生活安排提高个人效率和生活质量让我们能够更加高效地管理和规划自己的时间和任务享受便捷高效的科技服务体验到个性化定制的体验方式和便利性增强个人的组织能力和工作效率等多元化的优点让我们能够更加智能地管理自己的时间和任务安排实现高效的工作和生活平衡状态为我们的未来发展打下坚实的基础并带来更多的便利性和创新性体验方式等等优点使得我们的日常生活更加便捷高效智能化地管理我们的时间和任务安排让我们的生活更加美好和充实同时提升我们的工作效率和生活质量等等优点使得我们的日常生活更加丰富多彩和高效化智能化的管理方式让我们的未来更加美好和便捷高效智能化地满足用户的个性化需求和使用习惯从而实现更高效化的生活方式和提高个人的生活质量和幸福感实现未来生活方式的科技革新和管理创新从而更好地适应现代社会的快节奏生活和发展趋势让我们的日常生活更加美好高效智能化等等一系列功能和特点提升了用户体验的同时也使得我们的生活变得更加美好高效智能化以及便捷化等多元化的优点使得我们的日常生活更加丰富多彩和充实提高了我们的工作效率和生活质量以及未来的发展趋势等等优点使得我们的日常生活更加美好高效智能化地满足广大用户的需求和期望实现个性化的定制体验方式和便利性让我们的生活变得更加便捷高效智能化提升生活质量和工作效率为我们带来更多的便利性和创新性体验方式等等一系列功能和特点丰富了我们的日常生活和工作方式提高了我们的工作效率和生活质量让我们能够更好地掌控自己的时间和生活安排享受到科技带来的便利和高效体验到个性化定制的生活方式为我们带来更多的便利性和创新性体验等等优点为我们的生活带来更多的惊喜和便利让我们的生活更加美好高效智能化地满足用户的期望和需求等等优点让我们的日常生活更加充实和有意义等等一系列功能和特点使得我们的日常生活更加丰富多彩和高效智能化地满足用户的需求和期望等等优点让我们的未来生活更加美好和高效化智能化的管理方式为我们的未来发展打下坚实的基础并实现个性化的定制体验方式和便利性让我们的生活更加美好和属性与设置指南

在日历应用中，属性设置是定制用户体验的关键环节。下面，我们将详细介绍一些重要的属性及其功能，帮助您更好地理解和使用这些设置。

一、时间格式（timeFormat）

当您希望自定义日程事件的时间显示格式时，可以通过设置timeFormat属性来实现。例如，将timeFormat设为'H:mm'将显示24小时制的时间，如10:30。您还可以根据需要设置为其他格式。

二、列头信息格式（columnFormat）

columnFormat属性用于设置日历列表头信息的显示格式。默认情况下，它包含月份、周次和日期等不同部分的格式设置。您可以根据需求调整这些格式。

三、日历头部信息格式（titleFormat）

titleFormat属性用于定义日历头部的显示文本。它可以根据不同的场景（如月份、周次和日期等）显示不同的格式。您可以根据喜好进行个性化设置。

四、按钮文本（buttonText）

buttonText属性允许您自定义日历头部各按钮的显示文本，如“上一月”、“下一月”、“今天”、“月视图”等。通过修改这些按钮的文本，您可以提供更加符合用户习惯的交互体验。

五、月份名称（monthNames）与简写（monthNamesShort）

这两个属性分别用于设置月份的全称和简写。您可以根据需要自定义这些名称，以便更好地适应您的应用或网站的语言和环境。

六、星期名称（dayNames）与简写（dayNamesShort）

类似于月份名称，您也可以通过设置dayNames和dayNamesShort属性来自定义星期的全称和简写。这些设置可以帮助您更好地呈现日历的周次信息。

七、周次标题（weekNumberTitle）

通过weekNumberTitle属性，您可以设置周次的显示方式。例如，您可以决定是否在日历中显示一年中的第几周。

八、鼠标交互回调（鼠标单击和滑过）

当用户在日历中单击或滑过某个元素时，会触发相应的回调函数。这些回调函数允许您在用户与日历互动时执行特定的操作或处理逻辑。通过合理设置这些回调，您可以提供更加动态和交互性强的日历体验。

FullCalendar属性详解

当我们谈及FullCalendar这一强大的日历插件时，有许多重要的属性和方法值得我们深入了解。下面，我将对其中一些关键属性进行生动且详细的描述。

点击交互属性

想象一下，当你在日历中单击某一天或某个事件时，FullCalendar提供了几个关键的属性来响应这些点击交互。

1. dayClick: 当你单击日历中的某一天时，这个属性会触发一个回调函数。在这个函数中，你可以获取到点击的日期、是否是全天的、点击事件的详细信息以及当前的视图。这样，你可以根据这些信息执行相应的操作。

2. eventClick: 与dayClick类似，但当你点击日历中的某个事件（日程）时，会触发此操作。你可以获取到事件对象、点击事件的详细信息以及当前视图对象。

3. eventMouseover 和 eventMouseout: 这两个属性分别对应鼠标划过和离开事件时的交互，允许你在鼠标悬停时提供特定的反馈或操作。

选择操作属性

FullCalendar允许用户通过点击或拖动来选择日历中的对象。以下是与此相关的属性：

selectable: 允许用户选择日历中的天和时间。

selectHelper: 当选择时间时，显示提示信息，仅在周/天视图中可用。

unselectAuto: 当点击页面日历以外的位置时，是否自动取消当前选中状态。

unselectCancel: 指定哪些元素不会取消当前的选中状态。

当选择或取消选择时，FullCalendar还提供了回调函数，如select和unselect，允许你在选择或取消选择时执行特定的操作。你还可以通过方法如select和unselect来手动选择或取消选择某个时间。

日程事件数据

这是FullCalendar最为核心的部分。这里设置的是关于日程事件的相关信息。这些事件是日历的核心内容，包含了各种预约、会议、活动等。你可以通过定义事件的属性、样式和行为来完全控制这些事件在日历中的展示和交互。

FullCalendar提供了丰富的属性和方法，使得我们可以根据自己的需求定制日历的交互和展示。无论是简单的日程安排还是复杂的事件管理，FullCalendar都能满足你的需求。希望你能更深入地了解FullCalendar的属性和功能，从而更好地使用它来管理你的日程。Event Object：事件对象，是存储日历事件信息的标准对象，其中title和start是必须属性。该对象拥有多种属性，用于描述事件的各种信息和特征。

属性详解：

id：事件的唯一标识，重复的事件具有相同的id。

title：事件在日历上显示的标题。

allDay：布尔值，表示事件是否全天。

start：事件的开始时间。

end：事件的结束时间，可选。

url：当指定后，点击事件将打开对应url。

className：指定事件的样式。

editable：事件是否可编辑，可编辑意味着可以移动、改变大小等。

source：指向此事件的event source对象。

color、backgroundColor、borderColor、textColor：分别表示事件的颜色属性。

事件源对象：

事件源是日历中的数据来源。FullCalendar支持多种形式的事件源，包括数组、函数调用、JSON数据以及Google Calendar feed。后续文章将详细介绍事件数据的操作，包括数据的查询、写入、更新和删除。

事件源相关参数属性：

eventSources：存储事件源信息的数组对象，可以是Arrays、Functions或URLs。

allDayDefault：是否为全天日程事件，显示这一天中所做的事情，默认值为true。

ignoreTimezone：是否忽略时区，默认值为true。

endParam：和startParam参数意义相同，表示要抓取的日程事件的终止时间，默认值为'end'。

lazyFetching：是否从缓存信息获取event，如从月视图切换到周视图，默认值为true。

eventDataTransform：将外部数据源转换成Fullcalendar可处理数据的回调函数。

loading：日历加载时的回调函数，当isLoading参数为true时触发一次，加载完毕时触发一次。

updateEvent：更新日历中的一个日程事件的方法，如果是重复的事件则都更新。

clientEvents：返回FullCalendar已存储到客户端的CalEvents对象数组的方法。

removeEvents：从日历中删除一个或多个日程事件的方法，可以传id或过滤器函数作为参数。

这些属性和方法共同构成了FullCalendar的事件对象和功能，为用户提供了丰富的日历操作体验。FullCalendar事件管理及相关设置

事件移除与重新获取

在使用FullCalendar时，有时需要根据需求移除或重新获取事件。

`removeEvents`方法：可以通过此方法移除一个或多个事件。你可以指定事件的ID或过滤器作为参数。

`refetchEvents`方法：重新从所有事件源获取事件并渲染它们。当事件源更新时，这是一个非常有用的方法。

`addEventSource`方法：为FullCalendar添加一个事件源。添加后，FullCalendar会立即从这个源获取事件并加载到日历中。

`removeEventSource`方法：移除一个事件源，同时删除该源上的所有事件。

事件渲染

对于事件的呈现，FullCalendar提供了多种属性和方法来进行定制。

`eventColor`、`eventBackgroundColor`、`eventBorderColor`和`eventTextColor`属性：用于设置事件的背景色、边框色和文本颜色。你可以使用任何支持CSS的颜色格式。

`eventRender`回调：当事件正在渲染时触发。

`eventAfterRender`回调：当事件渲染完成后触发。

`eventDestroy`回调：当事件从日历中移除时触发。

`renderEvent`方法：在日历重新获取事件源后，用于永久添加事件到日历。

`rerenderEvents`方法：重新渲染所有事件。

日程事件拖动和缩放

FullCalendar也支持事件的拖动和缩放功能，这依赖于jQuery UI的draggable和resizable插件。

`editable`属性：决定日历是否可编辑，即是否支持拖动和缩放操作。

`eventStartEditable`属性：决定是否在事件开始时就可以进行拖动。

`dragRevertDuration`属性：如果拖动操作未成功，事件多久后回复原状，单位为毫秒。

`dragOpacity`属性：在拖动过程中，事件的透明度。

`eventDragStart`和`eventDragStop`回调：在事件被拖动之前和之后触发。这些回调提供了关于位移、位置等数据的信息。

FullCalendar提供了丰富的API和方法来管理和定制你的日历事件。通过合理使用这些方法和属性，你可以创建出功能丰富、界面美观的日历应用。FullCalendar插件的使用指南与操作手册

=======================

一、事件触发回调

--

eventDrop

当拖拽完成并且时间改变时触发。该回调函数提供了以下参数：

`event`: 日程事件对象。

`dayDelta`: 保存日程向前或者向后移动了多少天。

`minuteDelta`: 这个值只有在agenda视图有效，表示移动的时间。

`allDay`: 如果是月视图，或者是agenda视图的全天日程，此值为true，否则为false。

`revertFunc`: 一个函数，可以调用以撤销此次事件移动。

`jsEvent`: 触发事件的原生JavaScript事件对象。

`ui`: 一个包含有关拖放操作的UI信息的对象。

`view`: 表示当前视图的名称的对象。

eventResizeStart 和 eventResizeEnd

当在一个日程事件改变大小之前和之后发生（不一定要改变成功）。回调函数参数与`eventDrop`类似。

eventResize

在日程事件改变大小并成功后调用。参数用法与`eventDrop`一致。

二、日期工具方法

--

formatDate

格式化日期，通过指定的格式返回一个字符串。支持本地化设置，如设置月份和星期的名称等。用法：`$.fullCalendar.formatDate(date, formatString [,options])`。

formatDates

一次格式化两个日期。用法与`formatDate`类似，但在`formatString`中使用大括号`{…}`来描述第二个日期的格式化方式。

parseDate

日期，将一个字符串格式成一个javascript的Date对象。支持的字符串格式包括ISO8601，IETF，UNIX时间戳等。用法：`$.fullCalendar.parseDate(string)`。

parseISO8601

专门用于将ISO8601格式的字符串转换成Date对象。用法：`$.fullCalendar.parseISO8601(string [,ignoreTimezone])`。

三、实际应用与操作

--

以上所述是FullCalendar插件的基本属性与方法。为了更深入地理解和使用，建议查看官方文档进行实际操作。您也可以通过阅读FullCalendar官方文档翻译版，来获取更详细的指导。通过实践，您将能更好地掌握FullCalendar的功能，灵活运用到实际项目中。

四、参考文献

官方文档

FullCalendar 官方文档翻译版

本文档的内容以FullCalendar插件的使用和操作为主，旨在帮助开发者更好地理解和使用此插件。如有更多疑问或需求，建议查阅官方文档或参与开发者社区进行讨论。