jquery日历,有日程的日期高亮有链接,鼠标经过显示具体日程浮框。

jquery日历,有日程的日期高亮有链接,鼠标经过显示具体日程浮框。,第1张

网上有很多插件诶 插件源码都有demo的 jQuery DateInput ,jQuery Datepicker,Date Range Picker,jQuery UI Datepicker,FullCalendar,Datepicker for Bootstrap 等等很多 建议你去开源中国看看

Datepicker for Bootstrap 我正在用这个

这样:

//方法增添dayNumber天(整形),date:如果没传就使用今天(日期型)

function addDay(dayNumber, date) {

date = date ? date : new Date()

var ms = dayNumber * (1000 * 60 * 60 * 24)

var newDate = new Date(date.getTime() + ms)

return newDate

    }     

var date=addDay(3)

扩展资料:

注意事项

js的时间和jquery是没有关系的,使用的是js原生的Date类进行处理,如果获取到的是一个Date类实例,则使用setDate和getDate进行处理。

比如:现在有个Date实例date,要在上面加上五天:date.setDate(date.getDate() + 5)之后date实例就是五天之后的日期时间了。

如果是一个字符串日期时间,则使用parse方法进行转换:var date = Date.parse("日期时间字符串")然后再进行上面的 *** 作。

下面是我改造的代码,你只要修改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=0i<data.lengthi++){

// 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) //核心的插入代码

}

})

})

</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>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11331381.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存