您好,欢迎访问一九零五行业门户网

如何在你的网站应用中使用PHP和jQuery建立日历

怎么在你的网站应用中使用php和jquery建立日历
本教程将是一个有趣的。我要告诉你一个简单的方式来实现在应用程序中使用php和jquery的日历。不像平时无聊的日历,这是可拖动,时尚,便于模具按要求。让我们检查出来。
?
这里是重要的演示或下载链接。
?
在本教程中,我使用?jquery插件。为什么我使用这个的原因是因为它是挤满了功能的电源。
现在,我要告诉你,我们将如何实现这个插件。这里是jquery代码。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
类型=?“文/ javascript的”?>
$?(文件)。就绪(函数()?{
var?日期?=?新的?日期();
var?e?=?日期。getdate?();
var?米?=?日期的getmonth?();
??=?日期和getfullyear?();
var???=?{?}?;
?
$?(“#日历”?)。fullcalendar?({
头:?h?,
可选:?真,
编辑:?真,
可拖动:?真,
投掷的:?假
}?);
}?);
script>
在代码中,插件安装到div id =“日历”]与一些额外的选项,例如可选择,可编辑,可拖动。在html中,我们只需要添加所需的div,如下图所示。
?
1
id?=?“日历”?>? div>
上述jquery和html代码是不够好,呈现一个美丽而实用的日历。现在,我要隆起的日历增加以下功能集。
显示用户选定的日期或日期范围。à?确认选项一个ajax请求发送到服务器的细节。从服务器接收到响应,并把它显示给用户。?
要实现这一点,我要作出一些补充jquery和html代码。jquery的,我已经添加了两件事情。首先,是选择fullcalendar插件格式自定义格式的日期选择功能。二是选定的日期发送到服务器的ajax请求。看看下面的完整代码。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
类型=?“文/ javascript的”?src?=?“js / jquery.min.js”?>? script>
类型=?“文/ javascript的”?src?=?“js / jquery.calendar.js”?>? script>
类型=?“文/ javascript的”?>
$?(文件)。就绪(函数()?{
var?日期?=?新的?日期();
var?e?=?日期。getdate?();
var?米?=?日期的getmonth?();
??=?日期和getfullyear?();
var???=?{?}?;
?
$?(“#日历”?)。fullcalendar?({
头:?h?,
可选:?真,
选择?功能(?开始日期,?结束日期,?全天,?jsevent?,?视图?)?{
新起点?=?$?fullcalendar?formatdate?(开始日期,?“mmmm dd年数h:毫米tt”?);
,var?newend?=?$?。fullcalendar?。formatdate?(结束日期,?“mmmm dd年数h:毫米tt”?);
$?(“#开始”?),html?(‘开始 strong> ’?+?新起点+?‘ span>’?);
$?(“#结束”?)。html?(‘结束 strong> ’?+?newend?+?‘ span>’?);
$?(“确定”?)。淡入();
}
eventsources:?[?{
事件:?[
{
标题:?“咖啡与gf'?,
描述:?“不应该忘记或她会杀了我。”
启动:?'2013-09-21 19:00:00'?,
结束:?'2013-09-21 21:00:00'?,
全天:?假
}
{
标题:?web应用程序的演示,
描述:?'会议mashable的家伙'
启动:?'2013-09-30 13:00:00'?,
结束:?'2013-09-30 17:00:00'?,
全天:?假
}
]
}?]
编辑:?真,
可拖动:?真,
投掷的:?假
}?);
?
$?(文件)上(“咔嚓”?,?“确认”?,?函数()?{
开始?=?$?(“#开始跨度”?)html?();
var?月底?;
?
$?阿贾克斯({
类型:?“得到”?,
网址:?“php / ajax.php?r = confirm_booking&启动=”?+?启动+?“和结束=”?+?结束,
包括:?“
成功:?函数(响应)?{
$?(“确定”?)。淡出();
$?(“响应”?)。的html?(响应);
}
}?);
}?);
}?);
script>
下面是更新的html代码。
?
1
2
3
4
5
6
7
id?=?“日历”?>? div>
?
?
id?=?“开始”?>??开始 strong>? p>
?
id?=?“结束”?>??结束 strong>? p>?
类型=?“按钮”?值=?“确认”?id?=?“确认”?类=?“btn的btn默认隐藏”?>
?
??id?=?“响应”?>? div>
p与id的开始和结束的标记已被添加到用户显示所选择的日期或日期范围。,div [id =“响应”]将显示从ajax请求返回的响应。
这里是ajax.php文件,它是处理ajax请求的代码。在本教程中,这个文件是简单地返回结果页面。在web应用程序中,我们将数据保存在数据库中,并根据需要做其他的东西。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(‘的functions.php“?);
?
(使用isset?($ _get?[?'r'?]?))?{
##执行每个请求的功能
$ r?=?clean_input?($ _get?[?'r'?]?);
##用于处理要求发送confirm_booking的。
($ r?==?‘confirm_booking’?)?{
(使用isset?($ _get?[?'开始'?]?)?&&?使用isset?($ _get?[?'端'?]?))?{
开始?=?clean_input?($ _get?[?'开始'?]?);
将$ end?=?clean_input?($ _get?[?'端'?]?);
如果(空(开始)?&&?!空(结束))?{
/ *
*我们没有做任何事情在这里。只要发送接收的值返回到页面。
*在web应用中,我们应该处理的值,并将其存储在数据库中。
* /
回声?“
您的预订已被证实为
’?。开始。 strong>’?;
}
}
}
}
?
至此,教程结束。李新试图保持尽可能简单实现。我希望你觉得本教程非常有用。保持回来这样更多有用的东西。至此,快乐编码。
本文来自李新的博客,转载请注明出处!http://www.ilixin.net/401.html
其它类似信息

推荐信息