达到的页面效果：
html:
<link href="Scripts/weui/reset.css" rel="stylesheet" />
<link href="Scripts/weui/calendar.css" rel="stylesheet" />
<div class="calendar-wrap"></div>
js:
<!--日历的显示与js文件的先后顺序相关-->
<script src="Scripts/weui/zepto.min.js"></script>
<script src="Scripts/weui/widget.js"></script>
<script src="Scripts/weui/calendar.js"></script>
<script src="Scripts/weui/calendar-extend-slide.js"></script>
<script type="text/javascript">
$(function () {
var tabdate = [1, 5, 7];
var tabclass = ["tag", "tag", "unb"];
calendar(tabdate, tabclass);
//确定选择的日期，确定要置顶的对象；
$(".curr-date").parent().smartFloat();
})
function calendar(d, c) {
var cal = new Calendar({
target: '.calendar-wrap',
className: 'cal',
tagDates: d,
tagClass: c,
todayText: '今天',
// year: 2018,
// month: 8,
onReady: function () {
},
onChangeMonthBefore: function (dateObj, type) {
var tabdate = [2, 4, 6];
var tabclass = ["tag", "tag", "tag"];
//$(".cal").remove();
//calendar(tabdate, tabclass);
this.cfg.tagClass = tabclass;
this.cfg.tagDates = tabdate;
},
//当天日期获取方法
onSelect: function (dateObj, e) {
console.log(dateObj);
},
onChangeMonth: function (dateObj) {
},
onReDrawCalendar: function () {
}
});
}
$.fn.smartFloat = function () {
var position = function (element) {
console.log(element);
var top = element.position().top, pos = element.css("position");
$(window).scroll(function () {
var scrolls = $(this).scrollTop();
if ((scrolls - 30) > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0,
"100%",
"background-color": "#FFF",
"z-index":1
});
} else {
element.css({
top: scrolls
});
}
} else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function () {
position($(this));
});
};
</script>
参考资料：
http://www.mamicode.com/info-detail-2149199.html
https://blog.csdn.net/dx18520548758/article/details/78983864