`

Jquery 仿 google 日历活动(图+源码)

阅读更多
如题,用Jquery仿的google calender 部分功能,主要目的还是想提高一下自己对Jquery的熟练程度。现在模仿了月视图和周视图。如图:

周视图:



月视图



下载文件为源文件,希望大家指点。
  • 大小: 89.1 KB
  • 大小: 58.9 KB
分享到:
评论
33 楼 丁利星 2015-06-11  
32 楼 xuxingfan000 2013-07-13  
还在有另外一个BUG就是就是点击到上午0点——0点30分那个阶段,id错误。
31 楼 onlyve91 2011-12-18  
求与后台数据库连接使用的方法呀。。。
30 楼 zehua 2011-12-10  
楼主,运行出了效果,很强大呀。
问个问题,在你的日历上把日历上的数据传到后台应该怎么传呀?
在后台把数据写入前台又应该怎么写?
能不能给个详细的例子,或者贴一段代码上来。
29 楼 BuN_Ny 2011-11-09  
cheney_love 写道
JavaStudyEye 写道
我倒觉得 楼主的这个 插件,和 fullcalendar 比起来有一定的优势,

首先就是 弹出层问题。fullcalendar 内部是 reportEvent方法 绘制格子中内容。

fullcalendar 插件 在王格子里面添加数据时,需要有暂停js代码的div层 类似 prompt函数,阻塞js代码执行,待用户输入数据后,继续执行js。才能得到数据。如果弹出层没有阻塞js代码的执行,那么reportEvent方法就得不到数据,格子中就没有显示了。
而楼主这个,很 easy的解决了这个问题。 感谢先。

我都没想那么远,呵呵。误打误撞吧

28 楼 ol_beta 2011-06-11  
回去研究研究
27 楼 夕雨下 2011-06-11  
找了很久啊, 谢谢lz了
26 楼 check-枫叶 2011-06-11  
25 楼 mib168 2011-06-10  
不错,得研究研究 确实有的项目如要这样的功能
24 楼 cheney_love 2011-06-10  
awaterway 写道
jquery已经有插件了啊,jquery-week-calendar...

嗯,学习学习jquery
23 楼 awaterway 2011-06-10  
jquery已经有插件了啊,jquery-week-calendar...
22 楼 chw8219 2011-06-10  
非常感谢,学习下。
21 楼 cheney_love 2011-06-09  
JavaStudyEye 写道
我倒觉得 楼主的这个 插件,和 fullcalendar 比起来有一定的优势,

首先就是 弹出层问题。fullcalendar 内部是 reportEvent方法 绘制格子中内容。

fullcalendar 插件 在王格子里面添加数据时,需要有暂停js代码的div层 类似 prompt函数,阻塞js代码执行,待用户输入数据后,继续执行js。才能得到数据。如果弹出层没有阻塞js代码的执行,那么reportEvent方法就得不到数据,格子中就没有显示了。
而楼主这个,很 easy的解决了这个问题。 感谢先。

我都没想那么远,呵呵。误打误撞吧
20 楼 JavaStudyEye 2011-06-09  
我倒觉得 楼主的这个 插件,和 fullcalendar 比起来有一定的优势,

首先就是 弹出层问题。fullcalendar 内部是 reportEvent方法 绘制格子中内容。

fullcalendar 插件 在王格子里面添加数据时,需要有暂停js代码的div层 类似 prompt函数,阻塞js代码执行,待用户输入数据后,继续执行js。才能得到数据。如果弹出层没有阻塞js代码的执行,那么reportEvent方法就得不到数据,格子中就没有显示了。
而楼主这个,很 easy的解决了这个问题。 感谢先。
19 楼 JavaStudyEye 2011-06-09  
situ.gao 写道
不知道楼主对月视图下某天的事件过多是怎么处理的,full calendar好像是直接就把格子撑大了

fullcalendar 就是把格子搞大了。

不过如果你要截取fullcalendar存放数据的数组,自己做处理的话,也可以
18 楼 matin0728 2011-06-09  
用 jQuery 做的东西就是丑陋啊〜〜〜
17 楼 JavaStudyEye 2011-06-09  
大神啊。最近一直在做fullcalendar,搞了一个星期了,今天看到了你写的,真是,佩服啊
16 楼 lgstarzkhl 2011-06-09  
确实挺不错的
15 楼 cheney_love 2011-06-09  
Aaronlong31 写道
楼主,有BUG啊,我才刚点了两下。
在周视图中,选中某个时间点,往下拖是正常的,但是再往上拖就不正常了,首先是深蓝色块不会变小,而且还会出现图中的情况。开始时间比结束时间大。

当选中时间点,
如果鼠标在深蓝色块上 往下拖 再往上拖,则不能改变大小;
如果鼠标不在深蓝色块上 往下拖 再往上拖,则会改变大小。
还有,又发现了一个,如图


GOOGLE就不是这样的。

谢谢Aaronlong31的建议,和google 的比起来差距还是非常大的,以后有时间了再完善完善
14 楼 Aaronlong31 2011-06-09  
楼主,有BUG啊,我才刚点了两下。
在周视图中,选中某个时间点,往下拖是正常的,但是再往上拖就不正常了,首先是深蓝色块不会变小,而且还会出现图中的情况。开始时间比结束时间大。

当选中时间点,
如果鼠标在深蓝色块上 往下拖 再往上拖,则不能改变大小;
如果鼠标不在深蓝色块上 往下拖 再往上拖,则会改变大小。
还有,又发现了一个,如图


GOOGLE就不是这样的。

相关推荐

    仿Google日历

    【标题】"仿Google日历"是一个项目,其目的是创建一个类似于Google日历的应用程序,让用户可以方便地管理他们的日常事件和时间安排。这个项目可能是一个开源软件,开发者旨在学习和分享Google日历的设计理念和技术...

    类似google的日历开发JQUERY源码

    这是一款非常实用的日历页面开发插件 - fullcalendar,目前最新版本是1.5.1,使用这款插件能够快速帮助你快速编程实现基于web的日历查看功能,大家可能都使用过outlook的日历项功能,使用日历界面能更方便的查看待办...

    基于jQuery的日历控件源码

    基于jQuery的日历控件源码 操作方式和样式参考Google Calendar Demo中的服务器端采用MS ASP.NET MVC V1,事实上可替换成其他任何一种服务器端技术(包括PHP,ASP,JSP) 本来想直接叫Calendar,可是Google Code中的...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏相册图片自动切换插件 63.[荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64.[荐]...

    jquery 日历 任务 类似 google 日历

    在IT行业中,jQuery日历是一种常见的前端组件,用于构建类似Google日历的交互式任务管理应用。这个组件基于流行的JavaScript库jQuery,它提供了丰富的API和功能,帮助开发者轻松实现日期选择、事件添加、任务管理等...

    仿Google Calendar日历

    基于jQuery的日历控件源码 操作方式和样式参考Google Calendar Demo中的服务器端采用MS ASP.NET MVC V1,事实上可替换成其他任何一种服务器端技术(包括PHP,ASP,JSP) 本来想直接叫Calendar,可是Google Code中...

    jQuery实现的支持添加事件的日历特效源码.zip

    2. 提供API接口:允许与其他应用或服务集成,如同步Google日历或Outlook。 3. 自定义样式:允许用户自定义日历的样式和布局,提升用户体验。 总结,"jQuery实现的支持添加事件的日历特效源码"是一个实用的开发资源...

    jQuery实现对简洁大气的日程安排日历特效源码.zip

    在实际应用中,开发者可能还需要考虑日历的可访问性、多语言支持、时间区处理、与其他系统(如Google日历或Outlook)的同步等功能。同时,为了保证性能,应避免在大型数据集上使用过于复杂的动画,或者使用节流和...

    FullCalendar一个全尺寸拖放事件的jQuery插件日历

    基于jQuery框架,FullCalendar能够轻松地与现有的jQuery应用整合,提供了简洁的API来创建、更新和删除日历事件。jQuery的广泛使用意味着开发者通常对这个库的使用方式已经很熟悉,降低了学习曲线。 ### 3. 拖放功能...

    Jquery日历

    **jQuery日历插件详解** 在网页开发中,日历组件常常被用于日期选择、事件管理等多种场景。jQuery,作为一款强大的JavaScript库,为开发者提供了丰富的插件来简化这一过程。本篇将深入探讨jQuery日历插件的使用,...

    jQuery Frontier Calendar 1.3.2

    google code上的一个开源项目源码、实例以及API说明等。但是code.google已经访问不了了哦!找了半天才找到,累死我了。。。 jQuery Frontier Calendar 是整整一个月的 jQuery 日历插件,外观有点像 Google Calendar ...

    jquery日程管理系统

    "jQuery日程管理系统"是一个基于JavaScript库jQuery以及相关的CSS技术构建的应用,主要用于组织和管理日常任务、事件和日程。这个系统的核心特点是交互性强、用户体验良好,通过动态更新和渲染界面,用户可以方便地...

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

    标题中的“给开发者准备的 10 款最好的 jQuery 日历插件”指的是一个针对Web开发者推荐的资源集合,这些资源是基于jQuery的日期和日历管理插件。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件...

    FullCalendar_农历_汉化_源码_jquery_google

    类拟outlook、google的日历控件,增加了中国农历+节气显示,需要的话,可以下载,位置在:fullcalendar-1.5.4\demos\theme_mcy_chinese_demo.html

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

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

    日历

    - 开发者可以使用各种编程语言(如Java、C#、Python、JavaScript)来编写自己的日历源码。这通常涉及日期对象的操作、UI布局设计以及事件处理等功能。 - 例如,JavaScript中的`Date`对象可以创建、比较和操作日期...

    Ajax 四级导航菜单ASP+Access动态版

    Asp+Ajax无限级联动下拉框菜单Access版 ASP仿Google输入框提示_自动完成功能 AJAX+ASP多级无限制级联菜单(地市版) ASP下结合AJAX实现输入框提示(自动完成) ASP 树形菜单TreeView 多样式版 jQuery实例_飞飞ajax带...

    选择开始时间结束时间日历

    6. **同步功能**:如果日历应用需要与其他设备或服务同步,如Google日历或Outlook,那么就要实现同步协议,如CalDAV或iCal。 7. **数据存储**:事件数据通常会存储在数据库中,可能采用关系型数据库(如MySQL)或...

    好用的js日历控件 多种样式

    FullCalendar是一款强大的全功能日历插件,支持事件管理、多视图切换(如日视图、周视图、月视图)和与其他数据源(如Google Calendar、JSON)的集成。它的API丰富,可定制性高,适合大型项目。 Pickadate.js是一个...

Global site tag (gtag.js) - Google Analytics