`

jQuery插件FullCalendar日程表实现可扩展Google日历功能

 
阅读更多
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
分享到:
评论

相关推荐

    JS日程管理插件FullCalendar简单实例

    首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件,包括jQuery库文件,FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能,那么还需要加入jQuery ui插件。 ...

    jquery的fullcalendar使用案例

    全历插件jQuery FullCalendar是一款强大的JavaScript日历组件,它能帮助开发者轻松地在网页上创建交互式的日程安排表。这个插件以其简洁的API和丰富的自定义选项深受前端开发者的喜爱。在这个使用案例中,我们将深入...

    前端日历插件fullcalendar

    **全栈前端开发中的日历插件:FullCalendar** 在Web开发中,日历插件是一种常见的组件,用于展示和管理日期相关的事件。FullCalendar是一款功能强大的JavaScript库,专为前端开发者设计,它能帮助创建交互式的、...

    Fullcalendar带日程安排的日历

    FullCalendar 是一个jQuery插件,它提供一个全尺寸,像事例中的拖拽日历。它使用 AJAX 来为每个月提取事件并轻松地配置为使用您自己资料的格式 。它是以可视方式自定义并公开为用户触发事件 (如单击或拖动事件) ...

    FullCalendar jQuery日历插件.zip

    FullCalendar是一款广泛使用的jQuery日历插件,它能够帮助开发者在网页上创建功能丰富的互动日历。这款插件以其灵活性、可定制性和易用性而备受赞誉,支持各种事件安排、时间表显示以及多语言支持,是Web开发中的...

    js,jquery各类日程表,时间控件

    - 首先,确保引入jQuery库和相应的日程表或时间控件插件的JS和CSS文件。 - 创建HTML元素作为日程表或时间控件的容器。 - 初始化插件,设置必要的配置项,如日期格式、初始值等。 - 添加事件监听,处理用户操作,...

    前端日历插件控件,fullcalendar 1 2 3版本全套源码

    **全栈Web开发中的前端日历插件...综上所述,FullCalendar是前端开发中不可或缺的一款日历插件,无论你是初学者还是经验丰富的开发者,都可以通过这个压缩包中的源码学习到关于日历控件的构建、扩展和优化的宝贵知识。

    JQuery日历日程啦啦啦啦啦

    jQuery作为一个轻量级、强大的JavaScript库,为开发者提供了丰富的插件来实现这些功能,其中FullCalendar是一款广泛使用的日历日程插件。本文将深入探讨FullCalendar的功能特性、使用方法以及常见应用场景。 ...

    Fullcalendar--日程管理 js组件

    9. **插件扩展**:Fullcalendar支持多种插件,如日程表的加载优化插件、事件源插件等,这使得其功能可以进一步扩展和定制。 在`fullcalendar-1.2.1`这个压缩包中,包含了Fullcalendar的1.2.1版本的相关文件,可能...

    日历控件(签到、日程表)

    为了实现这样的功能,开发者可能使用了诸如Android的CalendarView或iOS的EventKit框架等原生控件,或者是利用JavaScript库如FullCalendar、jQuery UI Datepicker等在Web开发中创建自定义的日历组件。开发者需要考虑...

    js日历控件实现及日程安排

    本文将深入探讨如何使用JavaScript实现一个功能完备的日历控件,并结合日程安排功能进行扩展。 首先,JavaScript日历控件的基础是通过DOM操作动态创建HTML结构来呈现日历界面。在`calendar2.aspx`中,我们可以预期...

    日历控件(Jquery)

    jQuery还包含了许多实用的插件,这些插件极大地扩展了其功能,其中就包括各种日历控件。 2. **jQuery日历控件的用途**: - 用户友好的日期选择:相比传统的文本输入框,日历控件能提供直观的日期选择界面,减少...

    jquery日历时间表添加行程安排事件用于提醒注意事项

    本教程将重点关注如何利用jQuery来创建一个日历时间表,并添加行程安排事件以实现提醒功能。 首先,我们需要理解jQuery日历插件的基本原理。最常用的jQuery日历插件之一是jQuery UI中的Datepicker组件。它提供了一...

    给开发者准备的 10 款最好的 jQuery 日历插件

    对于开发者来说,jQuery日历插件是管理日期和时间、规划事件或创建日程表的理想工具。以下是10款最佳jQuery日历插件的详细介绍,这些插件具有丰富的功能和灵活的定制选项。 1. **jQuery-Verbose-Calendar**(压缩包...

    Jquery Calendar插件

    这个插件的灵活性和强大的功能使得它在网站和应用中广泛使用,尤其在日程管理、会议预订、活动日历等领域。 **核心功能** 1. **日期选择与展示**:jQuery Calendar可以显示日、周、月甚至年的视图,用户可以选择...

    日历日程表jsp

    日历控件的实现可能依赖于JavaScript库,如jQuery UI或FullCalendar,它们提供了丰富的API,允许开发者创建交互式、响应式的日历界面。在客户端,JavaScript可以处理用户的即时交互,如拖放日程、显示弹窗确认删除等...

    jquery插件应用

    FullCalendar 是一个全功能的日历插件,可以展示日程、事件和时间表。它可以显示多日视图,包括日、周、月和年视图,还可以通过Ajax动态加载事件数据。开发者可以自定义事件颜色、标题、时间格式等,以满足项目需求...

    多种日历-日程-时间插件

    适用于WEB开发的多种日程/日历插件,日历日期插件包含多种CSS样式,从年份-月份-单日-小时多种插件选择,源码整洁,便于修改;日程插件包含完整版Fullcalendar控件demo以及其他样式控件,欢迎交流。

    web日程管理 jquery日,周,月程

    在本案例中,我们关注的是一个使用jQuery实现的日程管理工具,这表明它利用了JavaScript库jQuery的强大功能来提供交互式和用户友好的日历界面。让我们深入探讨jQuery实现的日程管理的相关知识点。 首先,jQuery是一...

Global site tag (gtag.js) - Google Analytics