編程事件的第一步日曆，從哪裏開始？

Question

我在教自己一些核心的網絡技術，主要是javascript php和mysql。我想創建一個將這3個關聯起來的事件日曆。

我在想，我會在javascript中繪製日曆，然後使用php從mysql數據庫添加事件。現在我腦海中的第一步是創建一個繪製日曆的函數，然後我將用document.write調用它。這是最合乎邏輯的方法嗎？

Answer 1

日曆的計劃/寫入要求。它會做什麼等等

先從設計開始。僅僅使用HTML CSS JAVASCRIPT

然後計劃數據庫DB_SCHEMA作爲SteamFire說

的實現使用PHP

只是一個寬泛了看法

Answer 2

不，我建議你首先考慮數據庫。製作一個模式並創建數據庫。然後，考慮您將使用並實施它們的所有服務（顯示/添加/編輯/刪除事件/用戶...）。 測試你的服務，當你所有的服務都很好的實施。編寫您的網頁應用程序

1. 數據庫
2. 服務（PHP）
3. 的Web應用程序

這是我的意見，但我認爲這是一個很大的訂單。

Answer 3

下面是你一個開始：jsfiddle demo

按一下週圍在日期和你會看到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);