CarsonSlovoka/calendar.html

## calendar.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vote</title>
  <style>
    #calendar {
      display: none;
      position: absolute;
      background-color: white;
      border: 1px solid #ddd;
    }
    #calendar th, #calendar td {
      width: 40px;
      height: 40px;
      text-align: center;
      vertical-align: middle;
      border: 1px solid #ddd;
    }
    .selected {
      background-color: #00f;
      color: #fff;
    }
  </style>
</head>
<body>

<form action="/vote/" method="post">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" required><br><br>

  <label for="dates">Unavailable Dates:</label><br>
  <textarea rows="3" cols="100" id="dates" name="dates" readonly></textarea><br>
  <button type="button" onclick="toggleCalendar()">Select Unavailable Dates</button><br><br>

  <input type="submit" value="Submit">
</form>

<table id="calendar">
  <thead>
  <tr>
    <th colspan="1"><button onclick="previousMonth()">&#9664;</button></th>
    <th colspan="5" id="monthLabel"></th>
    <th colspan="1"><button onclick="nextMonth()">&#9654;</button></th>
  </tr>
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<script>
  var selectedDates = [];
  var currentDate = new Date();

  function toggleCalendar() {
    var calendar = document.getElementById('calendar');
    if (calendar.style.display === 'none' || calendar.style.display === '') {
      calendar.style.display = 'block';
      renderCalendar();
    } else {
      calendar.style.display = 'none';
    }
  }

  function previousMonth() {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar();
  }

  function nextMonth() {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar();
  }

  function renderCalendar() {
    var tbody = document.getElementById('calendar').tBodies[0];
    tbody.innerHTML = '';
    var startDate = new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), 1));
    var endDate = new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth() + 1, 0));
    var row = tbody.insertRow();
    for (var i = 0; i < startDate.getDay(); i++) {
      row.insertCell();
    }
    for (var d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
      if (row.cells.length === 7) {
        row = tbody.insertRow();
      }
      var cell = row.insertCell();
      cell.innerText = d.getDate();
      cell.dataset.date = d.toISOString().slice(0, 10);
      cell.onclick = toggleDate;
      if (selectedDates.includes(cell.dataset.date)) {
        cell.classList.add('selected');
      }
    }
    document.getElementById('monthLabel').textContent = currentDate.toLocaleDateString('default', { month: 'long', year: 'numeric' });
  }

  function toggleDate(event) {
    var cell = event.target;
    var date = cell.dataset.date;
    if (cell.classList.contains('selected')) {
      cell.classList.remove('selected');
      selectedDates.splice(selectedDates.indexOf(date), 1);
    } else {
      cell.classList.add('selected');
      selectedDates.push(date);
    }
    document.getElementById('dates').value = selectedDates.join(', ');
  }
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Vote</title>
	<style>
	#calendar {
	display: none;
	position: absolute;
	background-color: white;
	border: 1px solid #ddd;
	}
	#calendar th, #calendar td {
	width: 40px;
	height: 40px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #ddd;
	}
	.selected {
	background-color: #00f;
	color: #fff;
	}
	</style>
	</head>
	<body>

	<form action="/vote/" method="post">
	<label for="name">Name:</label><br>
	<input type="text" id="name" name="name" required><br><br>

	<label for="dates">Unavailable Dates:</label><br>
	<textarea rows="3" cols="100" id="dates" name="dates" readonly></textarea><br>
	<button type="button" onclick="toggleCalendar()">Select Unavailable Dates</button><br><br>

	<input type="submit" value="Submit">
	</form>

	<table id="calendar">
	<thead>
	<tr>
	<th colspan="1"><button onclick="previousMonth()">◀</button></th>
	<th colspan="5" id="monthLabel"></th>
	<th colspan="1"><button onclick="nextMonth()">▶</button></th>
	</tr>
	<tr>
	<th>Sun</th>
	<th>Mon</th>
	<th>Tue</th>
	<th>Wed</th>
	<th>Thu</th>
	<th>Fri</th>
	<th>Sat</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>

	<script>
	var selectedDates = [];
	var currentDate = new Date();

	function toggleCalendar() {
	var calendar = document.getElementById('calendar');
	if (calendar.style.display === 'none' \|\| calendar.style.display === '') {
	calendar.style.display = 'block';
	renderCalendar();
	} else {
	calendar.style.display = 'none';
	}
	}

	function previousMonth() {
	currentDate.setMonth(currentDate.getMonth() - 1);
	renderCalendar();
	}

	function nextMonth() {
	currentDate.setMonth(currentDate.getMonth() + 1);
	renderCalendar();
	}

	function renderCalendar() {
	var tbody = document.getElementById('calendar').tBodies[0];
	tbody.innerHTML = '';
	var startDate = new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), 1));
	var endDate = new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth() + 1, 0));
	var row = tbody.insertRow();
	for (var i = 0; i < startDate.getDay(); i++) {
	row.insertCell();
	}
	for (var d = startDate; d <= endDate; d.setDate(d.getDate() + 1)) {
	if (row.cells.length === 7) {
	row = tbody.insertRow();
	}
	var cell = row.insertCell();
	cell.innerText = d.getDate();
	cell.dataset.date = d.toISOString().slice(0, 10);
	cell.onclick = toggleDate;
	if (selectedDates.includes(cell.dataset.date)) {
	cell.classList.add('selected');
	}
	}
	document.getElementById('monthLabel').textContent = currentDate.toLocaleDateString('default', { month: 'long', year: 'numeric' });
	}

	function toggleDate(event) {
	var cell = event.target;
	var date = cell.dataset.date;
	if (cell.classList.contains('selected')) {
	cell.classList.remove('selected');
	selectedDates.splice(selectedDates.indexOf(date), 1);
	} else {
	cell.classList.add('selected');
	selectedDates.push(date);
	}
	document.getElementById('dates').value = selectedDates.join(', ');
	}
	</script>

	</body>
	</html>