Question

所以，我正在做一个项目，其中包括一个日历。因此，我下载了模板并对其进行了自定义。问题是，日历仅实施了“ 2017”年。我的问题是，接下来的几年我可以自动生成吗？如果可以的话，怎么办？

在这里，我向您展示我的代码（html和Js）

index.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>

index.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;

Answer 1

如果您正在寻找不需要自己编写代码的快速解决方案，则可以使用https://fullcalendar.io/之类的东西。

Answer 2

您可以根据当前年份和模板中所需的年份手动创建年份数组。

以下代码应涵盖您所需的基础知识，并根据您的要求更改变量。

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 )

同样，您可以更新代码，以便涵盖所需的年份。

如何在日历中自动生成年份？

2 个答案: