dovekg/simple-calendar

Tower.im使用的日历组件

Simple Calendar

团队协作工具Tower使用的日历组件，依赖：

• JQuery 2.0+
• Simple Module
• Moment.js

使用方法

在页面里引用相关脚本和样：

<link media="all" rel="stylesheet" type="text/css" href="path/to/calendar.css" />
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/module.js"></script>
<script type="text/javascript" src="path/to/moment.js"></script>
<script type="text/javascript" src="path/to/calendar.js"></script>

初始化calendar对象：

var calendar = simple.calendar({
  el: '#calendar',
  month: '2014-11',
  events: [...]
});

API 文档

####初始化选项

el selector/jquery object/dom element

初始化日历的容器元素，必选

month string: YYYY-MM

指定日历应该渲染哪个月的日历，必选

events array

被渲染的日历事件数据

todos array

被渲染的日历任务数据

eventKeys object

日历事件的数据结构映射，默认值是：

{
  id: 'id', // 事件的id
  start: 'start', // 事件开始时间
  end: 'end', // 事件结束时间
  content: 'content' // 事件内容
}

组件会按照会按照这个key值映射重构传入的数据，原始数据会被保存在origin对象中。

todoKeys object

日历任务的数据结构映射，默认值是：

{
  id: 'id', // 任务的id
  due: 'due', // 任务的截止时间
  completed: 'completed', // 任务的完成状态
  content: 'content' // 任务的内容
}

组件会按照会按照这个key值映射重构传入的数据，原始数据会被保存在origin对象中。

eventHeight number

日历渲染事件的高度，默认值是22，这个值需要跟CSS里的高度设置一致。

方法

findEvent(eventId)

查找eventId对应的event数据，返回event object

addEvent(events)

添加新的日历事件，接受对象或数组

clearEvents()

清除所有的日历事件

removeEvent(event)

清除指定的日历事件，接受event object或者eventId

replaceEvent(newEvent)

用新的event数据替换老的event数据，通过eventId来匹配

findTodo(todoId)

查找todoId对应的任务数据，返回todo object

addTodo(todos)

添加新的日历任务，接受对象或数组

clearTodos()

清除所有的日历任务

removeTodo(todo)

清除指定的日历任务，接受todo object或者todoId

replaceTodo(newTodo)

用新的todo数据替换老的todo数据，通过todoId来匹配

setMonth(month)

重新设置渲染的月份，接受的字符串格式为：YYYY-MM，同时会清除所有的事件和任务

dateInMonth(date)

判断某个日期是不是在当前渲染的月历里面，接受moment对象，返回Boolean值

isAllDayEvent(event)

判断某个事件是否是全天事件（开始时间和结束时间分别在某一天的开始和结束），返回Boolean值

destroy()

销毁calendar对象，恢复初始化前的状态

自定义事件

eventrender(event, $event)

渲染事件的时候触发，传入event数据和对应的dom元素作为参数

todorender(todo, $todo)

渲染任务的时候触发，传入todo数据和对应的dom元素作为参数

dayclick($day)

点击日历上的某一天时触发，传入对应的dom元素作为参数

eventclick(event, $event)

点击日历上的事件时触发，传入对应事件的数据和dom元素作为参数

todoclick(todo, $todo)

点击日历上的任务时触发，传入对应任务的数据和dom元素作为参数