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; 
    }

작은 자바 스크립트 (I이 뭔가 내가 온라인을 발견했습니다이었다, 그러나 자바를 배운하지 않은 경우) :

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

지금까지 수동으로 작업 했으므로 이번 달의 캘린더와 다음 2 개만 만들었습니다 (이 과정을 자동화하는 방법을 알고 있다면 잘 알고 싶지만 가장 중요한 것은 아닙니다). 내가 원하는 것은, <td> 중 하나를 클릭하면, 내가 원하는 약속의 세부 사항을 입력 할 수있는 요일, 팝업 창 또는 그와 비슷한 것을 나타냅니다. 추가 할.

어떻게 할 수 있습니까? 내 이해에서, HTML에서 순전히하는 것은 어렵거나 불가능할 것입니다. 이것은 내 문제가있는 곳입니다. 기본 HTML 및 PHP 이외의 것을 전혀 모르고 자바 스크립트로 작업 한 적도 없으므로 조금 힘듭니다.

추가 정보가 필요하면 알려주세요. 가능한 한 당신에게 기꺼이 알려 드리겠습니다.

감사합니다 :-)

출처

2016-11-08 Nico

자바 스크립트와 자바는 다른 언어입니다. 그냥 말해. – abhishekkannojia

@abhishekkannojia 나는 그것을 알지 못했다. 나는 내 자리를 바로 잡을 것이다. 감사합니다 :-) – Nico

이것은 하드 하나가 probarily 일부 자바 스크립트/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로 캘린더 만들기

답변

관련 문제