页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/calendar-pro.css">

页面的body部分，一个div容器用来放置日历，一个按钮用来触发获取日期数据，代码如下：

<div class="calendar-box demo-box"></div>
<button onclick="getActive()">获取选中日期值</button>

页面的底部，先引入jQuery库和一个JS插件，然后启用日历插件并设置好相应的参数，代码如下：

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/calendar-pro.js"></script>
<script type="text/javascript">
$('.calendar-box').calendar({
	ele : '.demo-box', //依附
	title : '选择预约时间',
//	beginDate : '2017-05-07',
//	endDate : '2017-07-04',
	data : [
		{date:'2017-05-07',data:'107'},
		{date:'2017-05-08',data:'108'},
		{date:'2017-05-09',data:'109'},
		{date:'2017-05-10',data:'110'},
		{date:'2017-05-11',data:'111'},
		{date:'2017-05-12',data:'112'},
		{date:'2017-05-13',data:'113'},
//		......省略部分演示数据
//		{date:'2017-06-25',data:'125'},
		{date:'2017-06-26',data:'126'},
		{date:'2017-06-27',data:'127'},
		{date:'2017-06-28',data:'128'},
		{date:'2017-06-29',data:'129'},
		{date:'2017-06-30',data:'130'},
		{date:'2017-07-01',data:'121'},
		{date:'2017-07-02',data:'122'},
		{date:'2017-07-03',data:'123'},
		{date:'2017-07-04',data:'124'},
	]
});
function getActive(){
	var data = $('.calendar-box').calendarGetActive();
	console.log(data);
	alert(data.date+" ¥"+data.money);
}
</script>