我從頭開始構建多視圖日曆。我有一個實現工作,將日期設置爲正確的日期,並允許您切換月份。 我的這種執行HTML看起來像這樣:從頭開始構建多視圖日曆;每週查看算法
<div id="cal">
<div class="header">
<span class="left button" id="prev"> ⟨ </span>
<span class="month-year" id="label"> June 2017 </span>
<span class="right button" id="next"> ⟩ </span>
</div>
<table id="days">
<td>sun</td>
<td>mon</td>
<td>tue</td>
<td>wed</td>
<td>thu</td>
<td>fri</td>
<td>sat</td>
</table>
<div id="cal-frame">
<table class="curr">
<tbody>
<tr><td class="nil"></td><td class="nil"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td class="today">11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td></tr>
<tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr>
<tr><td>27</td><td>28</td><td>29</td><td>30</td><td class="nil"></td><td class="nil"></td><td class="nil"></td></tr>
</tbody>
</table>
</div>
,以及隨之而來的JavaScript是這樣的:
$(document).ready(function(){
var CALENDAR = function() {
var wrap, label,
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
function init(newWrap) {
wrap = $(newWrap || "#cal");
label = wrap.find("#label");
wrap.find("#prev").bind("click.calendar", function() { switchMonth(false); });
wrap.find("#next").bind("click.calendar", function() { switchMonth(true); });
label.bind("click", function() { switchMonth(null, new Date().getMonth(), new Date().getFullYear()); });
label.click();
}
function switchMonth(next, month, year) {
var curr = label.text().trim().split(" "), calendar, tempYear = parseInt(curr[1], 10);
if (!month) {
if (next) {
if (curr[0] === "December") {
month = 0;
} else {
month = months.indexOf(curr[0]) + 1;
}
} else {
if (curr[0] === "January") {
month = 11;
} else {
month = months.indexOf(curr[0]) - 1;
}
}
}
if (!year) {
if (next && month === 0) {
year = tempYear + 1;
} else if (!next && month === 11) {
year = tempYear - 1;
} else {
year = tempYear;
}
}
calendar = createCal(year, month);
$("#cal-frame", wrap)
.find(".curr")
.removeClass("curr")
.addClass("temp")
.end()
.prepend(calendar.calendar())
.find(".temp")
.fadeOut("slow", function() { $(this).remove(); });
$('#label').text(calendar.label);
}
function createCal(year, month) {
var day = 1, i, j, haveDays = true,
startDay = new Date(year, month, day).getDay(),
daysInMonths = [31, (((year%4==0)&&(year%100!=0))||(year%400==0)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
calendar = [];
if (createCal.cache[year]) {
if (createCal.cache[year][month]) {
return createCal.cache[year][month];
}
}
else {
createCal.cache[year] = {};
}
i = 0;
while (haveDays) {
calendar[i] = [];
for (j = 0; j < 7; j++) {
if (i === 0) {
if (j === startDay) {
calendar[i][j] = day++;
startDay++;
}
} else if (day <= daysInMonths[month]) {
calendar[i][j] = day++;
} else {
calendar[i][j] = "";
haveDays = false;
}
if (day > daysInMonths[month]) {
haveDays = false;
}
}
i++;
}
if (calendar[5]) {
for (i = 0; i < calendar[5].length; i++) {
if (calendar[5][i] !== "") {
calendar[4][i] = "<span>" + calendar[4][i] + "</span><span>" + calendar[5][i] + "</span>";
}
}
calendar = calendar.slice(0, 5);
}
for (i = 0; i < calendar.length; i++) {
calendar[i] = "<tr><td>" + calendar[i].join("</td><td>") + "</td></tr>";
}
calendar = $("<table>" + calendar.join("") + "</table>").addClass("curr");
$("td:empty", calendar).addClass("nil");
if (month === new Date().getMonth()) {
$('td', calendar).filter(function() { return $(this).text() === new Date().getDate().toString(); }).addClass("today");
}
createCal.cache[year][month] = { calendar : function() { return calendar.clone() }, label : months[month] + " " + year };
return createCal.cache[year][month];
}
createCal.cache = {};
return {
init : init,
switchMonth : switchMonth,
createCal : createCal
};
};
var cal = CALENDAR();
cal.init();
});
這一切工作完美,只是提供了背景。我的問題是我正在嘗試爲每週視圖實現相同的功能(即默認爲當前星期,具有該周的正確日期,在標題上列出月份和年份,並允許您切換幾周。使用月份代碼作爲指南來實現每週功能的相同想法,但不幸的是它不工作。我不確定是否需要完全找到一些新算法,或者代碼是否可以修改,但我。「M希望後者讓我知道,如果您有任何見解 一週查看HTML看起來像這樣:
<html>
<head>
</head>
<body>
<div id="weekCal">
<div class="header">
<span class="left button" id="prev"> ⟨ </span>
<span class="month-year" id="label"> April 2017 </span>
<span class="right button" id="next"> ⟩ </span>
</div>
<table id="days">
<td>sun</td>
<td>mon</td>
<td>tue</td>
<td>wed</td>
<td>thu</td>
<td>fri</td>
<td>sat</td>
</table>
<div id="cal-frame">
<table class="curr">
<tbody>
<tr><td class="nil"></td><td class="nil"></td><td>1</td><td class="today">2</td><td>3</td><td>4</td><td>5</td></tr>
</tbody>
</table>
</div>
</div>
我試圖推導出周視圖中的JavaScript看起來像這樣:
$(document).ready(function(){
var WEEKLY_CALENDAR = function() {
var weekWrap, weekLlabel,
weeks = ["Week1", "Week2", "Week3", "Week4", "Week 5", "Week 6", "Week 7", "Week 8", "Week 9", "Week 10", "Week 11", "Week 12"];
在最後的實現中,我假設我需要52周,但我以12開始,作爲一個例子,只是爲了看看它是否工作 months = [「January」,「February」,「March 「,」四月「,」五月「,」六月「,」七月「,」八月「,」九月「,」十月「,」十一月「,」十二月「];
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1);
var today = new Date(this.getFullYear(),this.getMonth(),this.getDate());
var dayOfYear = ((today - onejan + 86400000)/86400000);
return Math.ceil(dayOfYear/7)
};
function init(newWrap) {
weekWrap = $(newWrap || "#weekCal");
label = wrap.find("#label");
wrap.find("#prev").bind("click.calendar", function() { switchWeek(false); });
wrap.find("#next").bind("click.calendar", function() { switchWeek(true); });
label.bind("click", function() { switchWeek(null, new Date().getWeek(), new Date().getMonth(), new Date().getFullYear()); });
label.click();
}
function switchWeek(next, week, month, year) {
var curr = label.text().trim().split(" "), calendar, tempYear = parseInt(curr[1], 10);
if (!week) {
if (next) {
if (curr[0] === "week 52") {
week = 0;
} else {
week = week.indexOf(curr[0]) + 1;
}
} else {
if (curr[0] === "week 1") {
week = 11;
} else {
week = weeks.indexOf(curr[0]) - 1;
}
}
}
if (!month) {
if (next) {
if (curr[0] === "December") {
month = 0;
} else {
month = months.indexOf(curr[0]) + 1;
}
} else {
if (curr[0] === "January") {
month = 11;
} else {
month = months.indexOf(curr[0]) - 1;
}
}
}
if (!year) {
if (next && month === 0) {
year = tempYear + 1;
} else if (!next && month === 11) {
year = tempYear - 1;
} else {
year = tempYear;
}
}
calendar = createCal(year, month, week);
$("#cal-frame", weekWrap)
.find(".curr")
.removeClass("curr")
.addClass("temp")
.end()
.prepend(calendar.calendar())
.find(".temp")
.fadeOut("slow", function() { $(this).remove(); });
$('#label').text(calendar.label);
}
function createCal(year, month, week) {
var day = 1, i, j, haveDays = true,
startDay = new Date(year, month, day).getDay(),
daysInMonths = [31, (((year%4==0)&&(year%100!=0))||(year%400==0)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
calendar = [];
if (createCal.cache[year]) {
if (createCal.cache[year][week]) {
return createCal.cache[year][week];
}
}
else {
createCal.cache[year] = {};
}
i = 0;
while (haveDays) {
calendar[i] = [];
for (j = 0; j < 7; j++) {
if (i === 0) {
if (j === startDay) {
calendar[i][j] = day++;
startDay++;
}
} else if (day <= daysInMonths[month]) {
calendar[i][j] = day++;
} else {
calendar[i][j] = "";
haveDays = false;
}
if (day > daysInMonths[month]) {
haveDays = false;
}
}
i++;
}
if (calendar[5]) {
for (i = 0; i < calendar[5].length; i++) {
if (calendar[5][i] !== "") {
calendar[4][i] = "<span>" + calendar[4][i] + "</span><span>" + calendar[5][i] + "</span>";
}
}
calendar = calendar.slice(0, 5);
}
for (i = 0; i < calendar.length; i++) {
calendar[i] = "<tr><td>" + calendar[i].join("</td><td>") + "</td></tr>";
}
calendar = $("<table>" + calendar.join("") + "</table>").addClass("curr");
$("td:empty", calendar).addClass("nil");
if (month === new Date().getMonth()) {
$('td', calendar).filter(function() { return $(this).text() === new Date().getDate().toString(); }).addClass("today");
}
createCal.cache[year][week] = { calendar : function() { return calendar.clone() }, label : weeks[week] + " " + year };
return createCal.cache[year][week];
}
createCal.cache = {};
return {
init : init,
switchWeek : switchWeek,
createCal : createCal
};
};
var cal = CALENDAR();
cal.init();
});
我是相當新的JavaScript和算法發現這個getWeek功能,所以我有點失去了對如何解決這一問題。如果您有任何見解,我很樂意聽到它。