[英]How can I auto-generate years in a calendar?
所以,我正在做一個項目,其中包括一個日歷。 所以我下載了一個模板並定制了它。 問題是,日歷只實現了“2017”年。 我的問題是,我可以自動生成接下來的幾年嗎? 如果我可以,怎么做?
在這里,我向您展示我的代碼(html 和 Js)
索引.html:
<script>
// fill the month table with column headings
function day_title(day_name) {
document.write("<div class='c-cal__col'>" + day_name + "</div>");
}
// fills the month table with numbers
function fill_table(month, month_length, indexMonth) {
day = 1;
// begin the new month table
document.write("<div class='c-main c-main-" + indexMonth + "'>");
//document.write("<b>"+month+" "+year+"</b>")
// column headings
document.write("<div class='c-cal__row'>");
day_title("Dom");
day_title("Seg");
day_title("Ter");
day_title("Qua");
day_title("Qui");
day_title("Sex");
day_title("Sab");
document.write("</div>");
// pad cells before first day of month
document.write("<div class='c-cal__row'>");
for (var i = 1; i < start_day; i++) {
if (start_day > 7) {
} else {
document.write("<div class='c-cal__cel'></div>");
}
}
// fill the first week of days
for (var i = start_day; i < 8; i++) {
document.write(
"<div data-day='2019-" +
indexMonth +
"-0" +
day +
"'class='c-cal__cel'><p>" +
day +
"</p></div>"
);
day++;
}
document.write("</div>");
// fill the remaining weeks
while (day <= month_length) {
document.write("<div class='c-cal__row'>");
for (var i = 1; i <= 7 && day <= month_length; i++) {
if (day >= 1 && day <= 9) {
document.write(
"<div data-day='2019-" +
indexMonth +
"-0" +
day +
"'class='c-cal__cel'><p>" +
day +
"</p></div>"
);
day++;
} else {
document.write(
"<div data-day='2017-" +
indexMonth +
"-" +
day +
"' class='c-cal__cel'><p>" +
day +
"</p></div>"
);
day++;
}
}
document.write("</div>");
// the first day of the next month
start_day = i;
}
document.write("</div>");
}
</script>
<br>
<header>
<div class="wrapper">
<div class="c-monthyear">
<div class="c-month">
<span id="prev" class="prev fa fa-angle-left" aria-hidden="true"></span>
<div id="c-paginator">
<span class="c-paginator__month">JANEIRO</span>
<span class="c-paginator__month">FEVEREIRO</span>
<span class="c-paginator__month">MARÇO</span>
<span class="c-paginator__month">ABRIL</span>
<span class="c-paginator__month">MAIO</span>
<span class="c-paginator__month">JUNHO</span>
<span class="c-paginator__month">JULHO</span>
<span class="c-paginator__month">AGOSTO</span>
<span class="c-paginator__month">SETEMBRO</span>
<span class="c-paginator__month">OUTUBRO</span>
<span class="c-paginator__month">NOVEMBRO</span>
<span class="c-paginator__month">DEZEMBRO</span>
</div>
<span id="next" class="next fa fa-angle-right" aria-hidden="true"></span>
</div>
<span class="c-paginator__year">2019</span>
</div>
</div>
</header>
<div class="c-calendar">
<div class="c-calendar__style c-aside">
<a class=" o-btn " >Anular Senha </a>
<div class="c-aside__day">
<span class="c-aside__num"></span> <span class="c-aside__month"></span>
</div>
</div>
<div class="c-cal__container c-calendar__style">
<script>
// CAHNGE the below variable to the CURRENT YEAR
year = 2017;
// first day of the week of the new year
today = new Date("Janeiro 1, " + year);
start_day = today.getDay() + 1;
fill_table("Janeiro", 31, "01");
fill_table("Fevereiro", 28, "02");
fill_table("Março", 31, "03");
fill_table("Abril", 30, "04");
fill_table("Maio", 31, "05");
fill_table("Junho", 30, "06");
fill_table("Julho", 31, "07");
fill_table("Agosto", 31, "08");
fill_table("Setembro", 30, "09");
fill_table("Outubro", 31, "10");
fill_table("Novembro", 30, "11");
fill_table("Dezembro", 31, "12");
</script>
索引.js:
//global variables
var monthEl = $(".c-main");
var dataCel = $(".c-cal__cel");
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1;
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var monthText = [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
];
var indexMonth = month;
var todayBtn = $(".c-today__btn");
var addBtn = $(".js-event__add");
var saveBtn = $(".js-event__save");
var closeBtn = $(".js-event__close");
var winCreator = $(".js-event__creator");
var inputDate = $(this).data();
today = year + "-" + month + "-" + day;
如果您正在尋找不需要自己編寫代碼的快速解決方案,則可以使用類似https://fullcalendar.io/ 的內容。
您可以根據當前年份和模板中所需的年數手動創建年份數組。
以下代碼應涵蓋您需要的基礎知識,根據您的要求更改變量。
let currentYear = new Date().getUTCFullYear();
let startYear = 2016;
let endYearIncrement = 3;
let years = [];
for (let i = 0; i <= currentYear - startYear + endYearIncrement; i++) years.push(startYear + i);
該示例應生成一個具有以下值的數組。
[2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023]
您還可以使用 Javascript 的 Array 內置函數 Array.from() 生成相同的數組。
let years = Array.from( {length: currentYear - startYear + endYearIncrement + 1}, (v, i) => i + startYear )
同樣,您可以更新代碼,以便涵蓋您需要的年份。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.