时间戳

首页 > 解决方案 > 在日历中画一条线

javascript - 在日历中画一条线

问题描述

在日历javascript中来自数据库的两个日期之间绘制一条动态线

此代码正在生成日历

{
  var noDays = new Date(2019, 8, 0).getDate(); //new Date(year, month, 0).getDate();
  var days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
    months = [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ],
    counter = 0,
    liCon = "",
    date = new Date();
  document.getElementById("monthName").innerText = months[date.getMonth()];
  var t = document.createElement("ul");
  t.classList.add("days-wrapper");

  for (var i = 1; i <= noDays; i++) {
    console.log(i, days[counter], counter);

    var liString = `<li class="days ${
          days[counter] == "Su" ? "text-red" : "text-black"
        }">
          <div class='day-name'>${days[counter]}</div>
          <div class='day-number'>${i}</div>
        </li>`;
    liCon = liCon + liString;
    counter++;
    if (i % 7 === 0) {
      //get the day name printed
      counter = 0;
      console.log(t, liCon);
    }
    t.innerHTML = liCon;
    console.log(t);
    document.getElementById("main").appendChild(t);
  }
}

标签： javascript

解决方案

我不得不猜测日历 HTML 和 CSS，但这里有一些东西供您尝试

var noDays = new Date(2019, 8, 0).getDate(); //new Date(year, month, 0).getDate();
var days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
  months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  counter = 0,
  liCon = "",
  date = new Date();

document.getElementById("monthName").innerText = months[date.getMonth()];
var t = document.createElement("ul");
t.classList.add("days-wrapper");
var pDays = true
for (var i = 1; i <= noDays; i++) {
  var liString = `<li class="days ${days[counter] == "Su" ? "text-red" : "text-black"}">` +
    `<div class='day-name'>` + (pDays ? `${days[counter]}` : "") + `</div>` +
    //          `<div class='day-name'>${days[counter]}</div>`+
    `<div class='day-number'>${i}</div>
        </li>`;
  liCon = liCon + liString;
  counter++;
  if (i % 7 === 0) {
    //get the day name printed
    pDays = false;
    counter = 0;
    liCon += "<br/>"
  }
  t.innerHTML = liCon;
  document.getElementById("main").appendChild(t);
}
var line = document.getElementById("line");
var lc = document.getElementById("lineContainer");
line.width="120px"; // calculate from offsetLeft or right of the to-date LI
var leftDay = document.querySelector(".days .day-number")
line.style.left=(leftDay.style.left+leftDay.offsetWidth)+"px"
line.style.top="100px"; // calculate that from the row times rowHeight
.text-red {
  color: red
}

.text-black {
  color: black
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul li {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
  display: inline-block;
}

.day-name {
  width: 2em;
  text-align: right;
}

.day-number {
  text-align: right;
}

#line { position:absolute; display: inline-block; }
<div id="main">
  <div id="monthName"></div>
</div>
<div>
<div id="lineContainer"><hr id="line"/></div>

推荐阅读