第一步，以编程的事件日历，从哪里开始？ [关闭](First steps to programm

我教自己的一些核心网络技术，主要是JavaScript的PHP和MySQL。我想创建一个事件日历，捆绑在一起，这些3。

我想，我会画日历在JavaScript中，然后使用PHP从MySQL数据库中添加事件。现在在我心中的第一步是创建一个将以此为日历的功能，然后我将与文件撰写调用它。这是去这是最合理的方法是什么？

Answer 1:

日历计划/写要求。它的作用等等

与设计开始第一。仅仅使用HTML CSS JAVASCRIPT

然后计划数据库DB_SCHEMA为SteamFire说

机具使用PHP

只是在广视

Answer 2:

下面是你一个开始：的jsfiddle演示

点击周围的日期，你会看到selected风格变化。

请注意，这取决于moment.js - 基本 lib中使用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);

Answer 3:

不，我劝你开始思考数据库。做一个模式和创建数据库。然后，想想都觉得你会使用和实现它们（查看/添加/编辑/删除事件/用户...）的服务。测试你的服务，当你所有的服务都是伟大的实施。代码的Web应用程序。