它是一个基于它的日历控件。它具有非常强大的功能。让我给你介绍一下技能。我希望这个方法对你有帮助。
介绍
官方网站:
英文文件:
指示
1. 下载压缩包-1.6.3.压缩包
2. html页面中导入资源
代码显示如下
复制代码
< type=”text/” src=”js/-ui-1.10.3..min.js”>
< type=”text/” src=”js/.min.js”>
几点注意事项:
可以,如果项目已经引入,这里就不需要重复导入了
如果要在日历中使用鼠标拖动功能,需要导入-ui
压缩包中的-ui文件只包含.ui.core.js、.ui..js、.ui.mouse.js、.ui..js、.ui..js的功能;如果项目已经引入了包含上述功能的-ui文件,这里不能重复导入。重复导入会导致-ui的其他功能失效。
3. 调用插件
代码显示如下
复制代码
$((){
$(‘#’).({});
});
配置日历标题
代码显示如下
复制代码
$(‘#’).({
:{
左:’上一个,下一个今天’,
: ‘标题’,
右:’月,,’
}
});
left、right 参数对应页眉的三个位置(左、中、右)。多个参数值可以用逗号或空格分隔。可选值范围如下:
标题 – 当前日期文本
prev – 向前滚动按钮
下一步 – 后退按钮
– 上一年按钮
– 明年按钮
今天 – 今天按钮
月 – 月视图
– 周视图
– 日视图
– 带小时的周视图
– 小时日视图
配置中文界面
代码显示如下
复制代码
$(‘#’).({
: {
今天:’今天’,
月:’月’,
周:’周’,
日:’日’
},
: ‘一整天’,
: [‘一月’,’二月’,’三月’,’四月’,’五月’,’六月’,’七月’,’八月’, ‘九月’,’十月’,’十一月’,’十二月’],
: [‘1′,’2′,’3′,’4′,’5′,’6′,’7′,’8’, ‘9’,’10’,’11’,’12’],
: [”,”,”,”,”,”,”],
: [”,”,”,”,”,”,”],
});
安排对象事件
日历中显示的议程事件
代码显示如下
复制代码
{
title: ‘某个名字’,
开始:’2013-08-08’,
结束:’2013-08-12′
}
基本参数说明
title – 事件名称,显示在议程中
start – 安排开始时间
end – 计划的结束时间
其他参数
ID
网址
颜色
另外,您可以根据功能需要为事件对象添加自定义属性
演出时间表
代码显示如下
复制代码
$(‘#’).({
:[]
});
添加参数:array/json/
可以是一个数组:
代码显示如下
复制代码
: [
{
title: ‘全天活动’,
开始:新日期()
},
{
标题:’长事件’,
开始:新日期(),
结束:新日期(新日期()。()+)
}
]
您可以通过 ajax 加载 json 数据:
代码显示如下
复制代码
: {
网址:’/.php’,
类型:’POST’,
数据: {
: ”,
:”
},
错误: () {
alert(‘出现错误!’);
},
color: ”, // 非 ajax
: ‘black’ // 非 ajax
}
也可以是:
代码显示如下
复制代码
:(开始,结束,){
// 获取日程数据后的回调
();
}
添加议程
通过单击日历单元格添加新事件
代码显示如下
复制代码
var = $(‘#’).({
: (日期, , , 查看) {
// 这里可以处理弹窗、后台通信等
// 这个例子只是将一个新事件添加到日历中
.(”,
{
标题:’日程安排’ + 新日期()。(),
开始日期,
:
}
);
}
});
参数说明
date – 当前日期,包括点击视图的时间
– 单击视图时为 false,否则为 true
– 原生事件
view – 当前视图对象
修改日程
点击当前显示的日程,修改日程
代码显示如下
复制代码
var = $(‘#’).({
: (事件, , 视图) {
// 这里可以添加代码修改调度
var red = Math.round(255 * Math.());
var green = Math.round(255 * Math.());
var blue = Math.round(255 * Math.());
$(this).css(‘-color’, ‘rgb(‘ + red + ‘,’ + green + ‘,’ + blue + ‘)’);
}
});
event参数是当前点击的时间安排
拖动鼠标更改排程时间范围
使用鼠标直接在页面上拖拽改变调度时间范围,需要-ui拖拽功能,需要初始化时设置为true的参数开启拖拽功能。
代码显示如下
复制代码
var = $(‘#’).({
: 真的,
: (事件, , , , , , ui, view) {
// 将日程拖到新位置时,日程时间发生变化,相关处理可在此处进行
}
});
参数说明
– 保存此拖动导致日历事件移动的天数,正数表示前进,负数表示后退
– 保存拖拽导致调度事件移动多少分钟,向前为正,向后为负,该值仅在视图下有效
– 如果在月视图下移动,或者移动到视图下的全天区域,则为 true,如果移动到视图的其他区域,则为 false
– 调用该方法可以将之前的拖拽恢复到原来的状态。该方法多用于ajax提交。移动后,向后台提交数据。如果后台更新失败,根据返回信息调用该方法,将页面恢复到原始状态。
代码显示如下
复制代码
var = $(‘#’).({
: 真的,
: (事件, , , , , ui, view) {
// 改变某个的大小,的结束时间发生变化,相关的处理可以在这里做
}
});
参数与回调类似,下面只解释不同之处:
– 保存计划结束时间改变了多少天,向前为正,向后为负
– 保存计划的结束时间已更改的分钟数。向前是正数,向后是负数。该值仅在视图下有效,其他情况下为0
鼠标悬停选择日期
类似于在资源管理器中选择多个文件的操作,在页面上用鼠标选择日期进行操作,比如添加日程,配置参数需要为true
在单元格上,鼠标悬停选择事件和鼠标单击单元格事件将同时触发
代码显示如下
复制代码
var = $(‘#’).({
: 真的,
: (, , , , 看法) {
// 选择一个可以进行相关处理的日期
// 处理完成后,取消选中状态
.(”);
}
});
参数说明
– 开始日期
– 结束日期,当为真时,结束日期包括最后一天
暂无评论内容