在 HTML 中創建日歷

Question

我目前正在 HTML 中創建一個日歷作為學校項目的一部分。

到目前為止，我已經創建了頁面的基礎知識。 我想要的是一個日歷，你可以在其中創建約會，然后會顯示出來（就像一個基本的日歷）。

這是我到目前為止所做的（它是丹麥語，但我認為這應該不是問題。如果你想翻譯它，請告訴我）：

HTML：

<html>
<head>
    <title>December</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script src="javascript.js"></script>
</head>
<body>

    <div class="navigation">
                <div id="forrige">
                    <a href="november.html">Forrige måned</a> 
                </div>

                <div id="naeste">
                    <a href="januar.html">Næste måned</a>
                </div>
            </div>

    <br><br>

    <table class="ugedage">
                <tr>
                    <th>Mandag</th>
                    <th>Tirsdag</th>
                    <th>Onsdag</th>
                    <th>Torsdag</th>
                    <th>Fredag</th>
                    <th>Lørdag</th>
                    <th>Søndag</th>
                </tr>
                    <tr>
                        <td class="grayedout" data-href="#"><p>28</p></td>
                        <td class="grayedout" data-href="#"><p>29</p></td>
                        <td class="grayedout" data-href="#"><p>30</p></td>
                        <td class="dato" data-href="#">1</td>
                        <td class="dato" data-href="#">2</td>
                        <td class="dato" data-href="#">3</td>
                        <td class="dato" data-href="#">4</td>   
                    </tr>
                    <tr>
                        <td class="dato" data-href="#">5</td>
                        <td class="dato" data-href="#">6</td>
                        <td class="dato" data-href="#">7</td>
                        <td class="dato" data-href="#">8</td>
                        <td class="dato" data-href="#">9</td>
                        <td class="dato" data-href="#">10</td>
                        <td class="dato" data-href="#">11</td>
                    </tr>
                    <tr>
                        <td class="dato" data-href="#">12</td>
                        <td class="dato" data-href="#">13</td>
                        <td class="dato" data-href="#">14</td>
                        <td class="dato" data-href="#">15</td>
                        <td class="dato" data-href="#">16</td>
                        <td class="dato" data-href="#">17</td>
                        <td class="dato" data-href="#">18</td>
                    </tr>
                    <tr>
                        <td class="dato" data-href="#">19</td>
                        <td class="dato" data-href="#">20</td>
                        <td class="dato" data-href="#">21</td>
                        <td class="dato" data-href="#">22</td>
                        <td class="dato" data-href="#">23</td>
                        <td class="dato" data-href="#">24</td>
                        <td class="dato" data-href="#">25</td>
                    </tr>
                    <tr>
                        <td class="dato" data-href="#">26</td>
                        <td class="dato" data-href="#">27</td>
                        <td class="dato" data-href="#">28</td>
                        <td class="dato" data-href="#">29</td>
                        <td class="dato" data-href="#">30</td>
                        <td class="dato" data-href="#">31</td>
                        <td class="grayedout" data-href="#"><p>1</p></td>
                    </tr>
                    <tr>
                        <td class="grayedout" data-href="#"><p>2</p></td>
                        <td class="grayedout" data-href="#"><p>3</p></td>
                        <td class="grayedout" data-href="#"><p>4</p></td>
                        <td class="grayedout" data-href="#"><p>5</p></td>
                        <td class="grayedout" data-href="#"><p>6</p></td>
                        <td class="grayedout" data-href="#"><p>7</p></td>
                        <td class="grayedout" data-href="#"><p>8</p></td>
                    </tr>

            </table>

</body>
</html>

CSS：

.ugedage {
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

.ugedage th {
    border: 1px solid;
    padding: 20px;
    border-radius: 4px;
}

.ugedage td {
    border: 1px solid;
    border-radius: 4px;
    padding: 20px;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 10px;
    text-align: right;
}

.grayedout {
    background-color: #d3d3d3;
    font-size: 12;
}

.dato {
    color: black;
    font-size: 12;
    text-decoration: none;
}

td a {
    display:block;
    width:100%;
    height: 100%;
}

.grayedout p {
    color: gray;
    font-size: 12;
    text-decoration: none;
}

#forrige {
    float: left;
    margin-left: 1%;
}

#naeste {
    float: right;
    margin-right: 1%;
}

table td[data-href] {
        cursor: pointer;
    }

小的 Javascript（我還沒有學過 Java，這是我在網上找到的）：

$(document).ready(function(){
        $('table td').click(function(){
            window.location = $(this).data('href');
            return false;
        });
    });

到目前為止，我只為當月和下個月創建了一個日歷，因為我是手動完成的（如果你知道如何自動化這個過程，我也想知道，但這不是最重要的事情）。 我想要的是，當我單擊代表日期的<td>之一時，會出現一個彈出窗口或類似的東西，我可以在其中輸入約會的詳細信息想補充。

我怎么能/應該這樣做？ 根據我的理解，純 HTML 很難/不可能，這就是我的問題所在； 除了基本的 HTML 和 PHP 之外，我一無所知，並且從未使用過 Javascript，所以我的處境有些困難。

如果您需要任何其他信息，請告訴我，我很樂意為您提供任何可以提供的信息。

謝謝：-）

Answer 1

我已經在 jQuery 中編寫了您需要的代碼。

let row = $('tr');
row.each((index,row) =>{ // For each row

    if(index !== 0) return; // We only want 1 entry of!

    $('td').each((index,day) => { // For each day
        if($(day).hasClass('grayedout')) return; // Skip grayed out days

        $(day).on('click',addApointment); // The part we care about
    });
})

function addApointment() {
    let dayNum = $(this).text();
    let appointment =
    prompt(`What would you like to add for an appointment for the ${dayNum}th?`);
}

JSFindle

dayNum 返回被點擊的天數，而約會則返回用戶希望為他的約會添加的內容。 你可以在你的 PHP 中使用它，祝你好運。

在 HTML 中創建日歷

問題描述

1 個解決方案

解決方案1
0 2017-02-27 19:19:24

在 HTML 中創建日歷

問題描述

1 個解決方案

解決方案1 0 2017-02-27 19:19:24

解決方案1
0 2017-02-27 19:19:24