Q&A
やりたいこと
現在、ToDoリストを製作しており、その機能の中で登録したタスクがfullcalendarで作ったカレンダー上に表示されるようにしたいのですが、
うまくいきません。
理想としては、登録フォームでタスクの追加がされたときに、カレンダー上に表示されるようにしたいです。
イベントに追加したい内容としては、touroku.jsの、joint(タスク名)と、datepibker(タスクの期限)の2つを追加したいです。
現在使っているfullcalendarは5.3.0で、開発環境はVisual studio codeで行っております。
コード
calendar.js（fullcalendarのjsファイル）
1```javascript 2document.addEventListener('DOMContentLoaded', function() { 3 var calendarEl = document.getElementById('calendar'); 4 5 var calendar = new FullCalendar.Calendar(calendarEl, { 6 locale: 'ja', 7 dayCellContent: function(e) { 8 e.dayNumberText = e.dayNumberText.replace('日', ''); 9 }, 10 headerToolbar: { 11 left: 'prev,next today', 12 center: 'title', 13 right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' 14 }, 15 initialDate: new Date(), 16 navLinks: true, // can click day/week names to navigate views 17 businessHours: true, // display business hours 18 editable: true, 19 selectable: true, 20 events: [ 21 { 22 title: 'Business Lunch', 23 start: '2020-08-03T13:00:00', 24 constraint: 'businessHours' 25 }, 26 { 27 title: 'Meeting', 28 start: '2020-06-13T11:00:00', 29 constraint: 'availableForMeeting', // defined below 30 color: '#257e4a' 31 }, 32 { 33 title: 'Conference', 34 start: '2020-06-18', 35 end: '2020-06-20' 36 }, 37 { 38 title: 'Party', 39 start: '2020-06-29T20:00:00' 40 }, 41 ] 42 }); 43 44 calendar.render();```ここに言語を入力 45 }); 46 47
touroku.js(登録フォームのjs)
javascript
1function getData(){ 2 joint = $('#joint').val(); 3 datepicker = $('#datepicker').val(); 4 radio = $('input[name=q2]:checked').val() 5 joint2 = $('#joint2').val(); 6} 7$(function(){ 8 $('#jointtask').click(function(){ 9 getData(); 10 if(joint && datepicker && radio){ 11 var date = new Date(); 12 var time = String(date); 13 var data = '<tr><td><div class="slide">' + joint + '</div></td><td><div class="slide datepicker">' + datepicker + '</div></td><td><div class="slide radio">' + radio + '</div></td><td><div class="slide joint2">' + joint2 + '</div></td><td><div class="slide joint2">' + '<button id="delete" class="delete" value="全て削除">全て削除</button> ' + '</div></td></tr>'; 14 localStorage.setItem(time,data); 15 $('#tb').prepend(data); 16 } 17 jointData() 18 alert("登録しました。"); 19 }); 20}) 21 22$(window).on('load', function(){ 23 jointData(); 24 }); 25 26$("#btnDelete").on("click", function() { 27 localStorage.clear(); 28 });
touroku.html
(登録フォーム)
HTML
1<!DOCTYPE html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="css/style.css"> 6 <title>登録画面</title> 7 <h1 class="title">タスクの登録</h1> 8 <script src="js/jquery.min.js"></script> 9 <link rel="stylesheet" href="css/jquery-ui.min.css"> 10 <script src="js/jquery-ui.min.js"></script> 11 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script> 12</head> 13 <body> 14 <form> 15 <p> <span class="example1">タスク内容</span></p> 16 <h1><input type="text" class="ent1" id="joint"></h1> 17 18 <p> <span class="example1">期限</span></p> 19 <h1><input type="text" class="ent2" id="datepicker"></h1> 20 21 <p> <span class="example1">優先度</span></p> 22 <input type="radio" class="radio1" name="q2" value="高" checked = "checked"> <span class="example2">高</span> 23 <input type="radio" class="radio1" name="q2" value="中"> <span class="example2">中</span> 24 <input type="radio" class="radio1" name="q2" value="低"> <span class="example2">低</span> 25 26 <p> <span class="example1">備考</span></p> 27 <h1><input type="text" class="ent3" id="joint2"></h1> 28 <button id="jointtask" class="jointtask" value="追加">追加</button> 29 <h2>タスク一覧</h2> 30 <table class="tablesorter" id ="toptable" border=""> 31 <thead> 32 <tr> 33 <th>やるべきこと</th> 34 <th>期限</th> 35 <th>優先度</th> 36 <th>備考</th> 37 <th>-</th> 38 </tr> 39 </thead> 40 <tbody id="tb"> 41 </tbody> 42 </table> 43 44 <a href="./top.html"><button type="button">トップに戻る</button></a> 45 <button id="delete" class="delete" value="全て削除">全て削除</button> 46 </form> 47 <script src="./js/touroku.js"></script> 48 <script src="./js/top.js"></script> 49 <script src="./js/tablesorter.js"></script> 50 <script src="js/calendar.js"></script> 51 </body> 52</html>
top.html(トップ画面。この画面にカレンダーを表示)
HTML
1<!DOCTYPE html> 2<html lang="jp"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="css/style.css"> 6 <title>ToDoリスト</title> 7 <h1 class="title">トップ</h1> 8 9 <script src="js/jquery.min.js"></script> 10 <link rel="stylesheet" href="css/jquery-ui.min.css"> 11 <link rel="stylesheet" href="css/main.css"> 12 <script src="js/jquery-ui.min.js"></script> 13 <script src="js/underscore-min.js"></script> 14 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script> 15</head> 16 <body> 17 <form> 18 <h2>現在のTodoリスト</h2> 19 <table id ="toptable" class="tablesorter" border="0"> 20 <thead> 21 <tr> 22 <th>やるべきこと</th> 23 <th>期限</th> 24 <th>優先度</th> 25 <th>備考</th> 26 <th>-</th> 27 </tr> 28 </thead> 29 <tbody id="tb"> 30 </tbody> 31 </table> 32 33 34<a href="./touroku.html"><button type="button" id="enter">タスクを登録する</button></a> 35<a href="./kakunin.html"><button type="button" id ="look" >タスクの確認</button></a> 36 37 </form> 38 <div id="calendar"></div> 39 <script src="./js/top.js"></script> 40 <script src="./js/touroku.js"></script> 41 <script src="./js/tablesorter.js"></script> 42 <script src="js/main.js"></script> 43 <script src="js/calendar.js"></script> 44 </body> 45</html>
あなたの回答
tips
プレビュー
