-
jQuery을 활용한 달력에서 선택한 날짜에 일정 추가하기[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 7. 14. 20:29728x90
jQuery을 활용한 달력에서 선택한 날짜에 일정 추가하기
결과
선택한 날짜를 입력 받아서 내용을 추가하게 만들었습니다.
코드
jquery를 사용할 예정이니 CDN을 연결해준다.
1. 달력 만들기
<style> .sun { color: red; } .sat { color: blue; } </style> <body> <div style="margin-left: 300px"> <h4 style="margin-left: 50px">2023년 7월</h4> <table cellspacing="0" cellpadding="10" width="300" height="50"> <tr> <th class="sun">日</th> <th class="mon">月</th> <th class="thu">火</th> <th class="wed">水</th> <th class="thr">木</th> <th class="fri">金</th> <th class="sat">土</th> </tr> <tr> <th class="sun"></th> <th class="mon"></th> <th class="thu"></th> <th class="wed"></th> <th class="thr"></th> <th class="fri"></th> <th class="sat" onclick="clickNumber()" id="1">1</th> </tr> <tr> <th class="sun" onclick="clickNumber()" id="2">2</th> <th class="mon" onclick="clickNumber()" id="3">3</th> <th class="thu" onclick="clickNumber()" id="4">4</th> <th class="wed" onclick="clickNumber()" id="5">5</th> <th class="thr" onclick="clickNumber()" id="6">6</th> <th class="fri" onclick="clickNumber()" id="7">7</th> <th class="sat" onclick="clickNumber()" id="8">8</th> </tr> <tr> <th class="sun" onclick="clickNumber()" id="9">9</th> <th class="mon" onclick="clickNumber()" id="10">10</th> <th class="thu" onclick="clickNumber()" id="11">11</th> <th class="wed" onclick="clickNumber()" id="12">12</th> <th class="thr" onclick="clickNumber()" id="13">13</th> <th class="fri" onclick="clickNumber()" id="14">14</th> <th class="sat" onclick="clickNumber()" id="15">15</th> </tr> <tr> <th class="sun" onclick="clickNumber()" id="16">16</th> <th class="mon" onclick="clickNumber()" id="17">17</th> <th class="thu" onclick="clickNumber()" id="18">18</th> <th class="wed" onclick="clickNumber()" id="19">19</th> <th class="thr" onclick="clickNumber()" id="20">20</th> <th class="fri" onclick="clickNumber()" id="21">21</th> <th class="sat" onclick="clickNumber()" id="22">22</th> </tr> <tr> <th class="sun" onclick="clickNumber()" id="23">23</th> <th class="mon" onclick="clickNumber()" id="24">24</th> <th class="thu" onclick="clickNumber()" id="25">25</th> <th class="wed" onclick="clickNumber()" id="26">26</th> <th class="thr" onclick="clickNumber()" id="27">27</th> <th class="fri" onclick="clickNumber()" id="28">28</th> <th class="sat" onclick="clickNumber()" id="29">29</th> </tr> <tr> <th class="sun" onclick="clickNumber()" id="30">30</th> <th class="mon" onclick="clickNumber()" id="31">31</th> <th class="thu"></th> <th class="wed"></th> <th class="thr"></th> <th class="fri"></th> <th class="sat"></th> </tr> </table> </div> </body>2. 날짜를 클릭하였을 때 클릭된 날짜를 받아서 표시하는 코드
function clickNumber() { $("th").on("click", function () { console.log(this); console.log($(this).text()); $("#date").val($(this).text()); }); }코드에서 $("th").on("click", function() {})은 th태그가 클릭되는 이벤트인 경우를 말한다. 또한, $("#date").val($(this).text))은 class가 date인 곳에 $(this).text 값을 넣는 것은 말하며 $(this).text은 클릭된 곳의 값을 텍스트로 나타낸다는 말이다.
3. 내용에 적힌 값을 받아서 달력에 해당 날짜에 추가하는 코드
function submit() { let date = $("#date").val(); console.log(date); let content = $("#content").val(); console.log(content); $("#" + date).append("<div>" + content + "<div>"); }$(선택자).val()을 통해 적힌 값을 받아온다. 그 후 받아온 값을 append()을 통해 추가한다.
728x90'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글
[포스코x코딩온] 반응형 웹(Responsive Web) (0) 2023.07.16 [포스코x코딩온] Bootstrap (0) 2023.07.15 JQuery를 활용한 색깔 변화 (0) 2023.07.14 jquery를 활용한 버튼 클릭 시 이미지 전환 (0) 2023.07.14 [포스코x코딩온] JQuery의 기초 (0) 2023.07.14