jquery-ui fullCalendar 可用於設計日程管理的控制元件
阿新 • • 發佈:2019-02-17
直接貼程式碼:
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <%@taglib prefix="s" uri="/struts-tags" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>個人日程表----天天</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <link rel="stylesheet" type="text/css" href="css/fullcalendar.css"> <style type="text/css"> html,body { margin:0; padding:0; background: #ffddff; } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/fullcalendar.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, viewDisplay: function(view) { var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd"); var viewName = view.name; //alert(viewStart+viewName); $("#calendar").fullCalendar('removeEvents'); $.getJSON('schedule/containEvents',{start:viewStart,viewName:viewName},function(data) { for(var i=0;i<data.length;i++) { //alert(data[i].id); //alert(data[i].allDay); var obj = new Object(); obj.id = data[i].id; obj.title = data[i].title; obj.allDay = data[i].allDay; obj.start = $.fullCalendar.parseDate(data[i].start/1000); obj.end = $.fullCalendar.parseDate(data[i].end/1000); //alert(data[i].start); //alert(obj.start); //alert($.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH:mm:ss")); $("#calendar").fullCalendar('renderEvent',obj,true);//把從後臺取出的資料進行封裝以後在頁面上以fullCalendar的方式進行顯示 } }); }, selectable: true, selectHelper: true, select: function(start, end, allDay) { var title = prompt('請輸入名稱:'); if (title) { calendar.fullCalendar('renderEvent', { title: title, start: start, end: end, allDay: allDay }, true // make the event "stick" );//把剛輸入的日程計劃在頁面上進行顯示 //alert($.fullCalendar.formatDate(start,'yyyy-MM-dd HH:mm:ss')); $.post("schedule/add",{//把剛輸入的日程計劃資訊傳到後臺,儲存到資料庫 title: title, start:($.fullCalendar.formatDate(start,'yyyy-MM-dd HH:mm:ss')) , end:($.fullCalendar.formatDate(end,'yyyy-MM-dd HH:mm:ss')), allDay:allDay} ); } calendar.fullCalendar('unselect'); }, editable: true, //events:'/tiantian/schedule/containEvents' events:[]//表示初始化時的資料,這裡是空的,等前面的ajax請求返回後就會有新的資料在頁面顯示 }); //setTimeout("myinit()",1000); //alert($.fullCalendar.parseDate(3600)+"ddddddddddd"); }); </script> </head> <body> <div id="calendar"></div> </body> </html>