<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>寺院アプリ</title>
</head>
<body>
<h1>寺院アプリ</h1>
<h2>法要管理</h2>
<form id="ceremonyForm">
<label>法要種別：</label>
<select id="ceremonyType">
<option value="通夜">通夜</option>
<option value="葬儀">葬儀</option>
<option value="初七日">初七日</option>
<option value="四十九日">四十九日</option>
<option value="一周忌">一周忌</option>
<option value="三回忌">三回忌</option>
<option value="七回忌">七回忌</option>
<option value="十三回忌">十三回忌</option>
</select><br>
<label>故人名：</label>
<input type="text" id="deceasedName"><br>
<label>日付：</label>
<select id="year">
<option value="">--年--</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
<select id="month">
<option value="">--月--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="day">
<option value="">--日--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select><br>
<button type="button" onclick="addCeremony()">登録</button>
</form>
<h2>過去帳、現在帳管理</h2>
<form id="templeLedgerForm">
<label>選択：</label>
<select id="ledgerType">
<option value="過去帳">過去帳</option>
<option value="現在帳">現在帳</option>
</select><br>
<label>氏名：</label>
<input type="text" id="name"><br>
<label>住所：</label>
<input type="text" id="address"><br>
<label>日付：</label>
<select id="ledgerYear">
<option value="">--年--</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
<select id="ledgerMonth">
<option value="">--月--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="ledgerDay">
<option value="">--日--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select><br>
<button type="button" onclick="addLedger()">登録</button>
</form>
<h2>カレンダー</h2>
<div id="calendar"></div>
<script>
let ceremonies = [];
let ledger = [];
function addCeremony() {
const type = document.getElementById("ceremonyType").value;
const name = document.getElementById("deceasedName").value;
const year = document.getElementById("year").value;
const month = document.getElementById("month").value;
const day = document.getElementById("day").value;
if (type && name && year && month && day) {
const ceremony = {type: type, name: name, date: year + "-" + month + "-" + day};
ceremonies.push(ceremony);
updateCalendar();
}
}
function addLedger() {
const type = document.getElementById("ledgerType").value;
const name = document.getElementById("name").value;
const address = document.getElementById("address").value;
const year = document.getElementById("ledgerYear").value;
const month = document.getElementById("ledgerMonth").value;
const day = document.getElementById("ledgerDay").value;
if (type && name && address && year && month && day) {
const ledgerEntry = {type: type, name: name, address: address, date: year + "-" + month + "-" + day};
ledger.push(ledgerEntry);
}
}
function updateCalendar(){
const calendar = document.getElementById("calendar");
calendar.innerHTML = "";
let index = 1;
for(let i = 0; i < ceremonies.length; i++){
const { type, name, date } = ceremonies[i];
const [ year, month, day ] = date.split('-');
const dayOfWeek = new Date(`${year}/${month}/${day}`).getDay();
let dayOfWeekStr;
switch(dayOfWeek){
case 0:
dayOfWeekStr = "日";
break;
case 1:
dayOfWeekStr = "月";
break;
case 2:
dayOfWeekStr = "火";
break;
case 3:
dayOfWeekStr = "水";
break;
case 4:
dayOfWeekStr = "木";
break;
case 5:
dayOfWeekStr = "金";
break;
case 6:
dayOfWeekStr = "土";
break;
default:
dayOfWeekStr = "";
}
const node = document.createElement("div");
node.innerText = `${index++}: ${type}(${name}) - ${month}/${day}(${dayOfWeekStr})`;
calendar.appendChild(node);
}
}
</script>
</body>
</html>
