使用JQuery-Week-Calendar做日程

最新推荐文章于 2024-05-18 10:04:39 发布
最新推荐文章于 2024-05-18 10:04:39 发布 · 834 阅读 · 1
文章标签：

#jQuery #Google #配置管理 #项目管理 #MySQL #ViewUI

 

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

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

详细参见：源码

汉化jquery-week-calendar
03-22
汉化jquery-week-calendar，比较漂亮的周日历，功能也很强大
jquery-week-calendar demo
08-15
周历插件demo，有很多例子可以参考，欢迎大家下载讨论
jquery-week-calendar-master日历控件
10-14
jquery-week-calendar-master日历控件 可在线编辑，记录待办事项
jquery周历插件jqueryweekcalendar汉化实现【带节日】
热门推荐
scyxm0426的专栏
06-22 1万+
最近接到一项工作任务，需要展示并打印一周内24小时的排班信息，便想到使用jquery周历插件实现，下面是效果图尚未经过美工打磨。 下面说下，实现过程。 一、依赖的js文件 /plugins/jquery-week-calendar-master/full_demo/reset.css' /> /plugins/jquery-week-calendar-master/libs/css/
JQuery日程管理插件jquery-weekcalendar-1.2.2发布
jQuery WeekCalendar插件使用了jQuery库来实现其功能，因此在使用该插件之前需要确保项目中已经正确引入了jQuery。 **JavaScript依赖** ```html <script src="path_to_jquery/jquery.min.js"> ...
企业级员工日程管理利器：jquery-weekcalendar组件
压缩包子文件的文件名称列表提供了组件的版本信息，即“jquery-weekcalendar-1.2.2”。这个文件名中包含了版本号“1.2.2”，意味着当前提供的插件版本是1.2.2。在软件开发中，版本号的使用有助于开发者追踪和管理...
【亲测免费】 jQuery Week Calendar - 功能强大的日历插件
gitblog_00002的博客
03-10 682
jQuery Week Calendar - 功能强大的日历插件 是一个基于 JavaScript 和 jQuery 的可定制化日程安排插件。它可以帮助开发者轻松创建一款功能丰富的、易于使用的交互式周视图日历。 什么是 jQuery Week Calendar？ jQuery Week Calendar 是一个轻量级的 Web 应用程序库，允许开发者在网页上展示用户的日程安排。此插件以周为单位显示...
jquery weekcalendar 多功能日历插件 1.2
05-01
内容索引:脚本资源,jQuery,JS日历,jQuery日历插件　　jquery weekcalendar 多功能日历插件，具有动感变化效果，演示截图如上示，除了一些特效外，日历的辅助功能比较多，比如可以根据你网页的需要调用方法有多种，可以保存日程、记事、标记重要日期等，插件除了使用jquery核心库以外，还用到一些jquery辅助插件以及自写的一些封装库等。
Jquery周历插件weekCalendar汉化并实现单日显示
08-10
NULL 博文链接：https://bewithme.iteye.com/blog/2108319
jquery 周日历安排（周、日、月）
04-19
jquery周日历安排 jquery 周日历安排（周、日、月）
基于jquery实现多功能日历插件(weekcalendar)1.2版本下载
07-03
基于jquery实现多功能日历插件(weekcalendar)1.2版本下载
周日历WeekCalendar
06-04
WeekCalendar，使用ViewPager实现的左右切换的周日历卡，可以参考代码实现月日历
周日历选择插件jcalendar_week
09-04
之前在网上想找一个简单易用的周日历选择插件，发现这种前端周日历插件很少，而且很多文章写的周的算法都不是统一的，所以自己实现了一个基于jquery的周日历插件(还支持跳转到指定年份和周哦)。 插件中周的算法：每周以周日为起始，第一周以每年第一个星期四所在的周为第一周（网上找的好像这个算法比较正规） 实现的效果是在手机端，也可以在PC端用，毕竟功能才是主要的。如果觉得样式不入眼可以自行随意修改。 //调用周日历方法 var weekfn = new jcalendar_week({ element: "#jcalendar_week",//填充日历的dom元素 dayaddclass:function(date){ //添加某天时给添加类名(参数：1.日期)(返回类名字符串，多个以空格分开) return ""; }, dayclick:function(date,obj){ //day点击事件(参数：1.日期,2.所点击DOM元素) $(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act"); } }); 点击上方显示当前年份和周的DOM部分可选择并跳转到指定年份和周。 插件提供的方法： //获取周第一天方法weekfirstdate(),传入年份和周数 console.log(weekfn.weekfirstdate(2018,36)); //获取传入日期为当年第几周getweeknum(),传入年,月,日（注:这里的月份从0开始） console.log(weekfn.getweeknum(2018,0,16)); //跳转到指定周confirmweek(),传入年份和周数 weekfn.confirmweek(getyear,getweek); //跳转到本周nowweek() weekfn.nowweek();
【亲测免费】 推荐开源项目：WeekCalendar —— 精致的每周日历组件
最新发布
gitblog_00030的博客
05-18 686
推荐开源项目：WeekCalendar —— 精致的每周日历组件 在移动应用开发中，日历控件是不可或缺的一部分，特别是在处理时间相关的功能时。今天，我们要向你推荐一个简洁而实用的开源库——WeekCalendar。这个库提供了一个专为显示一周日程设计的日历视图，适用于Android 4.0及以上版本。 项目简介 WeekCalendar是一个轻量级的Android库，它简化了在你的应用程序中添加...
单行日历组件WeekCalendar
greyson的博客
06-07 4898
单行日历选择组件，WeekCalendar。按周分页，通过左右滑动来切换到上一周或下一周，点击某一天会高亮显示，可通过回调函数来获取选中的日期；默认显示当前周（手机时间）、当天日期被选中（高亮），可以自己设置可选日期的范围，不可选的日期将是灰色表示。效果如下：1. 默认显示当前周和天：2. 向右滑显示上一周，自动选中上一周中的当前星期数：3. 如果向左滑动，则显示下一周；本来选中的星期数是周四，但...
jquery日历插件 途牛_11个实用jQuery日历插件
weixin_39642622的博客
12-19 640
FullCalendar是很出名的jQuery日历插件，它支持拖拽等功能，整合了Google Calendar，而且可以通过JSON来绑定事件，设计师可以轻松地自定义日历样式，工程师则利用它提供的接口来处理用户触发事件。这里是一篇教程，教你如何利用jQuery和CSS制作一个模仿iphone样式的日历控件。jQuery UI Datepicker 是一个提供了很多配置项的日历插件，你可以自定义日期...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值