fullCalendar制作一款简单的日历日程

lihong11

浏览: 450297 次
性别:
来自: 湖南

最近访客更多访客>>

jis117

kgd2327

jinanzc

wjxkxmwdk

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jsp页面脚本

日历日程 fullCalendar 谷歌日历

//说什么都没有例子直观，这是个比较简单的日历日程，附件为效果图、代码效果和需要引用的js与css文件
package com.kinth.oa.daily.action;

import java.io.IOException;
import java.net.URLDecoder;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JsonConfig;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import com.gdcn.bpaf.common.base.BaseStrutsAction;
import com.gdcn.bpaf.common.helper.BeanUtil;
import com.gdcn.bpaf.common.helper.WebHelper;
import com.gdcn.bpaf.common.taglib.SplitPage;
import com.gdcn.bpaf.security.model.LogonVO;
import com.kinth.common.helper.GUIDHelper;
import com.kinth.common.helper.PagerList;
import com.kinth.oa.daily.action.form.PerScheduleCategoryForm;
import com.kinth.oa.daily.action.form.PerScheduleForm;
import com.kinth.oa.daily.model.PerSchedule;
import com.kinth.oa.daily.model.PerScheduleCategory;
import com.kinth.oa.daily.service.IPerScheduleService;
import com.kinth.oa.official.helper.JsonDateValueProcessor;
/**
 * <p>Title 个人日程action</p>
 * <p>Copyright: Copyright (c) 2012</p>
 * <p>@date : 2012-10-1
 */
 
public class PerScheduleAction extends BaseStrutsAction{
	private IPerScheduleService perscheduleService;
    	 
	/**
	 * 以月历模式查看个人日程
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 * @return ActionForward
	 */
	public ActionForward toJson(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws IOException {
    
		response.setCharacterEncoding("utf-8");
		String userId=WebHelper.getLogon(request).getLogonid();
		String userName=WebHelper.getLogon(request).getUsername();
     	String hql = "FROM PerSchedule a where a.userId = "+"'"+userId+"'";
     	List<PerSchedule> list=perscheduleService.queryPerSchedules(hql);
		//移除同一天的日程事件
		for (int i=0;i<list.size();i++) {
            if(request.getParameter("index")!=null){
                  for (int j = list.size() - 1; j > i; j--) {     
                     if (list.get(j).getStartTime().toString().substring(0, 10).equals(list.get(i).getStartTime().toString().substring(0, 10))) {
            	              list.remove(j);
                          }
                    }
             }
			SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
			String str = list.get(i).getStartTime().toString().substring(0, 19);
			try {

				list.get(i).setStartTime(sf.parse(str));
				 
			} catch (ParseException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		
		JSONArray json = JSONArray.fromObject(list);
		String resultStr = json.toString();
		try {
			response.getWriter().write(resultStr);
			response.getWriter().flush();
			response.getWriter().close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}
		
	@SuppressWarnings("unchecked")
	protected void writeJSON(HttpServletRequest request,HttpServletResponse response,Map map)throws Exception{
		//获得json的配置  
        JsonConfig config=new JsonConfig();  
        //设置javabean中日期转换时的格式
        config.registerJsonValueProcessor(Date.class,
        new JsonDateValueProcessor("yyyy-MM-dd HH:mm:ss"));
		Object o = JSONArray.fromObject(map,config);
		String result = o==null?"":o.toString();
		response.setContentType("application/json;charset=UTF-8");
	    response.setCharacterEncoding("utf-8");
	    response.setHeader("Charset", "utf-8");
	    response.setHeader("Cache-Control", "no-cache");
		response.getWriter().print(result);
	}
	public IPerScheduleService getPerscheduleService() {

		return perscheduleService;
	}

	public void setPerscheduleService(IPerScheduleService perscheduleService) {
		this.perscheduleService = perscheduleService;
	}
}

<%@ page contentType="text/html; charset=GBK" language="java"%>
<%@ page isELIgnored="false"%>
<link href="<%=baseURL%>/frame/css/style.css" rel="stylesheet" type="text/css" />

<html>

<head>
<title>日常业务-个人日程</title>
	<title>日程</title>
	<link type="text/css" rel="stylesheet" href="<%=baseURL %>/kinth/officialCommon/css/jquery.ui.all.css"/>
<link rel='stylesheet' href='<%=baseURL%>/frame/css/fullcalendar.css'  />
<link rel='stylesheet' href='<%=baseURL%>/frame/css/fullcalendar.print.css'  media='print' />
<script type="text/javascript" src="<%=baseURL %>/kinth/officialCommon/js/jquery.js"></script>
<script type="text/javascript" src="<%=baseURL %>/kinth/officialCommon/js/jquery-ui.custom.js"></script>
<script type="text/javascript" src="<%=baseURL%>/frame/JS/fullcalendar.min.js"></script>
	<style type='text/css'>
		body {
		margin-left: 200px;
		text-align: center;
		font-size: 18px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		 
		}
		#calendar {
		width: 900px;
		height: 800px;
		margin: 0 auto;
		}
	</style>
<script type="text/javascript">
    $(document).ready(function() {
 
       var date = new Date();
       var d = date.getDate();
       var m = date.getMonth();
       var y = date.getFullYear();
       $('#calendar').fullCalendar({
           header: {
              left: 'prev,next today',
              center: 'title',
              right: 'month,agendaWeek,agendaDay'
           },
          theme:true,
          monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
          monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
          dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
          dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],  
          today: ["今天"],  
          buttonText: {  
          today: '今天',  
          month: '月',  
          week: '周',  
          day: '日'  
          },  
           editable: false,
           events:function(start, end, callback) { //在日历中的天显示相应日程
           var urlR = baseURL+"/toJsonForCalandar.do";//后台查询日程，返回json格式
           $.ajax({  
            url: urlR,
            cache:false,  
            success:function(data) {  
                var events = [];  
                var info = eval(data);  
                for (var i = 0; i < info.length; i++) {
                   var ev = info[i];  
                    var title = ev.topic; 
                    var x; 
                    if(ev.allDay=='true'){
                      x=true;
                    }else{
                        x=false;
                    }
                   var evtstart=formatJson(ev.startTime.time);
                     var evtend=formatJson(ev.endTime.time);
                      events.push({   //设置在日历中的天显示相应日程的样式
                        title:title,  
                        start:evtstart,  
                        end:evtend,  
                        backgroundColor:'#34c9df', 
                        allDay:x
                   });  
                }  
                callback(events);  
              }
          })  
         },eventClick: function(calEvent, jsEvent, view) {   //点击日程事件
				window.location.href=baseURL+"/kinth/daily/perschedule/perscheduleByCalMain.jsp";
			},dayClick:function(date, allDay, jsEvent, view){	//点击天事件
			  //$(this).css({color: "red", background: "blue" });
         	  //$(this).removeClass("ui-widget-content");
         	  window.location.href=baseURL+"/listCategory.do?appType=HDOA_GRRC";
         }   
       });
   });
 </script>
 
 <script type="text/javascript">
 //格式化时间函数,此函数为了处理json格式中带date类型数据的
function formatJson(time)
{
var jsonDate=new Date(parseInt(time));
var result = jsonDate.format("yyyy-MM-dd hh:mm:ss");
return result;
}

Date.prototype.format = function(format){
    var o =
    {
        "M+" : this.getMonth()+1, //month
        "d+" : this.getDate(),    //day
        "h+" : this.getHours(),   //hour
        "m+" : this.getMinutes(), //minute
        "s+" : this.getSeconds(), //second
        "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
        "S" : this.getMilliseconds() //millisecond
    }
    if(/(y+)/.test(format))
    format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)
    if(new RegExp("("+ k +")").test(format))
    format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
    return format;
}
 
 </script>
</head>

<body style="margin-left: 40px;margin-top: 0px;margin-right: 4px;margin-bottom: 4px;">
 <div id="content" >
 <div id="calendar" style="margin:3em 0;font-size:13px" class="fc">
 </div>
 </div>
 </body>
</html>