js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js
日历控件:
https://fullcalendar.io/docs/
https://fullcalendar.io/docs/event_data/events_function/
https://fullcalendar.io/docs/event_data/Event_Object/
https://fullcalendar.io/docs/mouse/eventClick/
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<style>
.event-class{
display:inline-block;
color: yellow;
width:100px;
height:100px;
}
</style>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
businessHours: true, // display business hours
editable: true,
events: function( start, end, timezone, callback ) {
console.log('start:'+start+',end:'+end)
console.log('start:'+start.unix()+',end:'+end.unix())
var evts = [
{
title: '事件Business Lunch', // Required
start: '2015-02-03T13:00:00', // Required
className: 'event-class',
constraint: 'businessHours'
},
{
title: 'Meeting', // Required
start: '2015-02-13T11:00:00', // Required
constraint: 'availableForMeeting', // defined below
color: 'red'
}];
callback(evts);
},
eventClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
alert('View: ' + view.name);
// change the border color just for fun
$(this).css('border-color', 'red');
}
/*
events: [
{
title: '事件Business Lunch',
start: '2015-02-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2015-02-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
{
title: 'Conference',
start: '2015-02-18',
end: '2015-02-20'
},
{
title: 'Party',
start: '2015-02-29T20:00:00'
},
// areas where "Meeting" must be dropped
{
id: 'availableForMeeting',
start: '2015-02-11T10:00:00',
end: '2015-02-11T16:00:00',
rendering: 'background'
},
{
id: 'availableForMeeting',
start: '2015-02-13T10:00:00',
end: '2015-02-13T16:00:00',
rendering: 'background'
},
// red areas where no events can be dropped
{
start: '2015-02-24',
end: '2015-02-28',
overlap: false,
rendering: 'background',
color: '#ff9f89'
},
{
start: '2015-02-06',
end: '2015-02-08',
overlap: false,
rendering: 'background',
color: '#ff9f89'
}
]
*/
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
日期时间库：
http://momentjs.com/
Parse, validate, manipulate, and display dates and times in JavaScript.
//Format Dates
moment().format('MMMM Do YYYY, h:mm:ss a');
moment().format('dddd');
moment().format("MMM Do YY");
moment().format('YYYY [escaped] YYYY');
moment().format();
//Relative Time
moment("20111031", "YYYYMMDD").fromNow();
moment("20120620", "YYYYMMDD").fromNow();
moment().startOf('day').fromNow();
moment().endOf('day').fromNow();
moment().startOf('hour').fromNow();
//Calendar Time
moment().subtract(10, 'days').calendar();
moment().subtract(6, 'days').calendar();
moment().subtract(3, 'days').calendar();
moment().subtract(1, 'days').calendar();
moment().calendar();
moment().add(1, 'days').calendar();
moment().add(3, 'days').calendar();
moment().add(10, 'days').calendar();
//Multiple Locale Support
moment.locale();
moment().format('LT');
moment().format('LTS');
moment().format('L');
moment().format('l');
moment().format('LL');
moment().format('ll');
moment().format('LLL');
moment().format('lll');
moment().format('LLLL');
moment().format('llll');
PS:
当前日期时间格式化:
moment().format('YYYY-MM-DD HH:mm:ss.SSS')
ref: http://momentjs.com/docs/#/displaying/
