论坛首页 → 入门技术论坛 →

使用JQuery-Week-Calendar做日程

浏览 22468 次
锁定老帖子 主题：使用JQuery-Week-Calendar做日程
精华帖 (0) :: 良好帖 (4) :: 新手帖 (10) :: 隐藏帖 (0)
作者 正文
  • BestUpon
  • 等级: 一星会员
  • 性别:
  • 文章: 135
  • 积分: 140
  • 来自: 兰州
   发表时间：2010-09-12   最后修改：2011-05-13

 

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

下载地址：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";
	}

详细参见：源码

  • 大小: 41 KB
返回顶楼
         
  • xuanye
  • 等级: 初级会员
  • 性别:
  • 文章: 57
  • 积分: 10
  • 来自: 上海
   发表时间：2010-09-13  
hi,我想这个插件更强大 xgcalendar
代码托管：http://code.google.com/p/xgcalendar
demo :http://xgcalendar.cloudapp.net

返回顶楼
          回帖地址
0 请登录后投票
  • BestUpon
  • 等级: 一星会员
  • 性别:
  • 文章: 135
  • 积分: 140
  • 来自: 兰州
   发表时间：2010-09-13   最后修改：2010-09-13
xuanye 写道
hi,我想这个插件更强大 xgcalendar
代码托管：http://code.google.com/p/xgcalendar
demo :http://xgcalendar.cloudapp.net


的确很强大！建议做个JSP版本的例子，很多人没有.Net运行环境！
返回顶楼
          回帖地址
0 请登录后投票
  • superhj1987
  • 等级: 初级会员
  • 性别:
  • 文章: 27
  • 积分: 0
  • 来自: 杭州
   发表时间：2010-09-14  
推荐fullcalendar..我做过类似的东西。。
返回顶楼
          回帖地址
0 请登录后投票
  • ghyghoo8
  • 等级: 初级会员
  • 性别:
  • 文章: 70
  • 积分: 20
  • 来自: 杭州
   发表时间：2010-09-14   最后修改：2010-09-14
很强大。。有没像google那样的共享功能呢？
返回顶楼
          回帖地址
0 请登录后投票
  • BestUpon
  • 等级: 一星会员
  • 性别:
  • 文章: 135
  • 积分: 140
  • 来自: 兰州
   发表时间：2010-09-15  
ghyghoo8 写道
很强大。。有没像google那样的共享功能呢？

没有那么强大的功能，仅仅是支持周内的信息！不花哨，实用！
返回顶楼
          回帖地址
0 请登录后投票
  • hastenlife
  • 等级: 初级会员
  • 性别:
  • 文章: 3
  • 积分: 30
  • 来自: 河北
   发表时间：2010-10-11  
楼主你好，我想问一下“Json.toJsonToCalendar”这个类的这个方法是干嘛用的~~代码是怎么实现的？我在用您写的这个
返回顶楼
          回帖地址
0 请登录后投票
  • hastenlife
  • 等级: 初级会员
  • 性别:
  • 文章: 3
  • 积分: 30
  • 来自: 河北
   发表时间：2010-10-12  
经过一而再再而三的测验~~~ 搞定了 嘎嘎
返回顶楼
          回帖地址
0 请登录后投票
  • maozi1986
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 30
  • 来自: 北京
   发表时间：2010-10-12  
很实用的功能
返回顶楼
          回帖地址
0 请登录后投票
  • BestUpon
  • 等级: 一星会员
  • 性别:
  • 文章: 135
  • 积分: 140
  • 来自: 兰州
   发表时间：2010-10-15  
hastenlife 写道
经过一而再再而三的测验~~~ 搞定了 嘎嘎

不好意思，这两天忙的很，没有看评论，你搞定了就好！~~~~~~~~
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics