http://www.cnblogs.com/shihao/archive/2012/01/16/2323660.html
jQuery日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划安排等,可扩展Google日历功能,制作个性化的日程表,同时可绑定点击事件或拖动事件,使用非常方便。
jQuery插件FullCalendar在线实例FullCalendar v1.5.2
http://arshaw.com/fullcalendar/
使用说明
需要使用jQuery库文件和jQuery UI库文件和FullCalendar库文件
http://jquery.com/
http://plugins.jquery.com/project/fullcalendar
http://ui.jquery.com/
同进需要使用fullcalendar.css文件
使用实例
一,导入css样式和js
fullcalendar的样式表:
<link rel='stylesheet' type='text/css' href='redmond/theme.css' />
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
fullcalendar插件的基础:
<script type='text/javascript' src='../jquery/jquery.js'></script>
<script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script>
fullcalendar插件的js
<script type='text/javascript' src='../fullcalendar.min.js'></script>
二页面加载初始化fullcalendar
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
}
]
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
三添加fullcaledar容器
<div id='calendar'></div>
chaunceyhao
- 大小: 2.8 KB
- 大小: 13.6 KB
- 大小: 24.3 KB
- 大小: 10.4 KB
- 大小: 5.7 KB
- 大小: 6.7 KB
- 大小: 25.7 KB
- 大小: 15.5 KB
分享到:
相关推荐
首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件。 ...
全历插件jQuery FullCalendar是一款强大的JavaScript日历组件,它能帮助开发者轻松地在网页上创建交互式的日程安排表。这个插件以其简洁的API和丰富的自定义选项深受前端开发者的喜爱。在这个使用案例中,我们将深入...
FullCalendar 是一个jQuery插件,它提供一个全尺寸,像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 (如单击或拖动事件) ...
**全栈前端开发中的日历插件:FullCalendar** 在Web开发中,日历插件是一种常见的组件,用于展示和管理日期相关的事件。FullCalendar是一款功能强大的JavaScript库,专为前端开发者设计,它能帮助创建交互式的、...
FullCalendar是一款广泛使用的jQuery日历插件,它能够帮助开发者在网页上创建功能丰富的互动日历。这款插件以其灵活性、可定制性和易用性而备受赞誉,支持各种事件安排、时间表显示以及多语言支持,是Web开发中的...
- 首先,确保引入jQuery库和相应的日程表或时间控件插件的JS和CSS文件。 - 创建HTML元素作为日程表或时间控件的容器。 - 初始化插件,设置必要的配置项,如日期格式、初始值等。 - 添加事件监听,处理用户操作,...
**全栈Web开发中的前端日历插件...综上所述,FullCalendar是前端开发中不可或缺的一款日历插件,无论你是初学者还是经验丰富的开发者,都可以通过这个压缩包中的源码学习到关于日历控件的构建、扩展和优化的宝贵知识。
jQuery作为一个轻量级、强大的JavaScript库,为开发者提供了丰富的插件来实现这些功能,其中FullCalendar是一款广泛使用的日历日程插件。本文将深入探讨FullCalendar的功能特性、使用方法以及常见应用场景。 ...
9. **插件扩展**:Fullcalendar支持多种插件,如日程表的加载优化插件、事件源插件等,这使得其功能可以进一步扩展和定制。 在`fullcalendar-1.2.1`这个压缩包中,包含了Fullcalendar的1.2.1版本的相关文件,可能...
为了实现这样的功能,开发者可能使用了诸如Android的CalendarView或iOS的EventKit框架等原生控件,或者是利用JavaScript库如FullCalendar、jQuery UI Datepicker等在Web开发中创建自定义的日历组件。开发者需要考虑...
本文将深入探讨如何使用JavaScript实现一个功能完备的日历控件,并结合日程安排功能进行扩展。 首先,JavaScript日历控件的基础是通过DOM操作动态创建HTML结构来呈现日历界面。在`calendar2.aspx`中,我们可以预期...
jQuery还包含了许多实用的插件,这些插件极大地扩展了其功能,其中就包括各种日历控件。 2. **jQuery日历控件的用途**: - 用户友好的日期选择:相比传统的文本输入框,日历控件能提供直观的日期选择界面,减少...
本教程将重点关注如何利用jQuery来创建一个日历时间表,并添加行程安排事件以实现提醒功能。 首先,我们需要理解jQuery日历插件的基本原理。最常用的jQuery日历插件之一是jQuery UI中的Datepicker组件。它提供了一...
对于开发者来说,jQuery日历插件是管理日期和时间、规划事件或创建日程表的理想工具。以下是10款最佳jQuery日历插件的详细介绍,这些插件具有丰富的功能和灵活的定制选项。 1. **jQuery-Verbose-Calendar**(压缩包...
这个插件的灵活性和强大的功能使得它在网站和应用中广泛使用,尤其在日程管理、会议预订、活动日历等领域。 **核心功能** 1. **日期选择与展示**:jQuery Calendar可以显示日、周、月甚至年的视图,用户可以选择...
日历控件的实现可能依赖于JavaScript库,如jQuery UI或FullCalendar,它们提供了丰富的API,允许开发者创建交互式、响应式的日历界面。在客户端,JavaScript可以处理用户的即时交互,如拖放日程、显示弹窗确认删除等...
FullCalendar 是一个全功能的日历插件,可以展示日程、事件和时间表。它可以显示多日视图,包括日、周、月和年视图,还可以通过Ajax动态加载事件数据。开发者可以自定义事件颜色、标题、时间格式等,以满足项目需求...
适用于WEB开发的多种日程/日历插件,日历日期插件包含多种CSS样式,从年份-月份-单日-小时多种插件选择,源码整洁,便于修改;日程插件包含完整版Fullcalendar控件demo以及其他样式控件,欢迎交流。
在本案例中,我们关注的是一个使用jQuery实现的日程管理工具,这表明它利用了JavaScript库jQuery的强大功能来提供交互式和用户友好的日历界面。让我们深入探讨jQuery实现的日程管理的相关知识点。 首先,jQuery是一...