一直想找一个手机端的关于行事历的周历插件，在手机日历上这种效果很常见，但是基于js开发的却很少见，我所知道的就只有fullcalendar，但是这种并不是我想要的效果，在网上搜索了很久也找不到合适的，最后无奈只好自己编写。
该周历插件是基于jQuery编写的，可以左右点击切换上下周，也可以左右滑动切换上下周，点击日期可以返回对应的日程记录，是很简单的一款行事历插件。截图如下：
css代码如下：
*{
margin: 0;
padding: 0;
}
.week-container{
width: 100%;
overflow: hidden;
margin:0 auto;
font-family: 'Microsoft YaHei';
font-size: 16px;
}
.week-container .week_head{
margin:5px 0;
}
.week-container .week_head span{
display: inline-block;
height: 36px;
padding:0 20px;
background: #f00;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
color: #fff;
line-height: 36px;
font-size: 16px;
}
.time{
position: relative;
}
.week-container .button_prev,.week-container .button_next{
width:30px;
height: 30px;
display: block;
border: 1px solid #f00;
color: #f00;
text-align: center;
line-height: 30px;
position: absolute;
top:50%;
margin-top:-15px;
border-radius: 50%;
text-decoration: none;
font-size: 26px;
z-index: 9;
}
.week-container .button_prev{
left:0;
}
.week-container .button_next{
right: 0;
}
.week-container .time_header{
overflow: hidden;
padding:0 30px;
}
.week-container .time_header h3{
width:14.1%;
text-align: center;
margin:0;
line-height: 40px;
float: left;
font-weight: 600;
font-size: 16px;
}
.week-container .time_con{
overflow: hidden;
width: 300%;
margin-left: -100%;
}
.week-container .time .slider_li{
float: left;
width:33.3%;
padding:0 30px;
box-sizing: border-box;
}
.week-container .time_td{
float: left;
width:14.1%;
height:40px;
text-align: center;
border-radius: 50%;
position: relative;
}
.week-container .time_td p{
margin:0;
}
.week-container .selected{
background: #eee;
}
.week-container .current_date{
background: #f00;
color: #fff;
}
.week-container .dot{
position: absolute;
left: 50%;
bottom: 4px;
margin-left: -2px;
width: 4px;
height: 4px;
background: #FF808E;
border-radius: 50%;
}
js代码如下：
(function ($) {
$.fn.weekCalendar = function (options, param) {
if (typeof options == 'string') {
return $.fn.weekCalendar.methods[options](this, param);
}
//将调用时候传过来的参数和default参数合并
options = $.extend({}, $.fn.weekCalendar.defaults, options || {});
var $ele = $(this);
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth();
var date = d.getDate();
var day = d.getDay();
var arr = new Array();
var html = '<div class="week-container">\
<div class="week_head"></div>\
<div class="time">\
<div class="button_prev"><</div><div class="button_next">></div>\
<div class="time_header"><h3>一</h3><h3>二</h3><h3>三</h3><h3>四</h3><h3>五</h3><h3>六</h3><h3>日</h3></div>\
<div class="time_con"></div>\
</div></div>';
$ele.append(html);
showWeek();
function week(dd){
var li = '<div class="slider_li"></div>';
//var firstTime = new Date(dd.getTime() - (dd.getDay() || 7)*1000 * 60 * 60 * 24);
var firstTime = new Date(dd.getTime() - (dd.getDay()-1)*1000 * 60 * 60 * 24);
//console.log(firstTime);
var lili = new Array();
for(i = 0; i<7;i++){
arr[i]= new Date(firstTime.getTime() + 1000 * 60 * 60 * 24*i);
arr[i].nian = arr[i].getFullYear();
arr[i].yue = arr[i].getMonth();
arr[i].ri = arr[i].getDate();
if(new Date(arr[i].nian,arr[i].yue,arr[i].ri).getTime() == new Date(year,month,date).getTime()){
lili[i] = '<div class="time_td current_date">' + arr[i].ri + '</div>';
if(options.data){
for (var j = 0; j < options.data.length; j++) {
if(new Date(arr[i].nian,arr[i].yue,arr[i].ri).getTime() == new Date(options.data[j].date).getTime()){
lili[i] = '<div class="time_td current_date">' + arr[i].ri + '<i class="dot"></i></div>';
}
}
}
}else{
lili[i] = '<div class="time_td">' + arr[i].ri + '</div>';
if(options.data){
for (var j = 0; j < options.data.length; j++) {
if(new Date(arr[i].nian,arr[i].yue,arr[i].ri).getTime() == new Date(options.data[j].date).getTime()){
lili[i] = '<div class="time_td">' + arr[i].ri + '<i class="dot"></i></div>';
}
}
}
}
}
//console.log(lili)
return $(li).append(lili);
}
function showYM(ym){
//var firstTime = new Date(ym.getTime() - (ym.getDay() || 7)*1000 * 60 * 60 * 24);
var firstTime = new Date(ym.getTime() - (ym.getDay()-1)*1000 * 60 * 60 * 24);
var firstYear = firstTime.getFullYear();
var firstMonth = firstTime.getMonth();
$ele.find(".week_head").html("<span>"+firstYear+"年"+parseInt(firstMonth+1)+"月</span>");
//console.log(firstTime);
}
function showWeek(){
var now_d = new Date();
var prev_d = new Date(new Date().getTime() - 7*1000 * 60 * 60 * 24);
var next_d = new Date(new Date().getTime() + 7*1000 * 60 * 60 * 24);
$ele.find(".time_con").append(week(prev_d));
$ele.find(".time_con").append(week(now_d));
$ele.find(".time_con").append(week(next_d));
showYM(now_d);
styleTime();
selectDate();
}
var count = 0;
function weekPrev(){
count --;
var now_d = new Date(new Date().getTime() + 7*1000 * 60 * 60 * 24*(count));
var prev_d = new Date(new Date().getTime() + 7*1000 * 60 * 60 * 24*(count-1));
$ele.find(".time_con").animate({
marginLeft: 0
}, 200, 'swing', function() {
$ele.find(".time_con").children(':last').remove();
$ele.find(".time_con").prepend(week(prev_d)).css('margin-left', '-100%');
showYM(now_d);
styleTime();
selectDate();
});
return options.weekPrev();
}
function weekNext(){
count ++;
var now_d = new Date(new Date().getTime() + 7*1000 * 60 * 60 * 24*(count));
var next_d = new Date(new Date().getTime() + 7*1000 * 60 * 60 * 24*(count+1));
$ele.find(".time_con").animate({
marginLeft: '-200%'
}, 200, 'swing', function() {
$ele.find(".time_con").children(':first').remove();
$ele.find(".time_con").append(week(next_d)).css('margin-left', '-100%');
showYM(now_d);
styleTime();
selectDate();
});
return options.weekNext();
}
var startX = endX =0;
$ele.find(".time_con").on("touchstart", function (e) {
//e.preventDefault();
var finger = e.originalEvent.changedTouches[0];
startX = finger.pageX;
});
$ele.find(".time_con").on("touchmove", function (e) {
//e.preventDefault(); //阻止页面滑动
var finger = e.originalEvent.changedTouches[0];
endX = finger.pageX;
dX = endX - startX;
$ele.find(".time_con").css({"-webkit-transform":"translate3d("+dX+"px,0,0)"});
//console.log(dX)
});
$ele.find(".time_con").on("touchend", function (e) {
dX = endX - startX;
$ele.find(".time_con").css({"-webkit-transform":"translate3d(0,0,0)","-webkit-transition":"0ms"});
//判断是否滑动了，而不是屏幕上单击了
if(startX!=Math.abs(dX)){
//在滑动的距离超过屏幕宽度的20%时，做某种操作
var clientWidth = document.documentElement.clientWidth;
if(Math.abs(dX)>clientWidth*0.2){
dX <0 ? weekNext():weekPrev();
}
}
startX = endX =0;
});
$ele.find(".button_prev").click(function(){
weekPrev();
});
$ele.find(".button_next").click(function(){
weekNext();
});
function styleTime(){
var widthTime = $ele.find(".time_td").width();
$ele.find(".time_td").css({"height":widthTime,"line-height":widthTime+"px"});
}
function selectDate(){
$ele.find(".time_td").unbind("click");
$ele.find(".time_td").on("click", function (e) {
$ele.find(".time_td").removeClass('selected');
$(this).addClass('selected');
var date = $ele.find(".week_head").text().replace(/年/,'-');
date = date.replace(/月/,'');
date = date+'-'+$(this).text();
var value = '';
if(options.data){
for (var j = 0; j < options.data.length; j++) {
if(new Date(date).getTime() == new Date(options.data[j].date).getTime()){
value = options.data[j].value;
}
}
}
return options.selectDate(date,value);
});
}
};
$.fn.weekCalendar.defaults = {
data:null,
weekPrev: function () { },
weekNext: function () { },
selectDate: function (date,value) { }
};
})(jQuery); 调用方法如下：
<div id='container'></div>
<script>
$("#container").weekCalendar({
data: [
{
date: '2018-6-22',
value: '同学聚会'
},
{
date: '2018/01/01',
value: '呵呵呵'
},
{
date: '2018/07/10',
value: 'hello,world'
}
],
selectDate:function(date,value){
//点击日期
}
});
</script>
扫描二维码关注公众号，回复：
3016206 查看本文章
