• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > fullCalendar中文API官方文档

fullCalendar中文API官方文档

作者:goosman 字体:[增加 减小] 来源:互联网 时间:2017-05-11

goosman通过本文主要向大家介绍了fullcalendar中文api,fullcalendar api,fullcalendar中文文档,fullcalendar中文,fullcalendar文档等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

1. 使用方式: 引入相关js, css后, $(‘#div_name').fullCalendar({//options}); 接受的是一个option对象

 2. 普通属性

 2.1. year, month, date: 整数, 初始化加载时的日期.

 2.2. defaultView: 字符串类型, 默认是'month;

  2.2.1. 允许的views:

   2.2.1.1. month 一页显示一月, 日历样式

   2.2.1.2. basicWeek 一页显示一周, 无特殊样式

   2.2.1.3. basicDay 一页显示一天, 无特殊样式

   2.2.1.4. agendaWeek 一页显示一周, 显示详细的24小时安排(也就是议事日程)

   2.2.1.5. agendaDay 一页显示一天, 显示详细的24小时安排

 2.3. header: 定义按钮/文本在日历的顶部, false说明不使用header., 使用left, center, right三个属性来进行布局, 默认是{left: ‘title', center: ‘', right: ‘today prev, next'}, 支持使用的属性按钮:

  2.3.1. title: 一个包含当前日期的文本

  2.3.2. prev: 根据view的不同, 返回上一月/周/天

  2.3.3. next: 根据view的不同, 返回下一月/周/天

  2.3.4. prevYear: 使日历返回到上一年

  2.3.5. nextYear: 使日历返回下一年

  2.3.6. today: 将日历移动到当天.

  2.3.7. view name: 上面列举的支持views名称, 用来切换views

 2.4. buttonText: 定义header中使用的按钮的显示文本: 接受的属性名: prev, next, prevYear等等

 2.5. aspectRatio: 接受一个浮点参数, 调整宽高比例.

 2.6. allDayDefault: 布尔类型, 默认true, 决定每个CalEvent的allDay属性的默认值. allDay标明一个日程事件是否是整天的, 也就是忽略具体的时间, 只计算天数. 默认情况下, 所有的新添加的日程时间不加说明, 都是allDay的, 可以通过设置allDayDefault, 使得新创建的日程时间, 默认情况下就是关注时间的.

 2.7. weekends: 布尔类型, 默认为true, 标识是否显示周六和周日的列.

  2.7.1. finxed: 每月固定显示6周.

  2.7.2. liquid: 可能会显示4, 5, 6周, 依赖于月份, 每周的高度会拉长到填充可变高度, 视aspectRatio而定, 这里月份的高度是定的.

  2.7.3. vairiable: 可能会显示4, 5, 6周, 依赖于月份, 每周的高度会有一个固定值, 也就是说, 整个月份的高度会随着有几周的行数而变化.

 2.8. allDaySlot: 布尔值, 默认是true, 标明在agenda views模式下的时候, 上面的all-day小块是否显示.

 2.9. allDayText: allDay区域的文本内容.

 2.10. firstHour: 整型, 默认值为6. 表示在agenda的views中, 刚打开的时候显示的是第n小时, 该table用scroll控制.

 2.11. slotMinutes: 整型, 默认值30, 表示在agenda的views中, 两个时间之间的间隔. 也就是没一个小时所在一行中另外分出来的每一个小行代表多少分钟.

 2.12. defaultEventMinutes: 整型, 默认值120, 和事件有关, 功能不确定.

 3. 日程编辑

 3.1. editable: Boolean类型, 默认值false, 用来设置日历中的日程是否可以编辑. 可编辑是指可以移动, 改变大小等.

 3.2. disableDragging: Boolean类型, 默认false, 所有的event可以拖动, 必须editable = true

 3.3. diableResizing: Boolean, 默认false, 所有的event可以改变大小, 必须editable = true

 3.4. dragRevertDuration: 拖动恢复的时间, 默认500毫秒, 表示一个不成功的拖动之后, 控件回复到原始位置的时间.

 3.5. dragOpacity: Float类型, 表示拖动时候的不透明度. 指定一个float数值, 表示所有的views下都使用该不透明度, 也可以赋值为一个对象, 通过views hash来指定特定的views中的不透明度, 在以对象通过views hash指定不透明度时, 可以指定一部分, 然后, 其他的用'': float的方式来标明其他的所有的views下都使用该不透明度.

  3.5.1. month

  3.5.2. week: basicWeek和agendaWeek

  3.5.3. day: basicDay和agendaDay

  3.5.4. agenda: agendaDay和agendaWeek

  3.5.5. agendaDay

  3.5.6. agendaWeek

  3.5.7. basic: basicWeek和basicDay

  3.5.8. basicWeek

  3.5.9. basicDay

  3.5.10. ‘': 空的字符串, 表明所有其他的views

 4. 时间和日期的格式化

 4.1. 支持的格式化占位符

  4.1.1. s: 秒

  4.1.2. ss: 秒, 两位

  4.1.3. m: 分钟

  4.1.4. mm: 分钟, 两位

  4.1.5. h: 小时, 12小时制

  4.1.6. hh: 小时, 12小时制, 两位

  4.1.7. H: 小时, 24小时制

  4.1.8. HH: 小时, 24小时制, 两位

  4.1.9. d: 日期数字

  4.1.10. dd: 日期数字, 两位

  4.1.11. ddd: 日期名称, 缩写

  4.1.12. dddd: 日期名称, 全名

  4.1.13. M: 月份数字

  4.1.14. MM: 月份数字, 两位

  4.1.15. MMM: 月份名称, 缩写

  4.1.16. MMMM: 月份名称, 全名

  4.1.17. yy: 两位的年份

  4.1.18. yyyy: 4位的年份

  4.1.19. t: 上下午加 a或者p

  4.1.20. tt: 上下午加am或pm

  4.1.21. T: 上下午加A 或者P

  4.1.22. TT: 上下午加AM或PM

  4.1.23. u: ISO8601格式

  4.1.24. S: 给日期加上st, nd, rd, th等后缀, 表明是第几天

  4.1.25. 特殊字符:

   4.1.25.1. ‘…' 原意输出文本

   4.1.25.2. ‘' 表示一个单引号

   4.1.25.3. (…), 括号内的占位符表示的格式化日期中, 至少有一个不为空, 才显示括号内的这一组格式化字符串

 4.2. titleFormat: string/object: 确定header中的title展示日期的格式, 这里也可以使用view hash的方式通过对象进行配置, 如果使用view hash的方式, 配置, 则每种view中的title的格式都是不一样的.

 4.3. columnFormat: string/object, 和titleFormat配置方式一样, 影响各种view中的每列的表头显示文本. 文档中关于allDay为false时的解释不明白.

 4.4. timeFormat: 默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.

 4.5. axisFormat: string, 默认h(:mm)tt, 影响agenda views下的最左的一列的时间显示方式.

 4.6. views hash: 现在支持view hashes的选项有: dragOpacity, titleFormat, columnFormat, timeFormat

 5. formatDates: $.fullCalendar.formatDates(date1, date2, formatString, [options]): 和formatDate类似, 但是接受两个date, 在格式化字符串中, 使用{…}来格式化第二个date

 6. Event sources:

 6.1. events: array/string/function:

  6.1.1. 配置事件源

   6.1.1.1. 数组是硬编码的日程事件.

   6.1.1.2. 提供一个URL, 该URL返回一个json或数组的日程事件组, GET参数视startParam和endParam选项而定.

   6.1.1.3. 提供一个函数, 以自定义的方式抓取数据, 该函数需要接受参数start, end, callback, 分别表示抓取的日程事件的开始时间, 结束时间, 抓取结束后的回调比如:

events: function(start, end, callback) {$.getJSON(“/myscript”, {start: start.getTime(), end: end.getTime()}, function(result) {callback(result);})}

 6.2. eventSources: Array, 就像events选项一样, 但是, 这个用来配置多个日程事件数据来源.

 6.3. startParam: string, 默认值: start, 这个就是在使用URL方式获取events数据源的时候, 自动插入到URL中的参数, 表示当前需要抓取的日程事件的起始时间

 6.4. endParam: string, 默认值: end, 和startParam参数意义相同, 表示要抓取的日程事件的终止时间

 6.5. cacheParam: 当使用JSON url方式获取日程事件时, 为了防止ajax自身的缓存带来的数据不同步问题, 加入的鉴别参数名, 值是由full calendar控制加入的当前时间. 不懂可以查询ajax缓存解决方案.

 7. CalEvent对象: 标准的当前使用的日程事件源(请注意区分这里的日程事件和计算机领域的事件之间的区别, 这里的事件是业务上的, 表明在某个时间做某事的一个记录, 而计算机领域的事件则是用户对计算机的一个动作)

 7.1. id: Integer/String: 日程事件的标识, repeat型的日程事件拥有相同的id

 7.2. title: string, 日程事件的标题

 7.3. allDay: Boolean, 默认true, 标明一个日程事件是否是关注具体时间的, 如果是true, 表明该日程事件不关注具体时间, 是当天所有时间都有的, 所以, 该日程事件的日期会被忽略, 在agenda view中通过专门的allDay区域显示, 如果是false, 则是关注开始时间和结束时间的.

 7.4. date: Date类型, 是start属性的别名

 7.5. start: Date类型, 一个JavaScript的Date对象, 方便起见, 可以使用IETF格式, ISO8601格式以及UNIX时间戳等多种方式的字符串表示.

 7.6. end: Date(可选的): 和start一样, 不过表示日程时间的结束时间.

  7.6.1. 如果对应的日程事件是allDay的, 那么10月1日8时到10月3日8时就表示跨度是3天

  7.6.2. 如果对应的日程时间不是allDay的, 那么10月1日8时10月3日8时则表示跨度是48个小时.

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • fullCalendar中文API官方文档

相关文章

  • 2017-05-11jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
  • 2017-05-11JavaScript中 this 指向问题深度解析
  • 2017-05-11jQuery实现单击按钮遮罩弹出对话框效果(1)
  • 2017-05-11详解AngularJS ui-sref的简单使用
  • 2017-05-11浅谈jQuery中的$.extend方法来扩展JSON对象
  • 2017-05-11Vue2.0表单校验组件vee-validate的使用详解
  • 2017-05-11canvas实现图像放大镜
  • 2017-05-11JavaScript瀑布流布局实现代码
  • 2017-05-11利用CSS、JavaScript及Ajax实现图片预加载的三大方法
  • 2017-05-11详谈js中window.location.search的用法和作用

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • nodejs中使用HTTP分块响应和定时器示例代码
    • vue监听滚动事件实现滚动监听
    • Bootstrap 填充Json数据的实例代码
    • 微信小程序 JS动态修改样式的实现代码
    • easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
    • Vue.js自定义指令的用法与实例解析
    • canvas压缩图片转换成base64格式输出文件流
    • js DOM BOM基础操作
    • 基于JS实现9种不同的面包屑和分布式多步骤导航效果
    • js实现返回顶部效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有