Skip to content

Commit 355f18e

Browse files
cpa0701cpa0701
committed
verson1.0
1 parent b76fff7 commit 355f18e

11 files changed

Lines changed: 446 additions & 0 deletions

‎.idea/.name‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/encodings.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/misc.xml‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/weekCalendar.iml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>周历插件</title>
6+
<link rel="stylesheet" href="weekCalendar.css">
7+
<script src="js/jquery-2.1.1.min.js"></script>
8+
</head>
9+
<body>
10+
<div class="wcYear"></div>
11+
<ul class="wcMonth">
12+
<li data-month="01">一月</li>
13+
<li data-month="02">二月</li>
14+
<li data-month="03">三月</li>
15+
<li data-month="04">四月</li>
16+
<li data-month="05">五月</li>
17+
<li data-month="06">六月</li>
18+
<li data-month="07">七月</li>
19+
<li data-month="08">八月</li>
20+
<li data-month="09">九月</li>
21+
<li data-month="10">十月</li>
22+
<li data-month="11">十一月</li>
23+
<li data-month="12">十二月</li>
24+
</ul>
25+
<ul class="wcDate">
26+
<li>&lt;上周</li>
27+
<li><span>02</span><span>周日</span></li>
28+
<li><span>02</span><span>周一</span></li>
29+
<li><span>02</span><span>周二</span></li>
30+
<li><span>02</span><span>周三</span></li>
31+
<li><span>02</span><span>周四</span></li>
32+
<li><span>02</span><span>周五</span></li>
33+
<li><span>02</span><span>周六</span></li>
34+
<li>下周&gt;</li>
35+
</ul>
36+
<script src="js/weekCalendar.js"></script>
37+
<script>
38+
WeekCalendar();
39+
</script>
40+
</body>
41+
</html>

‎img/icArrowDown.png‎

1003 Bytes
Loading

‎img/icArrowUp.png‎

1009 Bytes
Loading

‎js/jquery-2.1.1.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/weekCalendar.js‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
/**
2+
* Created by ccc on 2017/7/11.
3+
*/
4+
//初始化详情页面
5+
var WeekCalendar = function (func1, func2) {
6+
var weekCalendar_plugin = {
7+
init: function () {
8+
//设置全局同步
9+
$.ajaxSetup({
10+
async: false, //设置全局ajax同步
11+
cache: false //设置全局ajax不缓存
12+
});
13+
14+
//第一步：初始化其他页面传过来的参数
15+
weekCalendar_plugin.initParams();
16+
// 第二步，初始化控件
17+
weekCalendar_plugin.initControl();
18+
//第三步:绑定事件
19+
weekCalendar_plugin.bindEvent();
20+
},
21+
initParams: function () {//第一步：初始化其他页面传过来的参数
22+
weekCalendar_plugin.getNowDate();
23+
weekCalendar_plugin.theMonth = weekCalendar_plugin.nowMonth; //当前月（不变）
24+
$(".wcMonth").children('li:eq(' + weekCalendar_plugin.theMonth + ')').addClass("today");
25+
weekCalendar_plugin.theYear = weekCalendar_plugin.nowYear;//当前年（不变）
26+
weekCalendar_plugin.weekStartDate = '';
27+
weekCalendar_plugin.startDateMonth = '';
28+
weekCalendar_plugin.weekEndDate = '';
29+
weekCalendar_plugin.StartDay = 0;
30+
weekCalendar_plugin.EndDay = 0;
31+
},
32+
initControl: function () {// 第二步，初始化控件
33+
weekCalendar_plugin.getStartAndEndDay();
34+
weekCalendar_plugin.initWeekCalendar(weekCalendar_plugin.StartDay, weekCalendar_plugin.EndDay, weekCalendar_plugin.nowDay, weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
35+
},
36+
//第三步:绑定事件
37+
bindEvent: function () {
38+
//点击周历显示相应进行周历跳转和显示当日事件
39+
$(".wcDate>li").click(function (e) {
40+
var StartDay = '';
41+
var EndDay = '';
42+
var monthDays = weekCalendar_plugin.getMonthDays(weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
43+
var startMonthDate = weekCalendar_plugin.getMonthStartDate(weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
44+
if ($(e.target).text().indexOf("上周") != -1) {
45+
46+
StartDay = parseInt($(".wcDate>li:eq(1)").children('span:first-of-type').text()) - 7;
47+
EndDay = parseInt($(".wcDate>li:eq(7)").children('span:first-of-type').text()) - 7;
48+
if (StartDay < 1 && EndDay < 1) {
49+
weekCalendar_plugin.nowMonth = --weekCalendar_plugin.startDateMonth;
50+
if (startMonthDate.indexOf("01-01") != -1) {
51+
weekCalendar_plugin.nowYear -= 1;
52+
}
53+
monthDays = weekCalendar_plugin.getMonthDays(weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
54+
StartDay = monthDays + StartDay;
55+
EndDay = monthDays + EndDay;
56+
} else if (StartDay < 1 && EndDay >= 1) {
57+
weekCalendar_plugin.nowMonth = --weekCalendar_plugin.startDateMonth;
58+
if (startMonthDate.indexOf("01-01") != -1) {
59+
weekCalendar_plugin.nowYear -= 1;
60+
}
61+
monthDays = weekCalendar_plugin.getMonthDays(weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
62+
StartDay = monthDays + StartDay;
63+
} else if (StartDay >= 1 && EndDay < 1) {
64+
weekCalendar_plugin.nowMonth = weekCalendar_plugin.startDateMonth;
65+
monthDays = weekCalendar_plugin.getMonthDays(weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
66+
EndDay = monthDays + EndDay;
67+
}
68+
$(".wcDate>li.active").removeClass('active');
69+
weekCalendar_plugin.initWeekCalendar(StartDay, EndDay, weekCalendar_plugin.nowDay, weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
70+
} else if ($(e.target).text().indexOf("下周") != -1) {
71+
StartDay = parseInt($(".wcDate>li:eq(1)").children('span:first-of-type').text()) + 7;
72+
EndDay = parseInt($(".wcDate>li:eq(7)").children('span:first-of-type').text()) + 7;
73+
if (EndDay > monthDays && StartDay > monthDays) {
74+
EndDay = EndDay - monthDays;
75+
StartDay = StartDay - monthDays;
76+
weekCalendar_plugin.nowMonth = ++weekCalendar_plugin.startDateMonth;
77+
if (startMonthDate.indexOf("12-01") != -1) {
78+
weekCalendar_plugin.nowYear += 1;
79+
}
80+
} else if (EndDay > monthDays && StartDay <= monthDays) {
81+
EndDay = EndDay - monthDays;
82+
} else if (EndDay <= monthDays && StartDay > monthDays) {
83+
StartDay = StartDay - monthDays;
84+
weekCalendar_plugin.nowMonth = ++weekCalendar_plugin.startDateMonth;
85+
if (startMonthDate.indexOf("12-01") != -1) {
86+
weekCalendar_plugin.nowYear += 1;
87+
}
88+
}
89+
$(".wcDate>li.active").removeClass('active');
90+
weekCalendar_plugin.initWeekCalendar(StartDay, EndDay, weekCalendar_plugin.nowDay, weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
91+
} else {
92+
$(".wcDate>li.active").removeClass('active');
93+
$(this).addClass("active");
94+
if (func1)
95+
func1(weekCalendar_plugin.nowYear, weekCalendar_plugin.nowMonth, $(this).find("span:first-of-type").text(), $(this).find("span:last-of-type").text());
96+
}
97+
});
98+
//点击月份显示对应周历
99+
$(".wcMonth>li").click(function (e) {
100+
$(".wcMonth>li.active").removeClass('active');
101+
$(this).addClass("active");
102+
$(".wcDate>li.active").removeClass('active');
103+
weekCalendar_plugin.getNowDate(weekCalendar_plugin.nowYear + '-' + $(this).attr('data-month') + '-01');
104+
weekCalendar_plugin.getStartAndEndDay();
105+
weekCalendar_plugin.initWeekCalendar(weekCalendar_plugin.StartDay, weekCalendar_plugin.EndDay, weekCalendar_plugin.nowDay, weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
106+
});
107+
//点击年份显示对应周历
108+
$(".wcYear").on('click', 'i', function (e) {
109+
var nowYear = '';
110+
if ($(e.target).attr('data-change') == 'pre') {
111+
nowYear = parseInt(e.target.nextSibling.nodeValue) - 1;
112+
} else {
113+
nowYear = parseInt(e.target.previousSibling.nodeValue) + 1;
114+
}
115+
weekCalendar_plugin.getNowDate(nowYear + '-' + $(".wcMonth>li.active").attr('data-month') + '-01');
116+
weekCalendar_plugin.getStartAndEndDay();
117+
weekCalendar_plugin.initWeekCalendar(weekCalendar_plugin.StartDay, weekCalendar_plugin.EndDay, weekCalendar_plugin.nowDay, weekCalendar_plugin.nowYear, weekCalendar_plugin.startDateMonth);
118+
$(".wcDate>li.active").removeClass('active');
119+
});
120+
},
121+
122+
//获得当前日，月，年
123+
getNowDate: function (date) {
124+
if (date)
125+
weekCalendar_plugin.now = new Date(date); //当前日期
126+
else
127+
weekCalendar_plugin.now = new Date(); //当前日期
128+
weekCalendar_plugin.nowDayOfWeek = weekCalendar_plugin.now.getDay(); //今天本周的第几天
129+
weekCalendar_plugin.nowDay = weekCalendar_plugin.now.getDate(); //当前日
130+
weekCalendar_plugin.nowMonth = weekCalendar_plugin.now.getMonth(); //当前月
131+
weekCalendar_plugin.nowYear = weekCalendar_plugin.now.getYear(); //当前年
132+
weekCalendar_plugin.nowYear += (weekCalendar_plugin.nowYear < 2000) ? 1900 : 0; //
133+
},
134+
getStartAndEndDay: function () {
135+
weekCalendar_plugin.weekStartDate = weekCalendar_plugin.getWeekStartDate();
136+
weekCalendar_plugin.weekEndDate = weekCalendar_plugin.getWeekEndDate();
137+
weekCalendar_plugin.startDateMonth = parseInt(weekCalendar_plugin.weekStartDate.substr(5, 2)) - 1;
138+
weekCalendar_plugin.StartDay = parseInt(weekCalendar_plugin.weekStartDate.substr(8, 2));
139+
weekCalendar_plugin.EndDay = parseInt(weekCalendar_plugin.weekEndDate.substr(8, 2));
140+
},
141+
//获得本周的开端日期
142+
getWeekStartDate: function () {
143+
var weekStartDate = new Date(weekCalendar_plugin.nowYear, weekCalendar_plugin.nowMonth, weekCalendar_plugin.nowDay - weekCalendar_plugin.nowDayOfWeek);
144+
return weekCalendar_plugin.formatDate(weekStartDate);
145+
},
146+
//获得本周的停止日期
147+
getWeekEndDate: function () {
148+
var weekEndDate = new Date(weekCalendar_plugin.nowYear, weekCalendar_plugin.nowMonth, weekCalendar_plugin.nowDay + (6 - weekCalendar_plugin.nowDayOfWeek));
149+
return weekCalendar_plugin.formatDate(weekEndDate);
150+
},
151+
//格局化日期：yyyy-MM-dd
152+
formatDate: function (date) {
153+
var myyear = date.getFullYear();
154+
var mymonth = date.getMonth() + 1;
155+
var myweekday = date.getDate();
156+
157+
if (mymonth < 10) {
158+
mymonth = "0" + mymonth;
159+
}
160+
if (myweekday < 10) {
161+
myweekday = "0" + myweekday;
162+
}
163+
return (myyear + "-" + mymonth + "-" + myweekday);
164+
},
165+
//生成本周日历
166+
initWeekCalendar: function (StartDay, EndDay, today, nowYear, nowMonth) {
167+
var i = StartDay;
168+
if (StartDay < EndDay) {
169+
$.each($(".wcDate").find('li>span:first-of-type'), function (a, b) {
170+
if (i < 10) {
171+
i = "0" + i;
172+
}
173+
$(b).text(i);
174+
i = parseInt(i);
175+
if (i == today && weekCalendar_plugin.nowMonth == weekCalendar_plugin.theMonth && nowYear == weekCalendar_plugin.theYear) {
176+
$(b).parent().addClass('today');
177+
} else {
178+
$(b).parent().removeClass('today');
179+
}
180+
i++;
181+
});
182+
} else {
183+
var MonthEndDate = weekCalendar_plugin.getMonthEndDate(nowYear, nowMonth);
184+
var j = 1;
185+
$.each($(".wcDate").find('li>span:first-of-type'), function (a, b) {
186+
if (i <= new Date(MonthEndDate).getDate()) {
187+
$(b).text(i);
188+
i = parseInt(i);
189+
if (i == today && weekCalendar_plugin.nowMonth == weekCalendar_plugin.theMonth && nowYear == weekCalendar_plugin.theYear) {
190+
$(b).parent().addClass('today');
191+
} else {
192+
$(b).parent().removeClass('today');
193+
}
194+
i++;
195+
} else {
196+
if (j <= EndDay) {
197+
$(b).text("0" + j);
198+
if (j == today && weekCalendar_plugin.nowMonth == weekCalendar_plugin.theMonth && nowYear == weekCalendar_plugin.theYear) {
199+
$(b).parent().addClass('today');
200+
} else {
201+
$(b).parent().removeClass('today');
202+
}
203+
j++;
204+
}
205+
}
206+
});
207+
}
208+
//显示当前年
209+
$(".wcYear").html('<i data-change="pre"></i>' + weekCalendar_plugin.nowYear + '<i data-change="next"></i>');
210+
//显示当前月
211+
$(".wcMonth").children('li').removeClass("active");
212+
$(".wcMonth").children('li:eq(' + weekCalendar_plugin.nowMonth + ')').addClass("active");
213+
if (func2)
214+
func2();
215+
},
216+
//获得本月的开端日期
217+
getMonthStartDate: function (nowYear, nowMonth) {
218+
var monthStartDate = new Date(nowYear, nowMonth, 1);
219+
return weekCalendar_plugin.formatDate(monthStartDate);
220+
},
221+
222+
//获得本月的停止日期
223+
getMonthEndDate: function (nowYear, nowMonth) {
224+
var monthEndDate = new Date(nowYear, nowMonth, weekCalendar_plugin.getMonthDays(nowYear, nowMonth));
225+
return weekCalendar_plugin.formatDate(monthEndDate);
226+
},
227+
//获得某月的天数
228+
getMonthDays: function (nowYear, myMonth) {
229+
var monthStartDate = new Date(nowYear, myMonth, 1);
230+
var monthEndDate = new Date(nowYear, myMonth + 1, 1);
231+
return (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
232+
}
233+
};
234+
weekCalendar_plugin.init();
235+
};

0 commit comments

Comments
 (0)