页面的head部分，需远程调用一个字体样式文件，并设置好页面元素的样式，代码如下：

<link rel="stylesheet" href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css">
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
}
#schedule-box{
	width: 320px;
	margin: 30px auto;
	padding: 35px 20px;
	font-size: 13px;
}
.schedule-hd{
	display: flex;
	justify-content: space-between;
	padding: 0 15px;
}
.today{
	flex: 1;
	text-align: center;
}
.ul-box{
	overflow: hidden;
}
.ul-box > li{
	float: left;
	width: 14.28%;
	text-align: center;
	padding: 5px 0;
}
.other-month{
	color: #999999;
}
.current-month{
	color: #333333;
}
.today-style{
	border-radius: 50%;
	background: #58d321;
}
.arrow{
	cursor: pointer;
}
.dayStyle{
	display: inline-block;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	text-align: center;
	line-height: 35px;
	cursor: pointer;
}
.current-month > .dayStyle:hover{
	background: #00BDFF;
	color: #ffffff;
}
.today-flag{
	background: #00C2B1;
	color: #fff;
}
.boxshaw{
	box-shadow: 2px 2px 15px 2px #e3e3e3;
}
.selected-style {
	background: #00BDFF;
	color: #ffffff;
}
#h3Ele{
	text-align: center;
	padding: 10px;
}
</style>

页面的body部分，需设置好日历容器和选中结果的容器，代码如下：

<div id='schedule-box' class="boxshaw"></div>
<div>
	<h3 id='h3Ele'></h3>
</div>

页面的底部，需引入日期插件，并启用插件设置好相关参数，代码如下：

<script type="text/javascript" src="js/schedule.js"></script>
<script type="text/javascript">
var mySchedule = new Schedule({
	el: '#schedule-box',
	//date: '2018-9-20',
	clickCb: function (y,m,d) {
		document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
	},
	nextMonthCb: function (y,m,d) {
		document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
	},
	nextYeayCb: function (y,m,d) {
		document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
	},
	prevMonthCb: function (y,m,d) {
		document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
	},
	prevYearCb: function (y,m,d) {
		document.querySelector('#h3Ele').innerHTML = '日期：'+y+'-'+m+'-'+d	
	}
});
</script>