使用JQuery-Week-Calendar做日程 -

BestUpon

浏览: 284519 次
性别:
来自: 兰州

最近访客更多访客>>

WangJiaX

街头诗人

qq113220715

秋季私雨

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

使用JQuery-Week-Calendar做日程

博客分类：

jQuery Google 配置管理项目管理 MySQL

能完整运行的实例已经整理出来了：

下载地址：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 文件中加入：

写道

-vmargs
-Xms128m
-Xmx512m
-XX:MaxPermSize=128m

这样的配置（注意分行），

如果想在eclipse里面直接配置,那就将JDK的参数中加入

写道

-Xms128m -Xmx512m -XX:MaxPermSize=128m

注意一行。

另：附件类容已取消，如需下载，使用：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";
	}

详细参见：源码

查看图片附件

分享到：

框架底层综合+快速开发+代码重用框架-设 ... | 聆听排序算法的声音

2010-09-12 16:08
浏览 19546
评论(18)
论坛回复 / 浏览 (14 / 22392)
分类:非技术
查看更多

18 楼洋葱pp奥特曼 2017-08-26

求大神再发一次资源，万分感激！！小弟邮箱：173992660@qq.com！！

17 楼 BestUpon 2010-11-16

hastenlife 写道

BestUpon 写道

hastenlife 写道

经过一而再再而三的测验~~~ 搞定了嘎嘎

不好意思，这两天忙的很，没有看评论，你搞定了就好！~~~~~~~~

嗯哈理解不过你的头像咋那么像小贝呢

嘿嘿。那以后我儿子就叫贝肯鲍尔孙子就叫贝克汉姆！

16 楼 hastenlife 2010-11-16

BestUpon 写道

hastenlife 写道

经过一而再再而三的测验~~~ 搞定了嘎嘎

不好意思，这两天忙的很，没有看评论，你搞定了就好！~~~~~~~~

嗯哈理解不过你的头像咋那么像小贝呢

15 楼 BestUpon 2010-11-01

macwulongwei 写道

LZ你好，看了你的代码很想学习，但是你的后台代码只要一部分，能够上传全部吗？

等等我整理一下，我的代码是嵌在一个项目中的，没有整理出来单个的例子，等我抽取出来了，会传上去的！

已经整理出来了：
下载地址：http://bestupon-framework.googlecode.com/files/JQuery-Week-Calendar.rar
使用方法：
1、配置文件位于 com.jxs.sys.core.config/config.properties
2、在mysql下建立一个数据库比如test
3、导入项目，直接部署启动即可！

14 楼 macwulongwei 2010-10-31

LZ你好，看了你的代码很想学习，但是你的后台代码只要一部分，能够上传全部吗？

13 楼 BestUpon 2010-10-28

楼主你好~我现在想把这个每周日程管理改成每天的日程管理，具体来说
1:把现在上方的星期改成每天工作的时间段
2:把现在左侧的时间段改成日程的序号~

请问有没有类似的代码或者插件啊？
谢谢！

本来就支持每天的管理，为什那么又要那么的细化呢？你可以将一天的时间段划分的在细一点，不就可以了么？或者你非要做一个一天之类的管理的话。核心代码就是：_replaceChars: {}中的时间换算！前面有朋友推荐的那个也可以的！他那个做的很细！

二楼写道

hi,我想这个插件更强大 xgcalendar
代码托管：http://code.google.com/p/xgcalendar
demo :http://xgcalendar.cloudapp.net
[/quot]

12 楼 traningP 2010-10-27

11 楼 BestUpon 2010-10-15

hastenlife 写道

经过一而再再而三的测验~~~ 搞定了嘎嘎

不好意思，这两天忙的很，没有看评论，你搞定了就好！~~~~~~~~

10 楼 maozi1986 2010-10-12

很实用的功能

9 楼 hastenlife 2010-10-12

经过一而再再而三的测验~~~ 搞定了嘎嘎

8 楼 hastenlife 2010-10-11

楼主你好，我想问一下“Json.toJsonToCalendar”这个类的这个方法是干嘛用的~~代码是怎么实现的？我在用您写的这个

7 楼 BestUpon 2010-09-15

ghyghoo8 写道

很强大。。有没像google那样的共享功能呢？

没有那么强大的功能，仅仅是支持周内的信息！不花哨，实用！

6 楼 ghyghoo8 2010-09-14

很强大。。有没像google那样的共享功能呢？

5 楼 Jophy 2010-09-14

很强大收藏下

4 楼 yabar 2010-09-14

标记下~~

3 楼 superhj1987 2010-09-14

推荐fullcalendar..我做过类似的东西。。

2 楼 BestUpon 2010-09-13

xuanye 写道

hi,我想这个插件更强大 xgcalendar
代码托管：http://code.google.com/p/xgcalendar
demo :http://xgcalendar.cloudapp.net

的确很强大！建议做个JSP版本的例子，很多人没有.Net运行环境！

1 楼 xuanye 2010-09-13

hi,我想这个插件更强大 xgcalendar
代码托管：http://code.google.com/p/xgcalendar
demo :http://xgcalendar.cloudapp.net

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用JQuery-Week-Calendar做日程

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用JQuery-Week-Calendar做日程

评论

发表评论

相关推荐

ExtJsUI ---button ---panel -- textfield 综合实例 学习笔记（居中登录窗体）

ExtJsUI ---button ---panel -- textfield 特性学习笔记

ExtJs 面向对象 特性

使用jQuery写了一个简单的窗口和异步刷新

最近访客更多访客>>

ExtJsUI ---button ---panel -- textfield 综合实例学习笔记（居中登录窗体）

ExtJs 面向对象特性