谁能提供个jquery的fullcalendar使用案例,从数据库读取日程数据的。。。

问题描述

谁能提供个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/

时间: 2024-10-26 10:30:05

谁能提供个jquery的fullcalendar使用案例,从数据库读取日程数据的。。。的相关文章

cdn-不同CDN提供的jQuery库,除了访问稳定性跟速度外,还有什么区别?

问题描述 不同CDN提供的jQuery库,除了访问稳定性跟速度外,还有什么区别? 如题,刚学jQuery,我想知道不同CDN提供的jQuery库,除了访问稳定性跟速度外,还有什么区别?代码层面来看,是不是实现的功能都是一样的?没币,只能叩谢各位大虾了! 解决方案 直接访问jquery的cdn地址链接就可以直接看jquery源码了,里面也有jquery的版本号 解决方案二: 再补充一个问题,如果我使用微软的CDN,如何查看它提供的最新jQuery库版本

关于fullcalendar的使用,如何添加日程保存到数据库?

问题描述 关于fullcalendar的使用,如何添加日程保存到数据库? 刚刚接触js方面的,对插件不太熟悉,谁能帮忙提供些资源信息,如何将ashx和前台页面连接起来,能帮忙讲解一下吗?谢过好心人! 解决方案 添加日程后台是你自己写,fc只是需要获取符合他要求的数据格式就行了,也没有提供添加事件保存数据库的api, 自己认真看下api:http://fullcalendar.io/docs/ demo:http://fullcalendar.io/

jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容_jquery

本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct

jquery 构造函数在表单提交过程中修改数据

  这篇文章主要介绍了jquery 构造函数在表单提交过程中修改数据的方法,十分简单实用,有需要的小伙伴可以参考下. 先贴代码 ? 1 2 3 4 5 6 7 <script type="text/javascript"> function appendText(){ var content = $("#textarea").val(); var new_content = content + "wap"; $("#text

jquery的ajax和getJson跨域获取json数据的实现方法

 本篇文章主要是对jquery的ajax和getJson跨域获取json数据的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题.   跨域的安全限制都是指浏览器端

jquery 动态图-怎么改下面代码,能读出数据库中的数据并实时显示?

问题描述 怎么改下面代码,能读出数据库中的数据并实时显示? 数据是时间对应温度,代码是Jquery的一个example. 菜鸟一只,先谢过大神. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type&

jquery ajax 读取json数据存入表格中

问题描述 jquery ajax 读取json数据存入表格中 test.txt的json数据如下[{""XH"":1YWName"":""业务1""SName"":""系统1""QDName"":""渠道1""HJNumber"":5}{""XH&q

php-PHP提供了一个借口 用Java调用然后实现解析json数据展示到界面上最好能有demo

问题描述 PHP提供了一个借口 用Java调用然后实现解析json数据展示到界面上最好能有demo PHP提供了一个借口 用Java调用然后实现解析json数据展示到界面上最好能有demo 解决方案 说真的其实我也不会,你可以问高手 解决方案二: 使用了新浪云的php,直接json_encode数据库查询结果 代码如下 <?php header("Content-type: text/html; charset=utf-8"); //echo 'Hello, SAE!'; $my

jquery easyui treegrid reload ie不重新加载数据

问题描述 jquery easyui treegrid reload ie不重新加载数据 用jquery easyui treegrid 写了一个简单的tree结构,但是用treegrid('reload');重新加载数据时,在IE浏览器下,不行,但是在其他的浏览器(火狐,谷歌,opera)下,就可以重新加载. 下面是页面的代码: data-options=" width:482, height:447, top:-30, iconCls: 'tree-folder', rownumbers: