JSFiddle - React, Tailwind, and code Playground

TEST

by RightHua

HTML

<h2 class="has-text-align-center">不易受孕期(安全期)/排卵期計算器(月曆)</h2>
<div class="container">
<p style="background-color:#c13816;color:#ffffff"/>


		<div class="row"　align="center">
		<form name="checkdate" method="post" onsubmit="javascript:showCalendar();" class="form-horizontal col-sm-12">
		  <div class="form-group form-group-lg">
			<label class="col-xs-6 col-sm-6 col-md-3 control-label" ><h4>平均月經間隔(天)</h4></label>
			<div class="col-xs-6 col-sm-3">
			  <select class="form-control" type="text" name="averagecyc" id="averagecyc" placeholder="(天)" pattern="\d*">
				<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>
				<option value="32">32</option>
				<option value="33">33</option>
				<option value="34">34</option>
				<option value="35">35</option>
			  </select>
			</div>
		  </div>
		  <div class="form-group form-group-lg">
			<label class="col-xs-6 col-sm-6 col-md-3 control-label"><h4>每次經期平均天數</h4></label>
			<div class="col-xs-6 col-sm-3">
			  <select class="form-control"  name="averagemenses" id="averagemenses" placeholder="(天)" pattern="\d*">
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5" selected>5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
			  </select>
			</div>
		  </div>
		  <div class="form-group form-group-lg">
			<label class="col-sm-6 col-md-3 control-label" ><h4>上次月經開始時間</h4></label>
			<div class="col-sm-6">
			  <input class="form-control" type="date" name="MCday" id="MCday" placeholder="" value="2021-2-30" onchange='javascript:showCalendar();return false;'>
			</div><br>
			<p align="center"><input type="button" class="button alert is-shade is-large" value="計算/重新計算" onclick="javascript:showCalendar(this.value);return false;"></p>
		<h4><font...

CSS

.box3{width:100%;}
.box3 a{text-decoration:none;color:#ffffff; text-align:center; display:block;padding:-10px;}
.box3 a.green{background:#D7FFEE;}.box3 a.green:hover{background:#50C878;}
.box3 a.purple{}.box3 a.purple:hover{background:#DAB1D5;}
.box3 a.red{background:#FFD2D2;}.box3 a.red:hover{background:#FF5151;}

JavaScript

$(document).ready(function (){
initCalendar();
});

var N=new Date();
Form=document.checkdate;

function initCalendar(){

  Form=document.checkdate;
  Form.averagecyc.value=28;
  Form.averagemenses.value=5;
  //Form.Year.value=N.getFullYear();
  //Form.Month.value=N.getMonth()+ 1;
  //Form.Day.value=N.getDate();
  getCalendar(1,1);
  document.all.Calendar1.outerHTML=calendarStr;
  getCalendar(2,1);
  document.all.Calendar2.outerHTML=calendarStr;
}
function resetInput(){Form.reset();}
function getMonthDate(year,month){
//alert(month);
  var monthDays=new Array(12);
  monthDays[0]=31;monthDays[1]=28;monthDays[2]=31;monthDays[3]=30;
  monthDays[4]=31;monthDays[5]=30;monthDays[6]=31;monthDays[7]=31;
  monthDays[8]=30;monthDays[9]=31;monthDays[10]=30;monthDays[11]=31;
  if(((year%4==0)&&(year%100!=0))||(year%400==0)){
    monthDays[1]=29;
  }
  return monthDays[month];
}
function showMsg(event,msg,id){
var box_name= "msgBox"+id;
//alert(box_name);
  if(document.getElementById(box_name)){
    msgBox=document.getElementById(box_name);
    msgBox.innerHTML=msg;
    msgBox.style.display="block";
    msgBox.style.left=event.clientX;
    msgBox.style.top=event.clientY+ 20;
  } else {
    var msgBox=document.createElement("div");
    msgBox.setAttribute("id",box_name);
    msgBox.style.display="block";
    msgBox.innerHTML=msg;document.body.appendChild(msgBox);
    msgBox.style.left=event.clientX+ document.body.scrollLeft- 20;
    msgBox.style.top=event.clientY+ document.body.scrollTop+ 20;
  }
  
  
}
function hideMsg(){
  document.getElementById("msgBox1").style.display="none";
  document.getElementById("msgBox2").style.display="none";
}
function getCalendar(calendarID,flag){
  calendarStr="";
  //var currYear=Form.Year.value;
  //var currMonth=parseInt(Form.Month.value)+ calendarID- 1;
  var d = new Date(Form.MCday.value);
  //var currYear=Form.Year.value;
  //var currMonth=parseInt(Form.Month.value)+ calendarID- 1;
  var currYear=d.getFullYear();
  var...