javascript - 编写事件日历的第一步，从哪里开始？

Question

<分区>

Answer 1

这是您的开始:jsfiddle demo

在日期周围单击，您将看到选定 样式更改。

注意这取决于moment.js - 在 JavaScript 中处理日期/时间的基本库

样板 HTML

<ul id="calendar">
    <li><span>Sun</span></li>
    <li><span>Mon</span></li>
    <li><span>Tue</span></li>
    <li><span>Wed</span></li>
    <li><span>Thu</span></li>
    <li><span>Fri</span></li>
    <li><span>Sat</span></li>
</ul>

一些 CSS

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

#calendar li {
    float: left;
    width: 13%;
    margin: 0 1% 1% 0;
}

#calendar li span {
    display: block;
    padding: 5px;
    background-color: #eee;
}

#calendar li.selected span {
    font-weight: bold;
    text-decoration: underline;
}

#calendar li.today span {
    background-color: #33f;
    color: white;
}

#calendar li.offset-0 { margin-left: 0%; }
#calendar li.offset-1 { margin-left: 14%; }
#calendar li.offset-2 { margin-left: 28%; }
#calendar li.offset-3 { margin-left: 42%; }
#calendar li.offset-4 { margin-left: 56%; }
#calendar li.offset-5 { margin-left: 70%; }
#calendar li.offset-6 { margin-left: 84%; }

一点点 JavaScript

function Calendar(elem, date) {

    // private data variables
    var today = moment(date),
        first = moment(today).date(1);

    // private api
    function createDay(n) {
        var li = document.createElement("li"),
            span = document.createElement("span");

        span.innerHTML = n;
        li.appendChild(span);

        return li;
    }

    function addDay(n) {
        var li = createDay(n);
        if (n === 1) {
            li.classList.add("offset-" + first.day());
        }
        if (n === today.date()) {
            li.classList.add("today");
        }
        elem.appendChild(li);
    }

    function deselect(li) {
        if (!li) return;
        li.classList.remove("selected");
    }

    function select(li) {
        deselect(elem.querySelector(".selected"));
        li.classList.add("selected");
    }

    function onClick(event) {
        select(event.srcElement.parentNode);
        event.preventDefault();
    }

    // init
    for (var i=1, days = today.daysInMonth(); i<=days; i++) {
        addDay(i);
    }

    // event listeners
    elem.addEventListener("click", onClick);

}

你可以像这样使用Calendar

function init() {
  var cal = document.getElementById("calendar"),
      today = new Date;

  new Calendar(cal, today);
}

document.addEventListener("DOMContentLoaded", init);