Javascript (カレンダー006_機能検討jQuery入力)
■jQueryを使ってデータを入力する方法を考える。
前回、データをポップアップで表示することができたので、今回は、データを入力する方法を考えてみる。表示と同じようにshow, hideを使って入力画面の表示、非表示を切り替えるようにしてみた。
入力内容はもともとの項目と同じように、タイトル用のテキスト部分と内容用のテキスト部分、登録するボタンを用意した。カレンダー上の日付をクリックすると登録画面が表示される（下の図）。
$("body").append("<div id='inputLayer'>")$("body").append("<input type='text' id='inputtext'>")$("body").append("<textarea name='comments' id='inputtextarea' rows='8' cols='40'></textarea>")$("body").append("<input type='button' id='inputbutton' onclick='input(this)' value='save'>")$("body").append("</div>")
saveボタンを押して登録した後、カレンダー上から登録が完了している日付（緑色の日付）をクリックすると、タイトルと内容がポップアップして表示される。
データ入力をポップアップする画面に切り替えたので、画面上はカレンダーしか表示されていない状態となっている。実際は見えないだけでソースには、表示用、入力用のコードが隠れているけど。
ひとまず形にはなったので、htmlとcssのコードを記載しておく。jQueryはhtml、cssのファイルと同じフォルダに入れる想定。
<html>
<head>
<meta charset="utf-8">
<title>Calendar</title>
<link href="calender006.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<script>
//===============================================
//Input memo into localStorage with date index ("2020.7.3").
//===============================================
function presetDiary(dateStr){
var diary_date=document.getElementById("diary_date");
diary_date.innerHTML=dateStr;
var title=localStorage[dateStr+"_title"];
var body=localStorage[dateStr+"_body"];
}
//===============================================
//Input data when button is clicked.
//===============================================
function input(obj){
var dateStr=obj.getAttribute("data-date");
var diary_title=document.getElementById("inputtext").value
var diary_body=document.getElementById("inputtextarea").value
localStorage[dateStr+"_title"]=diary_title;
localStorage[dateStr+"_body"]=diary_body;
location.reload();
}
//===============================================
//Display when browser is loaded.
//===============================================
window.onload=function(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var today=date.getDate();
var firstDate=new Date(year, month-1,1);
var lastDate=new Date(year, month, 0);
var todayStr = year + "." + month +"."+today;
//settign data
presetDiary(todayStr);
var table_title = year +"-"+month;
var captionHtml = "<caption>"+table_title+"</caption>";
var weekdays = new Array("Sun","Mon","Tue","Wed","Thr","Fri","Sat");
var weekdaysStr="<tr>";
for (var i=0; i <7; i++){
if (i==0){
weekdaysStr += "<td class='sun' align=\"center\"><font color=\"#FF0000\">"+weekdays[i] + "</td>";
} else if(i==6){
weekdaysStr += "<td class='sat' align=\"center\"><font color=\"#0000FF\">"+weekdays[i] + "</td>";
} else{
weekdaysStr += "<td align=\"center\">"+weekdays[i] + "</td>";
}
}
weekdaysStr += "</tr>";
var htmlStr="<tr>";
var startWeekDay = firstDate.getDay();
for (var i=0; i<startWeekDay; i++){
htmlStr += "<td> </td>";
}
//===============================================
//Put cells
for (var i=1; i<=lastDate.getDate(); i++){
var date=new Date(year, month-1,i);
var weekDay = date.getDay();
var dateStr=year+"."+month+"."+i;
var cellStr=date.getDate();
if(localStorage[dateStr+"_title"]) cellStr ="<u>"+cellStr+"</u>";
if(weekDay==0) htmlStr+="<tr>";
if(localStorage[dateStr+"_title"]){
if(weekDay==0){
htmlStr+="<td align=\"center\" bgcolor=\"#00FF00\" class='sun'><font color=\"#FF0000\">";
}else if(weekDay==6){
htmlStr+="<td align=\"center\" bgcolor=\"#00FF00\" class='sat'><font color=\"#0000FF\">";
}else {
htmlStr+="<td align=\"center\" bgcolor=\"#00FF00\">";
}
}else{
if(weekDay==0){
htmlStr+="<td align=\"center\" class='sun'><font color=\"#FF0000\">";
}else if(weekDay==6){
htmlStr+="<td align=\"center\" class='sat'><font color=\"#0000FF\">";
}else {
htmlStr+="<td align=\"center\">";
}
}
htmlStr += "<a onclick='presetDiary(\""+dateStr+"\");'>" + cellStr+"</a></td>";
if(weekDay==6) htmlStr += "</tr>\n";
}
//If calendar last day is not end of month, put blank cells.
var lastDayWeek = lastDate.getDay();
if (lastDayWeek !=6){
for (var i = lastDayWeek+1; i<=6; i++){
htmlStr += "<td align=\"right\"> </td>";
}
htmlStr +="</tr>";
}
document.getElementById("calendar").innerHTML = "<table width=\"300pt\" style=\"table-layout: fixed;\" border=\"3\" cellspacing=\"0\" cellpadding=\"5\" bordercolor=\"#ffcc66\">"+captionHtml + weekdaysStr+ htmlStr + "</table>";
}
//===============================================
//additional windows for input and show data
//===============================================
$(function(){
$("body").append("<div id='glayLayer'></div><div id='overLayer'></div>")
$("body").append("<div id='inputLayer'>")
$("body").append("<input type='text' id='inputtext'>")
$("body").append("<textarea name='comments' id='inputtextarea' rows='8' cols='40'></textarea>")
$("body").append("<input type='button' id='inputbutton' onclick='input(this)' value='save'>")
$("body").append("</div>")
$("#glayLayer").click(function(){
$(this).hide()
$("#overLayer").hide()
})
$("#inputLayer").click(function(){
$(this).hide()
$("#inputtext").hide()
$("#inputtextarea").hide()
$("#inputbutton").hide()
})
$("td").click(function(){
var diary_date=document.getElementById("diary_date");
var diary_num = parseFloat(diary_date);
console.log(diary_date.innerHTML+"_title" + typeof(diary_date) + typeof(diary_num));
var title=localStorage[diary_date.innerHTML+"_title"];
var body=localStorage[diary_date.innerHTML+"_body"];
if(title){
$("#glayLayer").show()
$("#overLayer").show().html(title+"\n"+body).css({
marginTop:"-"+$("#overLayer").height()/2+"px" ,
marginLeft:"-"+$("#overLayer").width()/2+"px" ,
position:absolute
})
return false;
}
else {
$("#inputLayer").show()
$("#inputtext").show()
$("#inputtextarea").show()
$("#inputbutton").show()
inputbutton.setAttribute("data-date", diary_date.innerHTML)
}
var diary_date="";
})
});
</script>
</head>
<!--//===============================================
//body part
//===============================================-->
<body>
<div class="frame-box">
<div class="calendar-box">
<div id="calendar" class="calendar"</div>
</div>
<div class="diary_box">
<div hidden id="diary_date" class="diary_date" ></div>
</div>
</body>
</html>次にcalender006.css
html,body{
margin:0;
padding:0;
height:100%;
}
dl dt td{
margin:20px 50px;
font-size:small;
border:1px solid #7BAEB5;
border-left:1em solid #7BAEB5;
padding-left:10px;
width:600px;
cursor:pointer;
}
#glayLayer{
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:#7BAEB5;
filter:alpha(opacity=75);
opacity: 0.75;
}
* html #glayLayer{
position:absolute;
}
#overLayer{
display:none;
width:400px;
background:white;
padding:10px;
position: fixed;
top:10%;
left:5%;
}
* html #overLayer{
position: absolute;
}
#inputLayer {
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:#7BAEB5;
filter:alpha(opacity=75);
opacity: 0.75;
}
* html #inputLayer{
position: absolute;
}
#inputtext {
display:none;
background:white;
padding:10px;
position: fixed;
top:10%;
left:5%;
}
#inputtextarea {
display:none;
background:white;
position: fixed;
top:20%;
left:5%;
}
#inputbutton {
display:none;
background:white;
position: fixed;
top:40%;
left:5%;
}
