jQuery可设置待办事项的手机端日历插件免费下载

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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录