编程事件日历的第一步,从哪里开始？

Question

我正在教自己一些核心网络技术,主要是javascript php和mysql.我想创建一个将这3个连接在一起的事件日历.

我想我会用javascript绘制日历,然后使用php从mysql数据库中添加事件.现在我脑海中的第一步是创建一个绘制日历的函数,然后我将用document.write调用它.这是最合乎逻辑的方法吗？

Answer 1

这是一个开始:jsfiddle演示

点击日期,你会看到selected风格的变化.

请注意,这取决于moment.js - 在JavaScript中使用日期/时间的基本库

Boilerplate 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);