<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<title>漂亮的jQuery事件日历插件calendar.js - 素材家园（www.sucaijiayuan.com）</title>
<link rel="stylesheet" href="calendar.css">
<style type="text/css">
html {
font: 500 14px 'roboto';
color: #333;
background-color: #fafafa;
}
a {
text-decoration: none;
}
ul, ol, li {
list-style: none;
padding: 0;
margin: 0;
}
#demo {
width: 300px;
margin: 150px auto;
}
p {
margin: 0;
}
#dt {
margin: 30px auto;
height: 28px;
width: 200px;
padding: 0 6px;
border: 1px solid #ccc;
outline: none;
}
</style>
</head>
<body>
<div id="demo">
<h1>jQuery Calendar.js Plugin Examples</h1>
<div id="ca"></div>
<input type="text" id="dt" placeholder="trigger calendar">
<div id="dd"></div>
</div>
<script src="js/jquery.js"></script>
<script src="js/calendar.js"></script>
<script>
$('#ca').calendar({
width: 320,
height: 320,
data: [
{
date: '2015/12/24',
value: 'Christmas Eve'
},
{
date: '2015/12/25',
value: 'Merry Christmas'
},
{
date: '2016/01/01',
value: 'Happy New Year'
}
],
onSelected: function (view, date, data) {
console.log('view:' + view)
alert('date:' + date)
console.log('data:' + (data || 'None'));
}
});
$('#dd').calendar({
trigger: '#dt',
zIndex: 999,
format: 'yyyy-mm-dd',
onSelected: function (view, date, data) {
console.log('event: onSelected')
},
onClose: function (view, date, data) {
console.log('event: onClose')
console.log('view:' + view)
console.log('date:' + date)
console.log('data:' + (data || 'None'));
}
});
</script>
</body>
</html>
