jquery全年视图(yearCalender) 日历(每月分上下旬)

之前一个项目需要使用日历,理所当然想到fullcalender,

前期一路绿灯啊,月视图,周视图,都OK

客户看到之后也说OK。。。。。。问题来了 年视图无法实现(直接显示12个月 ,每个月分上中下三旬,每个事件对应位置到对应的旬,并不能覆盖文字标题

也就是说需要智能换行,杯具啊。。 找遍了插件库没有类似的插件  都只有普通的calender,唉  痛。。。。)

幸好。。 虽然本人就是一个老菜鸟,, 老了的菜鸟。。

不过还是会写些js  ,封装了一个类似的yearcalender , 暂时只支持 分上中下旬 , 以后打算具体支持 月,上中下旬,周。

支持自定义月份排布,自动识别文字覆盖换行,事件项的事件绑定等各种操作,根据内容的多少和换行的需要自动增加行,自动位置对应和计算需要的位置 为是否换行做条件

,支持单个事件和跨日期事件标记,

以后有需要再扩展吧。。。 唉唉唉,自己动手还是很有趣的。。 网上的插件不是万能的  

随便上代码看看,具体代码太长 就不放了   有需要的可以拿去用 自己扩展。。  不要喷我  虽然我是菜鸟 但我也在努力学习

$(".content_without_bar").initYearCalender({

       rowHeight: 40, //列内容行高

data: null, //data数据

rowCount: 1, //默认的数据行数

tipWidth: 120, //项容器高度

onRenderComplete: function() {

alert(‘加载完成了‘);

}

});

});

时间: 2024-11-02 17:40:45

jquery全年视图(yearCalender) 日历(每月分上下旬)的相关文章

10.5 多视图模式日历案例概述

在接下来的几节中,我们将围绕“日历”这个案例进行实战演练,以提高读者对CSS的掌握和理解深度. 日历是日常生活中随处可见的工具.计算机出现后,产生了很多供人们记录日程安排的备忘录软件.随着互联网的普及,将日历存储在互联网上就更方便了,无论走到哪里,只要能够登录互联网,就可以随时查询和登记各种日程信息. Google推出了功能非常强大的日历软件,它不但具有普通日历的功能,还和移动通信相结合,用户可以和手机绑定,到达设定的时间时,用户就会收到一条提示短信.“Google日历”是完全基于Web的应用程

第二百一十四节,jQuery EasyUI,Calendar(日历)组件

jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法,这个组件不依赖于其 他组件. 一.加载方式 class 加载方式 <div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div>

如何解决用jquery.uploadify.js进行多文档上传会修改document的title

在dwz框架中使用了jquery.uploadify.js进行多文档上传当打开窗口后会发现document的title被无意之中修改.进行代码调试也没有发现.对swfobject进行研究也没有发现修改title的情况. 只能采用一种方式禁止修改title var oldTitle = document.title; try { document.attachEvent('onpropertychange', function(){ if (document.title != oldTitle )

JQUERY插件JqueryAjaxFileUplaoder----更简单的异步文件上传

异步上传相信大家都做过类似的功能,JqueryAjaxFileUploader为我们提供了更简单的实现和使用方式.不过既然是JQUERY的插件那么它所依赖的环境大家都懂得.JqueryAjaxFileUploader并不华丽,也没有提供美化文件上传控件的css,它并不像jQuery File Upload(喜欢的同学可以去尝试下),提供了美观的样式和专门的图片预览.多任务上传等等, JqueryAjaxFileUploader 所拥有的很简单,只是异步上传文件的功能,当然这并不排除由你亲自为它披

jQuery控件简易日历表格

jQuery控件简易日历表格代码,jquery表格,jquery插件 ,jquery,日期,时间,日历表格,表格代码,jQuery控件简易日历表格代码是一款较为简单的显示日历的代码,兼容firefox,chrome,ie. 下载地址:http://www.huiyi8.com/sc/6362.html(转载请注明此处)

jQuery动态添加input type=file文件上传域

jQuery动态添加input type=file文件上传域,当用户需要通过网页上传多个文件的时候,动态添加文件域就显得尤其重要,本功能引入了jQuery,兼容性方面也做的不错,暂时没有限制文件域的个数,所以你可以无限制的生成文件域,直到满足你的需要. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

jQuery、DOM对象傻傻分不清楚

初学jQuery时,经常分辨不清楚哪些是jQuery对象,哪些是DOM对象.这是十分不好的现象.必须明确区分何为jQuery对象.何为DOM对象,对于后续的学习.理解才更方便. 先从DOM对象开始,之后在谈谈jQuery对象(jq对象基于DOM对象). DOM.DOM对象 DOM(Document Object Model,文档对象模型),DOM是W3C的标准.定义了访问HTML和XML文档的标准. 文档对象模型是中立于平台和语言的接口,允许程序和脚本动态的访问和更新文档的内容.结构以及样式,更

Java+Json+JQuery将本地文件显示在网页上

前段时间为是练习JQuery和Java遍历目录,写了一个JavaWeb(使用Jsp+Servlet)的例子.源代码下载:https://github.com/liaoyu/uudisk 上述源码是Myeclipse新建的项目,需要配置一些环境,比如JRE路径,以下是运行截图,界面模仿新浪微盘 工作原理就是通过Java遍历系统(Windows)的目录,前台通过点击图标以ajax方式触发事件,后台以json数据的形式把文件结构返回给前台,前台通过JS解析JSON数据内容,展示不同的图片.目前尚存在的

jquery ui 学习随笔 日历

一.调用datepicker()方法 $('#date').datepicker(); 二.修改datepicker()样式 日历UI 的header 背景和对话框UI 的背景采用的是同一个class,所以,在此之前已经 被修改.所以,这里无须再修改了. //无须修改ui 里的CSS,直接用style.css 替代掉 .ui-widget-header { background:url(../img/ui_header_bg.png); } //修改当天日期的样式 .ui-datepicker-