- 浏览: 290654 次
- 性别:
- 来自: 兰州
文章分类
- 全部博客 (116)
- 给网友答疑 (1)
- J2EE (16)
- DesignPattern (14)
- OtherArchive (5)
- lucene and compass (1)
- JasperReport (2)
- FusionCharts (2)
- Classical algorithm (2)
- JS (5)
- ZK Ajax (1)
- ubuntu-linux (4)
- Weka (0)
- IDE Config (6)
- JAVA 底层 (3)
- C\C++ (4)
- Android (15)
- 项目展示 (1)
- 娱乐生活 (16)
- 电驴资源 (1)
- 网络转载 (1)
- 程序员 毛病 (1)
- Android,开发日志 (2)
- java (1)
- openGL es (2)
- MAC (1)
最新评论
-
洋葱pp奥特曼:
求大神再发一次资源,万分感激!!小弟邮箱:173992660@ ...
使用JQuery-Week-Calendar做日程 -
xbliu564:
请问版本号
fusionchart 破解文件SWF -
xue_lang:
看了半天,有点坑爹的赶脚,哎
状态模式(State) -
teacup_madman:
我只能说。这个程序可以去掉的地方太多了。这个真的是State模 ...
状态模式(State) -
冬日的阳光:
TrafficLight这个类的change方法可以改一下,如 ...
状态模式(State)
能完整运行的实例已经整理出来了:
下载地址:http://bestupon-framework.googlecode.com/files/JQuery-Week-Calendar.rar
使用方法:
1、配置文件位于 com.jxs.sys.core.config/config.properties
2、在mysql下建立一个数据库比如test
3、导入项目,直接部署启动即可!
如有问题:请联系:QQ378917280、email:bestupon@foxmail.com
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
昨天有人跑不起来,我看是内存溢出问题造成的,建议不要直接使用Myeclipse 下的自带的Tomcat(默认的为6.0.13 Myeclipse 6.5 ), 下载一个比较新的版本,
如果还出现内存溢出问题的话 ,参考一下配置:
在eclipse.ini 文件中加入:
-Xms128m
-Xmx512m
-XX:MaxPermSize=128m
这样的配置(注意分行),
如果想在eclipse里面直接配置,那就将JDK的参数中加入
注意一行。
另:附件类容已取消,如需下载,使用:http://bestupon-framework.googlecode.com/files/JQuery-Week-Calendar.rar
下载,注意项目整体编码是UTF-8格式的,如果改成GBK等有可能会出现乱码,无法运行。
2011-5-13 11:14
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
JQuery-Week-Calendar 是一个很优秀的Jquery插件,我们可以很方便的进行日志管理。
JQuery-Week-Calendar 的项目地址是:http://wiki.github.com/robmonie/jquery-week-calendar/
演示地址:http://robmonie.github.com/jquery-week-calendar/full_demo/weekcalendar_full_demo.html
首先:我们要通过一下地址下载其最新版本1.2.2:http://github.com/downloads/robmonie/jquery-week-calendar/jquery-weekcalendar-1.2.2.zip
今天我们采用的是demo下的weekcalendar_full_demo.html,这个例子来演示。
1.下载以后没有提供国际化,我们将其更改成中文版的。参见以下的JS文件。
修改demo.js文件:
$(document).ready(function(){ var $calendar = $('#calendar'); var id = 10; $calendar.weekCalendar({ timeslotsPerHour: 4, allowCalEventOverlap: true, overlapEventsSeparate: true, firstDayOfWeek: 1, businessHours: { start: 8, end: 18, limitDisplay: true }, daysToShow: 7, height: function($calendar){ return $(window).height() - $("h1").outerHeight() - 1; }, eventRender: function(calEvent, $event){ if (calEvent.end.getTime() < new Date().getTime()) { $event.css("backgroundColor", "#aaa"); $event.find(".wc-time").css({ "backgroundColor": "#999", "border": "1px solid #888" }); } }, draggable: function(calEvent, $event){ return calEvent.readOnly != true; }, resizable: function(calEvent, $event){ return calEvent.readOnly != true; }, eventNew: function(calEvent, $event){ var $dialogContent = $("#event_edit_container"); resetForm($dialogContent); var startField = $dialogContent.find("select[name='start']").val(calEvent.start); var endField = $dialogContent.find("select[name='end']").val(calEvent.end); var titleField = $dialogContent.find("input[name='title']"); var bodyField = $dialogContent.find("textarea[name='body']"); $dialogContent.dialog({ modal: true, title: "新建日程表", close: function(){ $dialogContent.dialog("destroy"); $dialogContent.hide(); $('#calendar').weekCalendar("removeUnsavedEvents"); }, buttons: { save: function(){ calEvent.id = id; id++; calEvent.start = new Date(startField.val()); calEvent.end = new Date(endField.val()); calEvent.title = titleField.val(); calEvent.body = bodyField.val(); $.post(addPath, { calendarId: calEvent["id"], start: calEvent["start"], end: calEvent["end"], title: calEvent["title"], body: calEvent["body"] }, function(data){ }) $calendar.weekCalendar("removeUnsavedEvents"); $calendar.weekCalendar("updateEvent", calEvent); $dialogContent.dialog("close"); }, cancel: function(){ $dialogContent.dialog("close"); } } }).show(); $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start)); setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start)); }, eventDrop: function(calEvent, $event){ $.post(modifyPath, { calendarId: $event["id"], start: calEvent["start"], end: calEvent["end"], title: calEvent["title"], body: calEvent["body"] }, function(data){ }) }, eventResize: function(calEvent, $event){ }, eventClick: function(calEvent, $event){ if (calEvent.readOnly) { return; } var $dialogContent = $("#event_edit_container"); resetForm($dialogContent); var startField = $dialogContent.find("select[name='start']").val(calEvent.start); var endField = $dialogContent.find("select[name='end']").val(calEvent.end); var titleField = $dialogContent.find("input[name='title']").val(calEvent.title); var bodyField = $dialogContent.find("textarea[name='body']"); bodyField.val(calEvent.body); $dialogContent.dialog({ modal: true, title: "Edit - " + calEvent.title, close: function(){ $dialogContent.dialog("destroy"); $dialogContent.hide(); $('#calendar').weekCalendar("removeUnsavedEvents"); }, buttons: { save: function(){ calEvent.start = new Date(startField.val()); calEvent.end = new Date(endField.val()); calEvent.title = titleField.val(); calEvent.body = bodyField.val(); $.post(modifyPath, { calendarId: calEvent["id"], start: calEvent["start"], end: calEvent["end"], title: calEvent["title"], body: calEvent["body"] }, function(data){ }) $calendar.weekCalendar("updateEvent", calEvent); $dialogContent.dialog("close"); }, "delete": function(){ $.post(deletePath, { calendarId: calEvent["id"] }, function(data){ }) $calendar.weekCalendar("removeEvent", calEvent.id); $dialogContent.dialog("close"); }, cancel: function(){ $dialogContent.dialog("close"); } } }).show(); var startField = $dialogContent.find("select[name='start']").val(calEvent.start); var endField = $dialogContent.find("select[name='end']").val(calEvent.end); $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start)); setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start)); $(window).resize().resize(); // fixes a bug in modal overlay size // ?? }, eventMouseover: function(calEvent, $event){ }, eventMouseout: function(calEvent, $event){ }, noEvents: function(){ }, data: function(start, end, callback){ callback(getEventDataMyeslf()); } }); function getEventDataMyeslf(){ return { events: datas }; } function resetForm($dialogContent){ $dialogContent.find("input").val(""); $dialogContent.find("textarea").val(""); } function getEventData(){ var year = new Date().getFullYear(); var month = new Date().getMonth(); var day = new Date().getDate(); return { events: [{ "id": 1, "start": new Date(year, month, day, 12), "end": new Date(year, month, day, 13, 30), "title": "Lunch with Mike", "body": "这是一个测试内容" }, { "id": 2, "start": new Date(year, month, day, 14), "end": new Date(year, month, day, 14, 45), "title": "Dev Meeting", "body": "这是一个测试内容2" }, { "id": 3, "start": new Date(year, month, day + 1, 17), "end": new Date(year, month, day + 1, 17, 45), "title": "Hair cut", "body": "这是一个测试内容3" }, { "id": 4, "start": new Date(year, month, day - 1, 8), "end": new Date(year, month, day - 1, 9, 30), "title": "Team breakfast" }, { "id": 5, "start": new Date(year, month, day + 1, 14), "end": new Date(year, month, day + 1, 15), "title": "Product showcase" }, { "id": 6, "start": new Date(year, month, day, 10), "end": new Date(year, month, day, 11), "title": "I'm read-only", readOnly: true }] }; } /* * Sets up the start and end time fields in the calendar event form for * editing based on the calendar event being edited */ function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes){ for (var i = 0; i < timeslotTimes.length; i++) { var startTime = timeslotTimes[i].start; var endTime = timeslotTimes[i].end; var startSelected = ""; if (startTime.getTime() === calEvent.start.getTime()) { startSelected = "selected=\"selected\""; } var endSelected = ""; if (endTime.getTime() === calEvent.end.getTime()) { endSelected = "selected=\"selected\""; } $startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>"); $endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>"); } $endTimeOptions = $endTimeField.find("option"); $startTimeField.trigger("change"); } var $endTimeField = $("select[name='end']"); var $endTimeOptions = $endTimeField.find("option"); // reduces the end time options to be only after the start time options. $("select[name='start']").change(function(){ var startTime = $(this).find(":selected").val(); var currentEndTime = $endTimeField.find("option:selected").val(); $endTimeField.html($endTimeOptions.filter(function(){ return startTime < $(this).val(); })); var endTimeSelected = false; $endTimeField.find("option").each(function(){ if ($(this).val() === currentEndTime) { $(this).attr("selected", "selected"); endTimeSelected = true; return false; } }); if (!endTimeSelected) { // automatically select an end date 2 slots away. $endTimeField.find("option:eq(1)").attr("selected", "selected"); } }); var $about = $("#about"); $("#about_button").click(function(){ $about.dialog({ title: "About this calendar demo", width: 600, close: function(){ $about.dialog("destroy"); $about.hide(); }, buttons: { close: function(){ $about.dialog("close"); } } }).show(); }); });
2.解释:
显示calendar的页面如下:
<body> <div id='calendar'></div> <div id="event_edit_container"> <form action="http://localhost:8080/evaluationSystem0.2/myEvaluation/applayEvalutaion!addUI.action" method="get"> <input type="hidden" /> <ul> <li> <span>日期:</span><span class="date_holder"></span> </li> <li> <label for="start"> 开始时间: </label> <select name="start"> <option value=""> 请选择开始时间 </option> </select> </li> <li> <label for="end"> 结束时间: </label> <select name="end"> <option value=""> 请选择结束时间 </option> </select> </li> <li> <label for="title"> 主题: </label> <input type="text" name="title" /> </li> <li> <label for="body"> 内容: </label> <textarea name="body"></textarea> </li> </ul> </form> </div> </body>
demo.js中的
var $calendar = $('#calendar'); 是构建calendar。
其提供的方法很多,请参见http://wiki.github.com/robmonie/jquery-week-calendar/,这里不详细介绍,主要介绍几个要点,
1。增加:
在新建日程的时候,单击:日期的横格子:
使用如下代码:
save: function(){ calEvent.id = id; id++; calEvent.start = new Date(startField.val()); calEvent.end = new Date(endField.val()); calEvent.title = titleField.val(); calEvent.body = bodyField.val(); $.post(addPath, { calendarId: calEvent["id"], start: calEvent["start"], end: calEvent["end"], title: calEvent["title"], body: calEvent["body"] }, function(data){ })
addPath 就是更给地址,calEvent["id"]就是要传给后台的数据。
2。托拽:
拖拽事件,
eventDrop: function(calEvent, $event){ $.post(modifyPath, { calendarId: $event["id"], start: calEvent["start"], end: calEvent["end"], title: calEvent["title"], body: calEvent["body"] }, function(data){ }) },
3。删除:
"delete": function(){ $.post(deletePath, { calendarId: calEvent["id"] }, function(data){ }) $calendar.weekCalendar("removeEvent", calEvent.id); $dialogContent.dialog("close"); },
4。修改:可以通过拖拽,也可以使用点击显示的各自来通过“save”来修改。
save: function(){ calEvent.start = new Date(startField.val()); calEvent.end = new Date(endField.val()); calEvent.title = titleField.val(); calEvent.body = bodyField.val(); $.post(modifyPath, { calendarId: calEvent["id"], start: calEvent["start"], end: calEvent["end"], title: calEvent["title"], body: calEvent["body"] }, function(data){ }) $calendar.weekCalendar("updateEvent", calEvent); $dialogContent.dialog("close"); },
3。使用json来处理数据。这一点需要注意一下,前台直接传递给后台的数据格式:Sun Sep 12 2010 12:15:00 GMT+0800,但是JQuery-Week-Calendar 需要传递的格式:2010-09-12T12:15:00.000+10:00这样的格式,所以我们需要对其精心数据转换,参见如下的信息:
private static String dateToString(String dateGMT) { SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date satrt = new Date(dateGMT); String startStr = sdf.format(satrt); String str = startStr.split(" ")[0] + "T" + startStr.split(" ")[1]; return str + ".000+10:00"; }
详细参见:源码
评论
不好意思,这两天忙的很,没有看评论,你搞定了就好!~~~~~~~~
嗯哈 理解 不过你的头像咋那么像小贝呢
嘿嘿。那以后我儿子就叫贝肯鲍尔孙子就叫贝克汉姆!
不好意思,这两天忙的很,没有看评论,你搞定了就好!~~~~~~~~
嗯哈 理解 不过你的头像咋那么像小贝呢
等等我整理一下,我的代码是嵌在一个项目中的,没有整理出来单个的例子,等我抽取出来了,会传上去的!
已经整理出来了:
下载地址:http://bestupon-framework.googlecode.com/files/JQuery-Week-Calendar.rar
使用方法:
1、配置文件位于 com.jxs.sys.core.config/config.properties
2、在mysql下建立一个数据库比如test
3、导入项目,直接部署启动即可!
1:把现在上方的星期改成每天工作的时间段
2:把现在左侧的时间段改成日程的序号~
请问有没有类似的代码或者插件啊?
谢谢!
本来就支持每天的管理,为什那么又要那么的细化呢?你可以将一天的时间段划分的在细一点,不就可以了么?或者你非要做一个一天之类的管理的话。核心代码就是:_replaceChars: {}中的时间换算!前面有朋友推荐的那个也可以的!他那个做的很细!
hi,我想这个插件更强大 xgcalendar
代码托管:http://code.google.com/p/xgcalendar
demo :http://xgcalendar.cloudapp.net
[/quot]
1:把现在上方的星期改成每天工作的时间段
2:把现在左侧的时间段改成日程的序号~
请问有没有类似的代码或者插件啊?
谢谢!
不好意思,这两天忙的很,没有看评论,你搞定了就好!~~~~~~~~
没有那么强大的功能,仅仅是支持周内的信息!不花哨,实用!
代码托管:http://code.google.com/p/xgcalendar
demo :http://xgcalendar.cloudapp.net
的确很强大!建议做个JSP版本的例子,很多人没有.Net运行环境!
代码托管:http://code.google.com/p/xgcalendar
demo :http://xgcalendar.cloudapp.net
发表评论
-
ExtJsUI ---button ---panel -- textfield 综合实例 学习笔记(居中登录窗体)
2010-03-22 10:14 1673实现思路: 利用两个DIV 实现的,第一个DIV占满整 ... -
ExtJsUI ---button ---panel -- textfield 特性学习笔记
2010-03-22 09:54 1962ExtjsUI 1. Ext.Button 在b ... -
ExtJs 面向对象 特性
2010-03-22 09:44 11031.命名空間: 對類的定義方式 Extjs 代碼: ... -
使用jQuery写了一个简单的窗口和异步刷新
2009-10-08 12:46 2345使用Jquery做Ajax应用,简化了繁琐的JavaScrip ...
相关推荐
总结起来,jQuery Week Calendar是一个功能强大、灵活度高的周历插件,无论你是需要一个简单的日程管理工具,还是希望构建复杂的项目调度系统,它都能提供有效的解决方案。通过深入理解和实践提供的示例,开发者可以...
3. **初始化日历**:在JavaScript中调用初始化函数,如`$("#calendar").weekCalendar(options);`,`options`为可选的配置参数。 4. **数据绑定**:设置事件源,例如通过JSON数据或API接口获取并添加事件。 四、...
3. **初始化日历**:在JavaScript中调用`$("#calendar").weekCalendar(options)`,其中`options`是配置对象,包含各种设置项,如日历宽度、颜色方案、数据源等。 4. **加载数据**:根据所选的数据源类型,设置相应...
jQuery WeekCalendar是一款强大的周历插件,它允许用户直观地查看和管理一周的日程。本文将详细介绍如何对这个插件进行汉化处理,并实现单日视图的展示。 首先,我们需要了解`jQuery-week-calendar`的基本结构和...
【JS147-46jquery日历实用代码】是一个基于jQuery库的高效日历插件,用于在网页中添加日期选择功能。这个插件设计简洁,操作方便,能够为用户带来良好的交互体验。在网页开发中,日期选择器是一个常见的组件,常用于...
3. **初始化插件**:使用jQuery选择器选中该元素,并调用`weekCalendar()`方法初始化插件,如: ``` $('#calendar').weekCalendar({ // 配置选项 }); ``` 4. **配置选项**:根据需求设置各种配置项,如默认...
总结来说,jQuery WeekCalendar是一款强大且易用的日历插件,其1.2版本在性能和用户体验方面都做了显著提升。无论是在企业级应用还是个人项目中,它都能提供高效、美观的日程管理解决方案。通过深入理解其核心功能和...
jQuery,JS日历,jQuery日历插件 jquery weekcalendar 多功能日历插件,具有动感变化效果,演示截图如上示,除了一些特效外,日历的辅助功能比较多,比如可以根据你网页的需要调用方法有多种,可以保存日程、记事、...
首先,我们关注的核心文件`jquery.weekcalendar.js`是这个日历插件的核心代码,它实现了日历的展示、事件添加、编辑和删除等功能。通过这款插件,用户可以方便地查看一周内的日期,并对特定日期进行标注,无论是记录...
JQuery-Week-Calendar是日程管理系统中可能使用的前端日历插件,基于jQuery库开发,能够展示一周的日程,并且可能支持添加、编辑和删除日程的功能。这个插件通常会与后台的Struts2或Spring MVC进行交互,通过AJAX...
1. **安装**:将`jquery-weekcalendar-1.2.2`压缩包解压后,将包含的JavaScript和CSS文件引入到项目中,确保jQuery库已在页面上加载。 2. **初始化**:调用`$.fn.weekCalendar`方法对元素进行初始化,传入配置对象...
在项目中使用FullCalendar 3.9.0,首先需要引入jQuery和FullCalendar的CSS及JS文件,然后在DOM加载完成后初始化插件,提供必要的配置选项。 ### **结论** FullCalendar 3.9.0作为一款成熟的jQuery日历插件,其强大...
$('#calendar').weekCalendar({ eventsSource: function(callback) { // 通过AJAX获取日程数据,然后调用callback传递给插件 }, // 其他配置项... }); ``` 4. **事件源**:定义`eventsSource`回调函数,通过...
在本主题中,我们将深入探讨以下jQuery插件:DatePicker、dropkick、FancyMoves、fullcalendar-1.5.2、grumble、weekcalendar以及zTree和qrcode。 1. **DatePicker** DatePicker 是一个用于日期选择的插件,常见于...
开发者可以在官方文档中找到关于每个选项、方法和事件的详细信息,以及如何与其他库(如Bootstrap、jQuery等)配合使用。 总结来说,全历4.2.0是一个强大且灵活的日历组件,能够满足各种项目需求。无论是简单的日程...
ASOFT签到管理系统是一个完全免费使用、自由修改、非商业传播的ASP+ACCESS的web程序,适合建立在内网...程序使用了jquery控件、jquery uploadify上传插件、weekcalendar日程插件、xheditor HTML编辑插件、化境无组件。
程序使用了jquery控件、jquery uploadify上传插件、weekcalendar日程插件、xheditor HTML编辑插件、化境无组件。 ASOFT签到管理系统 v3.7 更新一览 【新增功能】 1、增加"IP防代签启用时是否IP可以共用"功能,你...
4. **jQuery和JavaScript支持**:作为基于jQuery的插件,jcalendarweek利用了jQuery库的强大功能,简化了DOM操作和事件处理,同时兼容了JavaScript,使得开发者可以利用这两种广泛使用的脚本语言来扩展和自定义插件...
ASOFT签到管理系统是一个完全免费使用、...程序使用了jquery控件、jquery uploadify上传插件、weekcalendar日程插件、xheditor HTML编辑插件、化境无组件。 ASOFT签到管理系统 v3.7 更新一览 【新增功能】 1、增加"I
ASOFT签到管理系统是一个完全免费使用、自由修改、非商业传播的ASP+ACCESS的web程序,适合建立在内网...程序使用了jquery控件、jquery uploadify上传插件、weekcalendar日程插件、xheditor HTML编辑插件、化境无组件。