jQuery可设置待办事项的手机端日历插件,带农历日期,设置了待办事项的日期会有一个显眼的小红点显示。
js代码
<script type="text/javascript" src="js/simple-calendar.js"></script>
<script type="text/javascript" src="js/hammer-2.0.8-min.js"></script>
<script type="text/javascript">
var myCalendar = new SimpleCalendar('#calendar');
$(function(){
var monthCH = $('.sc-select-month').text();
$(".sc-mleft").click(function(){
myCalendar.subMonth();
var year = $('.sc-select-year').text();
var monthCH = $('.sc-select-month').text();
var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
})
$(".sc-mright").click(function(){
myCalendar.addMonth();
var year = $('.sc-select-year').text();
var monthCH = $('.sc-select-month').text();
var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
})
});
//滑动切换
var myElement = document.getElementById('calendar');
var hammer = new Hammer(myElement);
hammer.on("swipeleft", function (ev) {
myCalendar.addMonth();
});
hammer.on("swiperight", function (ev) {
myCalendar.subMonth();
});
//添加标记
var mark = {
'2018-2-1':[
{title:'待办事项1文字描述',startTime:'2018-2-2 8:00:00',endTime:'2018-2-2 11:30:00'},
{title:'待办事项2文字描述',startTime:'2018-2-2 18:00:00',endTime:'2018-2-2 19:30:00'}],
'2018-1-10':[{title:'3dadddddd',startTime:'2018-2-30 6:00:00',endTime:'2018-2-30 11:30:00'}],
'2018-1-15':[{title:'assss',startTime:'2018-2-15 12:00:00',endTime:'2018-2-15 14:30:00'}]
};
myCalendar._defaultOptions.mark=mark;
myCalendar.update();
//显示当天的活动在初始化mark之后
//初始化今天的活动
announceList($('.sc-today'));
//有标记的日期点击事件
$('#calendar').on("click", '.sc-selected', function() {
announceList($(this));
});
//显示选择日期当天的活动
function announceList(v){
console.log(v)
if(v.children().hasClass('sc-mark-show')){
var year = $('.sc-select-year').text();
var monthCH = $('.sc-select-month').text();
var day = v.children()[1].innerText;
var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
var date = year + '-' + month + '-' + day;
var content = mark[date];
var matterHtml='';
for(var i=0;i<content.length;i++){
matterHtml +='<li class="announceItem"><div><div class="fl announceImg">'
+'<img class=" " src="images/content.png"/></div>'
+'<p class="announceContent">'+content[i].title+'</p>'
+'</div><div class="announceTime">'+content[i].startTime+' - '+content[i].endTime+'</div></li>';
}
$('.matter').html(matterHtml);
}else{
var matterHtml=''
matterHtml +='<li class="announceItem"><div><p class="announceContent">当前日期暂无活动</p></div></li>';
$('.matter').html(matterHtml);
}
}
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791