使用weeklyCalendar实现周历控件

weeklyCalendar的github地址：https://github.com/smallsea2016/weeklyCalendar

处理后的weeklyCalendar控件的css和js：

链接：https://pan.baidu.com/s/1VlODqkzGVajXnvULKEAV5Q

提取码：k9x2

weeklyCalendar控件的简单使用：

1：引入js/css(这里注意如果你使用的github下载的空间，其css信息在html中)

<link rel="stylesheet" href="/weeklyCalendar/weeklyCalendar.css">  
<script src="/weeklyCalendar/weeklyCalendar.js"></script>

2:html：

<div id="j_weeklyCalendar" class="myWeeklyCanlendar">  
    <div class="datetime_header">  
        <a href="javascript:;" title="上一周" class="prev_icon" role="prev_week"></a>  
        <span><b role="year_selector"></b>年<b role="month_selector"></b>月</span><span >第<b role="week_selector"></b>周</span>  
        <a href="javascript:;" title="下一周" class="next_icon" role="next_week"></a>  
    </div>  
    <ul role="weeks_ch" class="weeklyBox"></ul>  
    <ul role="weeklyCanlendarView" class="weeklyCanlendarBox"></ul>  
</div> 

3:js：

weeklyCalendar('#j_weeklyCalendar',{  
    //点击日期回调  
    clickDate:function(dateTime){  
        console.log(dateTime);  
    }  
});  

根据如上我们可以实现周历控件：

点击日期后我们可以在控制台看到我们点击的具体日期信息

我们还可以设置默认日期，只需要配置defaultDate参数即可，如：

weeklyCalendar('#j_weeklyCalendar',{  
    defaultDate:'2021-05-20',  
    //点击日期回调  
    clickDate:function(dateTime){  
        console.log(dateTime);  
    }  
}); 

我们还可以设置禁用日期,只需要配置disabledDate参数即可，如：

weeklyCalendar('#j_weeklyCalendar',{  
    disabledDate:['2020-07-18','2020-07-19','2020-07-20'],  
    //点击日期回调  
    clickDate:function(dateTime){  
        console.log(dateTime);  
    }  
}); 

如上我们就可以使用weeklyCalendar实现周历控件