问题描述
谁能提供个jquery的fullcalendar使用案例,从数据库读取日程数据的。。。
解决方案
http://2015.iteye.com/blog/834805 可以下载下来,将demo中js里的数据从数据库取就可以了
解决方案二:
下面是我改造的代码,你只要修改myInin()中的方法,把那个ajax的注释去掉换成你的路径就ok<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><link rel='stylesheet' type='text/css' href='redmond/theme.css' /><link rel='stylesheet' type='text/css' href='fullcalendar.css' /><script type='text/javascript' src='jquery.js'></script><script type='text/javascript' src='jquery-ui-custom.js'></script><script type='text/javascript' src='fullcalendar.min.js'></script><script type='text/javascript'>//在页面加载后用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=1copiedEventObject.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 endvar 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 itsrevertDuration: 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 reportedcopiedEventObject.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 droppedvar myTitle=prompt('你请输入你要取的名字(如吃饭)','吃饭');if(myTitle==null){return false}// retrieve the dropped element's stored Event Objectvar originalEventObject = $(this).data('eventObject');// we need to copy it, so that multiple events don't have a reference to the same objectvar copiedEventObject = $.extend({}, originalEventObject);copiedEventObject.title=myTitle;// assign it the date that was reportedcopiedEventObject.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); //核心的插入代码}});});</script><style type='text/css'>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;}</style></head><body><div id='wrap'><div id='external-events' style="display:none">动态拖拽添加 <div class='external-event'>My Event 1</div></div><div id='calendar' style="float: none;"></div><div style='clear:both'></div></div></body></html>
解决方案三:
没有用过,不知道这个对你有没有帮助http://www.verycd.com/topics/2782321/