HTMLでカレンダーを作成する

私は現在、学校プロジェクトの一環としてHTMLでカレンダーを作成しています。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; 
     }); 
    });

これまでのところ、手動でやっているので、今月のカレンダーと次の2つしか作成していません（このプロセスを自動化する方法を知っていれば分かりますが、最も重要なことではありません）。私がしたいことは、<td>のうちの1つをクリックすると、その日を表すポップアップウィンドウ、またはそのようなものが表示されます。ここで、私が望む予定の詳細を入力できますたす。

どうすればいいですか？私の理解から、HTMLで純粋に行うのは難しい/不可能なことです。これは私の問題がどこにあるのかです。私は基本的なHTMLやPHP以外のことは何も知らず、Javascriptで作業したこともないので、少し難しいです。

追加情報が必要な場合はお知らせください。可能な限り、私はあなたに教えてくれることを嬉しく思います。

ありがとう:-)

出典

2016-11-08 Nico

JavascriptとJavaは異なる言語です。ただ言って。 – abhishekkannojia

@abhishekkannojia私はそれを知らなかった、私は私のポストを修正しようとします。ありがとう:-) – Nico

これはあなたがproballyいくつかのjavascript/jqueryを必要とする必要がありますハードになるだろう –

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でそれを使用することができます、幸運。

出典

2017-02-27 19:19:24 FrenchMajesty

HTMLでカレンダーを作成する

答えて

関連する問題