请选择 进入手机版 | 继续访问电脑版

开发者社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 安装 BPM 控件
查看: 3524|回复: 0

日历控件 FullCalendar开发手册

[复制链接]

40

主题

49

帖子

260

积分

超级版主

Rank: 8Rank: 8

积分
260
发表于 2016-5-17 17:35:27 | 显示全部楼层 |阅读模式
本帖最后由 tanglixu 于 2016-5-18 11:08 编辑

目录


第一章 概要
第二章 简单示例
第三章 数据绑定示例

第一章 概要


一、功能特性

1、按照日历模式显示和对数据交互操作
2、本控件内部封装的是 FullCalendar核心,详细请参考  英文Demo  英文Api 开源代码
3、通过方法 Init 传递参数,初始化控件
4、通过方法 Refresh 显示控件
5、提供方法GetInstance获取FullCalendar实例,通过该实例可以调用FullCalendart内部的方法
6、只需要到官方网站复制demo的代码即可看到相应的使用效果

二、主要方法

1、void Init(options)  初始化日历配置
2、void Refresh()  显示控件并读取数据
3、object GetInstance() 获取FullCalendar内部实例

第二章 简单示例



一、效果图
1.jpeg
二、开发过程

1、添加控件,设置控件布局
2、在初始化后添加如下代码,预览看结果
  1. fullCalendar1.Init({
  2.     header: {
  3.         left: 'prev,next today',
  4.         center: 'title',
  5.         right: 'month,agendaWeek,agendaDay'
  6.     },
  7.     aspectRatio: 1.35, //长宽比
  8.     defaultDate: new Date(), //默认日期
  9.     editable: false,
  10.     eventLimit: true,
  11.     events: function(start, end, timezone, callback){ //获取日常事务
  12.         var _start = start._d,
  13.             _end = end._d;
  14.         var dataService = {
  15.             ID: "D29F259D38734A55B7C8B702A9BAB749",
  16.             Args: {
  17.                 start: _start, // start
  18.                 end: _end // end
  19.             }
  20.         };
  21.         Service.Core.executeDataService(dataService, function(ret){
  22.             ret = ret || [];
  23.             callback(ret);
  24.         });
  25.     },
  26.     selectable: true,
  27.     eventClick: function(eventObj){ //点击日常事务事件
  28.         alert(eventObj.title);
  29.     },
  30.     dayRender: function($1){
  31.     }
  32. });
  33. fullCalendar1.Refresh();
复制代码

第三章 数据绑定示例



一、效果图
1.jpeg
二、开发过程

1、编写数据服务

  1. SELECT
  2.     SName as [title],
  3.     SExecTime as [start]
  4. FROM
  5.     SM_Log
  6. WHERE
  7.     SName = '登录系统'
  8. AND SExecTime BETWEEN @start AND @end AND SUserName = 'develop'
复制代码


2、编写脚本代码

  1. fullCalendar1.Init({
  2.     events: function(start, end, timezone, callback){ //获取日常事务
  3.         var _start = start._d,
  4.             _end = end._d;
  5.         var dataService = {
  6.             ID: "D29F259D38734A55B7C8B702A9BAB749",
  7.             Args: {
  8.                 start: _start, // start
  9.                 end: _end // end
  10.             }
  11.         };
  12.         Service.Core.executeDataService(dataService, function(ret){
  13.             ret = ret || [];
  14.             callback(ret);
  15.         });
  16.     }
  17. });
  18. fullCalendar1.Refresh();
复制代码



三、events中callback数据格式说明

1、数据规则:字段名称为(title【事务名称】,start【事务发生时间】)  数据列可以方法很多,点击的时候可以获取该对象
2、参考例子数据:

2.png










您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|一步通软件 ( 蜀ICP备15031919号 )

快速回复 返回顶部 返回列表