谁能提供个jquery的fullcalendar使用案例，从数据库读取日程数据的。。。
问题描述：
谁能提供个jquery的fullcalendar使用案例，从数据库读取日程数据的。。。
答
//在页面加载后用jsonajax得到当前用的日程返回 function myInit(){ /** 访问服务器初始化日程 $.getJSON('../schedule.do?method=selectSchedule&userId=1',{},function(data){ for(var i=0;i<data.length;i++){ // alert('--AA'+new Date('2010','4','5').toLocaleString()); var copiedEventObject =new Object(); copiedEventObject.start = new Date(data[i].year,data[i].month-0-1,data[i].date); //开始时间 copiedEventObject.title=data[i].title; //标题 copiedEventObject.id=data[i].id; //标题 copiedEventObject.end = new Date(data[i].eyear,data[i].emonth-0-1,data[i].edate); //开始时间 var bb=false; if(data[i].hours==0&&data[i].minutes==0){ bb=true; } copiedEventObject.allDay = bb; $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码 } }); **/ var copiedEventObject =new Object(); copiedEventObject.start = new Date(); //开始时间 copiedEventObject.title='abc'; //标题 copiedEventObject.id=1 copiedEventObject.end = new Date(); var bb=false; copiedEventObject.allDay = bb; $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码 } var objobj; var sss=700; var bbb=0; var start=""; function myClick(){ bbb=0; } $(document).ready(function() { /* initialize the external events -----------------------------------------------------------------*/ $('#external-events div.external-event').each(function() { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn't need to have a start or end var eventObject = { title: $.trim($(this).text()) // use the element's text as the event title }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // make the event draggable using jQuery UI $(this).draggable({ zIndex: 999, revert: true, // will cause the event to go back to its revertDuration: 0 // original position after the drag }); setTimeout('myInit()',1000); //不知道为什么不可以直接调用,你一个在前显示，一个在后显示？？？ }); /* initialize the calendar -----------------------------------------------------------------*/ /** events: [ //事件==一个日程 { title: 'All Day Event', start: new Date(2010, 9, 12) } ], **/ $('#calendar').fullCalendar({ theme: true, header: { //设置头的标题 left: 'prev,next today', center: 'title,month,agendaWeek,agendaDay', right: 'prevYear,nextYear' }, editable: true, weekMode:'variable', //下一个属性要用 slotMinutes:30, //每个10分在周的视图 titleFormat:'yyyy年MM月dd日', //格式化时间 droppable: true, // this allows things to be dropped onto the calendar !!! buttonText:{ prev: '昨天', next: '明天', prevYear: '去年', nextYear: '明年', today: '今天', month: '月', week: '周', day: '日' }, dayClick:function(date, allDay, jsEvent, view ) { //天数点击 var copiedEventObject =new Object(); // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) var myTitle=null; myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭'); if(myTitle==null){return false} copiedEventObject.title=myTitle; $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码 /** bbb++; if(bbb>=2){ if(objobj.getTime()==date.getTime()){ window.location.href="../schedule.do?method=selectMeet&start="+start; }else{ bbb=1; } } objobj=date; start=""+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm')); setTimeout("myClick()",sss); **/ //window.location.href="../schedule.do?method=selectMeet&start="+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm')); }, eventDragStart:function(calEvent, jsEvent, ui, view){ //日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动 // alert('拖拽开始'); } , eventDragStop:function(calEvent, jsEvent, ui, view){ //日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动 // alert('拖拽结束'); } , eventDrop:function(calEvent, jsEvent, ui, view){ //日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动 //alert('拖拽成功'); // alert(calEvent.id+'--'+calEvent.start.toLocaleString()+'--'+(calEvent.end==null?null:calEvent.end.toLocaleString())+'--'+calEvent.title); /* var data="id="+calEvent.id+"&column=start&value="+($.fullCalendar.formatDate(calEvent.start,'yyyy-MM-dd HH:mm')); $.ajax({ type:"POST", url:"../schedule.do?method=scheduleUpdate", data:data, success:function(data){ } }); var date=calEvent.start; if(calEvent.end!=null){ date=calEvent.end; } var data="id="+calEvent.id+"&column=end&value="+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm')); $.ajax({ type:"POST", url:"../schedule.do?method=scheduleUpdate", data:data, success:function(data){ } }); */ } , eventResize: function(calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view){ //alert('改变大小成功'); //alert(calEvent.id+'--'+calEvent.start.toLocaleString()+'--'+(calEvent.end==null?null:calEvent.end.toLocaleString())+'--'+calEvent.title); /** var data="id="+calEvent.id+"&column=start&value="+($.fullCalendar.formatDate(calEvent.start,'yyyy-MM-dd HH:mm')); var date=new Date(calEvent.start); if(calEvent.end!=null){ date=new Date(calEvent.end); //date.setDate(date.getDate()-0+dayDelta); } var data="id="+calEvent.id+"&column=end&value="+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm')); $.ajax({ type:"POST", url:"../schedule.do?method=scheduleUpdate", data:data, success:function(data){ } }); **/ } , eventClick:function(calEvent,jsEvent,view) { //点击日程的触发 /* alert(calEvent.title+'--'+jsEvent+'--'+view); var myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭11'); if(myTitle==null){return false} calEvent.title=myTitle; $('#calendar').fullCalendar('renderEvent', true); //刷新 */ // var str="../schedule.do?ifUpdate=1&method=selectRiChengs&id="+calEvent.id; // window.location.href=str; }, drop: function(date, allDay) { // this function is called when something is dropped var myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭'); if(myTitle==null){return false} // retrieve the dropped element's stored Event Object var originalEventObject = $(this).data('eventObject'); // we need to copy it, so that multiple events don't have a reference to the same object var copiedEventObject = $.extend({}, originalEventObject); copiedEventObject.title=myTitle; // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码 } }); }); body { margin-top: 40px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #wrap { width: 1100px; margin: 0 auto; } #external-events { float: left; width: 150px; padding: 0 10px; border: 1px solid #ccc; background: #eee; text-align: left; } #external-events h4 { font-size: 16px; margin-top: 0; padding-top: 1em; } .external-event { /* try to mimick the look of a real event */ margin: 10px 0; padding: 2px 4px; background: #3366CC; color: #fff; font-size: .85em; cursor: pointer; } #external-events p { margin: 1.5em 0; font-size: 11px; color: #666; } #external-events p input { margin: 0; vertical-align: middle; } #calendar { float: right; width: 900px; }
[color=red]下面是我改造的代码,你只要修改myInin()中的方法，把那个ajax的注释去掉换成你的路径就ok[/color]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
//在页面加载后用jsonajax得到当前用的日程返回 function myInit(){ /** 访问服务器初始化日程 $.getJSON('../schedule.do?method=selectSchedule&userId=1',{},function(data){ for(var i=0;i<data.length;i++){ // alert('--AA'+new Date('2010','4','5').toLocaleString()); var copiedEventObject =new Object(); copiedEventObject.start = new Date(data[i].year,data[i].month-0-1,data[i].date); //开始时间 copiedEventObject.title=data[i].title; //标题 copiedEventObject.id=data[i].id; //标题 copiedEventObject.end = new Date(data[i].eyear,data[i].emonth-0-1,data[i].edate); //开始时间 var bb=false; if(data[i].hours==0&&data[i].minutes==0){ bb=true; } copiedEventObject.allDay = bb; $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码 } }); **/ var copiedEventObject =new Object(); copiedEventObject.start = new Date(); //开始时间 copiedEventObject.title='abc'; //标题 copiedEventObject.id=1 copiedEventObject.end = new Date(); var bb=false; copiedEventObject.allDay = bb; $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码 } var objobj; var sss=700; var bbb=0; var start=""; function myClick(){ bbb=0; } $(document).ready(function() { /* initialize the external events -----------------------------------------------------------------*/ $('#external-events div.external-event').each(function() { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn't need to have a start or end var eventObject = { title: $.trim($(this).text()) // use the element's text as the event title }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // make the event draggable using jQuery UI $(this).draggable({ zIndex: 999, revert: true, // will cause the event to go back to its revertDuration: 0 // original position after the drag }); setTimeout('myInit()',1000); //不知道为什么不可以直接调用,你一个在前显示，一个在后显示？？？ }); /* initialize the calendar -----------------------------------------------------------------*/ /** events: [ //事件==一个日程 { title: 'All Day Event', start: new Date(2010, 9, 12) } ], **/ $('#calendar').fullCalendar({ theme: true, header: { //设置头的标题 left: 'prev,next today', center: 'title,month,agendaWeek,agendaDay', right: 'prevYear,nextYear' }, editable: true, weekMode:'variable', //下一个属性要用 slotMinutes:30, //每个10分在周的视图 titleFormat:'yyyy年MM月dd日', //格式化时间 droppable: true, // this allows things to be dropped onto the calendar !!! buttonText:{ prev: '昨天', next: '明天', prevYear: '去年', nextYear: '明年', today: '今天', month: '月', week: '周', day: '日' }, dayClick:function(date, allDay, jsEvent, view ) { //天数点击 var copiedEventObject =new Object(); // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) var myTitle=null; myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭'); if(myTitle==null){return false} copiedEventObject.title=myTitle; $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码 /** bbb++; if(bbb>=2){ if(objobj.getTime()==date.getTime()){ window.location.href="../schedule.do?method=selectMeet&start="+start; }else{ bbb=1; } } objobj=date; start=""+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm')); setTimeout("myClick()",sss); **/ //window.location.href="../schedule.do?method=selectMeet&start="+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm')); }, eventDragStart:function(calEvent, jsEvent, ui, view){ //日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动 // alert('拖拽开始'); } , eventDragStop:function(calEvent, jsEvent, ui, view){ //日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动 // alert('拖拽结束'); } , eventDrop:function(calEvent, jsEvent, ui, view){ //日程事件被拖动之前和之后触发. 这里的拖动不一定是一个有效的拖动 //alert('拖拽成功'); // alert(calEvent.id+'--'+calEvent.start.toLocaleString()+'--'+(calEvent.end==null?null:calEvent.end.toLocaleString())+'--'+calEvent.title); /* var data="id="+calEvent.id+"&column=start&value="+($.fullCalendar.formatDate(calEvent.start,'yyyy-MM-dd HH:mm')); $.ajax({ type:"POST", url:"../schedule.do?method=scheduleUpdate", data:data, success:function(data){ } }); var date=calEvent.start; if(calEvent.end!=null){ date=calEvent.end; } var data="id="+calEvent.id+"&column=end&value="+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm')); $.ajax({ type:"POST", url:"../schedule.do?method=scheduleUpdate", data:data, success:function(data){ } }); */ } , eventResize: function(calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view){ //alert('改变大小成功'); //alert(calEvent.id+'--'+calEvent.start.toLocaleString()+'--'+(calEvent.end==null?null:calEvent.end.toLocaleString())+'--'+calEvent.title); /** var data="id="+calEvent.id+"&column=start&value="+($.fullCalendar.formatDate(calEvent.start,'yyyy-MM-dd HH:mm')); var date=new Date(calEvent.start); if(calEvent.end!=null){ date=new Date(calEvent.end); //date.setDate(date.getDate()-0+dayDelta); } var data="id="+calEvent.id+"&column=end&value="+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm')); $.ajax({ type:"POST", url:"../schedule.do?method=scheduleUpdate", data:data, success:function(data){ } }); **/ } , eventClick:function(calEvent,jsEvent,view) { //点击日程的触发 /* alert(calEvent.title+'--'+jsEvent+'--'+view); var myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭11'); if(myTitle==null){return false} calEvent.title=myTitle; $('#calendar').fullCalendar('renderEvent', true); //刷新 */ // var str="../schedule.do?ifUpdate=1&method=selectRiChengs&id="+calEvent.id; // window.location.href=str; }, drop: function(date, allDay) { // this function is called when something is dropped var myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭'); if(myTitle==null){return false} // retrieve the dropped element's stored Event Object var originalEventObject = $(this).data('eventObject'); // we need to copy it, so that multiple events don't have a reference to the same object var copiedEventObject = $.extend({}, originalEventObject); copiedEventObject.title=myTitle; // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); //核心的插入代码 } }); }); body { margin-top: 40px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #wrap { width: 1100px; margin: 0 auto; } #external-events { float: left; width: 150px; padding: 0 10px; border: 1px solid #ccc; background: #eee; text-align: left; } #external-events h4 { font-size: 16px; margin-top: 0; padding-top: 1em; } .external-event { /* try to mimick the look of a real event */ margin: 10px 0; padding: 2px 4px; background: #3366CC; color: #fff; font-size: .85em; cursor: pointer; } #external-events p { margin: 1.5em 0; font-size: 11px; color: #666; } #external-events p input { margin: 0; vertical-align: middle; } #calendar { float: right; width: 900px; }
动态拖拽添加
My Event 1