jquery日程,jquery日历
jquery日历，有日程的日期高亮有链接，鼠标经过显示具体日程浮框。
网上有很多插件诶 插件源码都有demo的 jQuery DateInput ，jQuery Datepicker，Date Range Picker，jQuery UI Datepicker，FullCalendar，Datepicker for Bootstrap 等等很多 建议你去开源中国看看
目前累计服务客户上1000+，积累了丰富的产品开发及服务经验。以网站设计水平和技术实力，树立企业形象，为客户提供成都网站设计、成都网站制作、外贸网站建设、网站策划、网页设计、网络营销、VI设计、网站改版、漏洞修补等服务。成都创新互联始终以务实、诚信为根本，不断创新和提高建站品质，通过对领先技术的掌握、对创意设计的研究、对客户形象的视觉传递、对应用系统的结合，为客户提供更好的一站式互联网解决方案，携手广大客户，共同发展进步。
Datepicker for Bootstrap 我正在用这个
怎么在jsp里加日程安排。我做了个jsp的管理系统，想加个日程安排，就像图里的那样，可以在日历中添加事件
这个是jquery的一个插件：FullCalendar
去看一下文档就可以拿来用了
谁能提供个jquery的fullcalendar使用案例从数，据库读取日程数据
下面是我改造的代码,你只要修改myInin()中的方法，把那个ajax的注释去掉换成你的路径就ok
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"""
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=selectScheduleuserId=1',{},function(data){
for(var i=0;idata.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==0data[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 ()
// 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" ()
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=selectMeetstart="+start;
}else{
bbb=1;
}
}
objobj=date;
start=""+($.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm'));
setTimeout("myClick()",sss);
**/
//window.location.href="../schedule.do?method=selectMeetstart="+($.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=startvalue="+($.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=endvalue="+($.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=startvalue="+($.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=endvalue="+($.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=1method=selectRiChengsid="+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" ()
$('#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
jquery 日历 添加日程
埋得太深，试下这个：
还有，你的 buildDate 在哪声明的？这里没见，
var taskInfo = $("#taskInfo").val();
var data = {
"action": "addTask", //action参数
"taskInfo": taskInfo, //任务信息参数
"buildDate": buildDate //任务日期参数
}
var onSuccess = function(taskId) {
alert(taskId);
buildTask(buildDate, taskId, taskInfo); //建立任务节点
closeAddBox(); //关闭新建任务box
}
$.ajax({
url: 'calendar.jsp',
type: 'POST',
data: taskInfo;
success: onSuccess(taskId);
});
function buildTask(buildDate, taskId, taskInfo) {
$("#" + buildDate).parent().append("div id='task" + taskId + "' class='task' onclick='editTask(this)'" + taskInfo + "/div");
}
fullcalendar 判断是否有日程
fullcalendar
可以解决同一时间段的
多个日程，
是一款jQuery日程管理控件。
日程提醒功能（java）
给你一个思路咯，，如果用在提示用在jsp页面的推荐你用js来实现，当页面加载的时候就执行一个判断，判断需要提醒是时间是不是今天，如果是今天就让执行提醒的js代码进入执行状态 即:window.setTimeout(fun,s) 方法，s (等待时间) 的值需要计算的，假如是10分钟后执行 那们s的值就是 10*1000 以此类推， 如果提醒的时间不是今天那 setTimeout 这个方法就不要执行 这样说部知道你能理解不？
分享名称：jquery日程,jquery日历
文章地址：http://myzitong.com/article/phsogh.html