引用jquery的日历插件,注意要导入css

它是一个基于它的日历控件。它具有非常强大的功能。让我给你介绍一下技能。我希望这个方法对你有帮助。

介绍

官方网站:

英文文件:

指示

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]-引用jquery的日历插件,注意要导入css-唐朝资源网

下一步 – 后退按钮

– 上一年按钮

– 明年按钮

今天 – 今天按钮

月 – 月视图

– 周视图

– 日视图

– 带小时的周视图

– 小时日视图

配置中文界面

代码显示如下

复制代码

$(‘#’).({

: {

今天:’今天’,

月:’月’,

周:’周’,

日:’日’

},

: ‘一整天’,

: [‘一月’,’二月’,’三月’,’四月’,’五月’,’六月’,’七月’,’八月’, ‘九月’,’十月’,’十一月’,’十二月’],

: [‘1′,’2′,’3′,’4′,’5′,’6′,’7′,’8’, ‘9’,’10’,’11’,’12’],

: [”,”,”,”,”,”,”],

: [”,”,”,”,”,”,”],

});

安排对象事件

日历中显示的议程事件

代码显示如下

复制代码

{

title: ‘某个名字’,

开始:’2013-08-08’,

结束:’2013-08-12′

图片[2]-引用jquery的日历插件,注意要导入css-唐朝资源网

}

基本参数说明

title – 事件名称,显示在议程中

start – 安排开始时间

end – 计划的结束时间

其他参数

ID

网址

颜色

另外,您可以根据功能需要为事件对象添加自定义属性

演出时间表

代码显示如下

复制代码

$(‘#’).({

:[]

});

添加参数:array/json/

可以是一个数组:

代码显示如下

复制代码

: [

{

title: ‘全天活动’,

开始:新日期()

},

{

标题:’长事件’,

开始:新日期(),

结束:新日期(新日期()。()+)

}

]

您可以通过 ajax 加载 json 数据:

代码显示如下

图片[3]-引用jquery的日历插件,注意要导入css-唐朝资源网

复制代码

: {

网址:’/.php’,

类型:’POST’,

数据: {

: ”,

:”

},

错误: () {

alert(‘出现错误!’);

},

color: ”, // 非 ajax

: ‘black’ // 非 ajax

}

也可以是:

代码显示如下

复制代码

:(开始,结束,){

// 获取日程数据后的回调

();

}

添加议程

通过单击日历单元格添加新事件

代码显示如下

复制代码

var = $(‘#’).({

: (日期, , , 查看) {

// 这里可以处理弹窗、后台通信等

// 这个例子只是将一个新事件添加到日历中

.(”,

{

标题:’日程安排’ + 新日期()。(),

开始日期,

图片[4]-引用jquery的日历插件,注意要导入css-唐朝资源网

}

);

}

});

参数说明

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) {

// 将日程拖到新位置时,日程时间发生变化,相关处理可在此处进行

}

图片[5]-引用jquery的日历插件,注意要导入css-唐朝资源网

});

参数说明

– 保存此拖动导致日历事件移动的天数,正数表示前进,负数表示后退

– 保存拖拽导致调度事件移动多少分钟,向前为正,向后为负,该值仅在视图下有效

– 如果在月视图下移动,或者移动到视图下的全天区域,则为 true,如果移动到视图的其他区域,则为 false

– 调用该方法可以将之前的拖拽恢复到原来的状态。该方法多用于ajax提交。移动后,向后台提交数据。如果后台更新失败,根据返回信息调用该方法,将页面恢复到原始状态。

代码显示如下

复制代码

var = $(‘#’).({

: 真的,

: (事件, , , , , ui, view) {

// 改变某个的大小,的结束时间发生变化,相关的处理可以在这里做

}

});

参数与回调类似,下面只解释不同之处:

– 保存计划结束时间改变了多少天,向前为正,向后为负

– 保存计划的结束时间已更改的分钟数。向前是正数,向后是负数。该值仅在视图下有效,其他情况下为0

鼠标悬停选择日期

类似于在资源管理器中选择多个文件的操作,在页面上用鼠标选择日期进行操作,比如添加日程,配置参数需要为true

在单元格上,鼠标悬停选择事件和鼠标单击单元格事件将同时触发

代码显示如下

复制代码

var = $(‘#’).({

: 真的,

: (, , , , 看法) {

// 选择一个可以进行相关处理的日期

// 处理完成后,取消选中状态

.(”);

}

});

参数说明

– 开始日期

– 结束日期,当为真时,结束日期包括最后一天

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片