как нажатием на день календаря вызвать form, блок html
 

Здравствуйте! натолкните пожалуйста на мысль, а то я совсем уже в тупике.
Что мне почитать или какую тему посмотреть?

календарь стандартный на js
форму сделал для записи именифамилии и время
данные сохраняются в json

но, как мне сделать, чтобы нажатием на день, я мог вызвать это окно?

меня очень наталкивание на мысль решения интересует

вначале я думал через onclick button, но это получается кнопка, а ззадача ж щелчком по дню



Прикладываю код

<style>
#calendar2 {
  width: 100%;
  font: monospace;
  line-height: 1.2em;
  font-size: 15px;
  text-align: center;
}
#calendar2 thead tr:last-child {
  font-size: small;
  color: rgb(85, 85, 85);
}
#calendar2 thead tr:nth-child(1) td:nth-child(2) {
  color: rgb(50, 50, 50);
}
#calendar2 thead tr:nth-child(1) td:nth-child(1):hover, #calendar2 thead tr:nth-child(1) td:nth-child(3):hover {
  cursor: pointer;
}
#calendar2 tbody td {
  color: rgb(44, 86, 122);
}
#calendar2 tbody td:nth-child(n+6), #calendar2 .holiday {
  color: rgb(231, 140, 92);
}
#calendar2 tbody td.today {
  background: rgb(220, 0, 0);
  color: #fff;
}
</style>

<table id="calendar2">
  <thead>
    <tr><td>‹<td colspan="5"><td>›
    <tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
  <tbody>
</table>

[js run]
<script>
function Calendar2(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
    D = new Date(year,month,Dlast),
    DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(),
    DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
    calendar = '<tr>',
    month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
if (DNfirst != 0) {
  for(var  i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
  for(var  i = 0; i < 6; i++) calendar += '<td>';
}
for(var  i = 1; i <= Dlast; i++) {
  if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
    calendar += '<td class="today">' + i;
  }else{
    calendar += '<td>' + i;
  }
  if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
    calendar += '<tr>';
  }
}
for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
document.querySelector('#'+id+' thead td:nth-child(2)').innerHTML = month[D.getMonth()] +' '+ D.getFullYear();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.month = D.getMonth();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.year = D.getFullYear();
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {  // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр
    document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
}
}
Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth());
// переключатель минус месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(1)').ondblclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)-1);
}
// переключатель плюс месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(3)').ondblclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)+1);
}

// i - day
</script>
[/js]

<button>
 <form name="myform">

 <label for="name"><b>Proszę wpisać Imie Nazwisko</b></label>
    <input type="text" placeholder="Enter name" name="name" required>
 <br>
 <br>
 <label for="time"><b>Proszę wybrać godzine</b></label>
     <input type="time" name="cron" value="15:15" min="8:00" max="20:00">

<script>

function Myform (Dlast, DNlast, DNfirst) {
alert ( "" )
}


</form>
</button>
<script>

localStorage.setItem('key', 'value');
localStorage.getItem('key'); // value

const form = [{
"date": "12-03-2020",
"name": "xyz"
},{
"date": "12-03-2020",
"name": "xyz"
},{
"date": "12-03-2020",
"name": "xyz"
}];

localStorage.setItem('form', JSON.stringify(form));

// przy wchodzeniu do aplikacji sprawdz, czy dane znajdują sie w localStorage i jak tak to załaduj, jak nie to traktuj to jak pierwsze uruchomienie

let form = [];

if ("form" in localStorage) { // w ten sposób możesz sprawdzić czy właściwość wewnątrz obiektu istnieje
form = JSON.parse(localStorage.getItem('form'));
} else {
// dane nie istnieją
}

Konstantin47,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

секундочку

концовка формы работает. Моя проблема, как научится делать функции, чтобы когда щелкаю по дню, появилось мое окно myform

ps а то две части работают отдельно, моя задача познакомить

Konstantin47,
не надо разбивать код на куски.

document.addEventListener( "DOMContentLoaded" , function() {
 const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
     if(target = target.closest(selector)) handler(target)
 })
 const fn = el => {
 alert(`${el.textContent} форма открывайся, раз, два!!!`);
 }
 on(document, "click", "#calendar2 tbody td", fn);
  });

Cпасибо большое! как доделаю, отпишу

вообщем, пока что дальше, чем такое сообщение в окне алерта не продвинулся, [object HTMLInputElement], то завтра отпишу

Konstantin47,
а присвоить некий класс форме, который из скрытой, сделает её видимой?

можно спросить? я в правильном направлении думаю или совсем нет? просто я пока не понимаю, откуда слова брать и, когда они взаимодействуют со значениями, а когда нет. просто сам себя проверить вообще не могу ( ну кроме работает, не работает)

<div id = 'elem'>
 <form name='elems'>
<button>
 <label for="name"><b>Proszę wpisać Imie Nazwisko</b></label>
    <input type="text" placeholder="Enter name" name="name" required>
 <br>
 <br>
 <label for="time"><b>Proszę wybrać godzine</b></label>
     <input type="time" name="cron" value="15:15" min="8:00" max="20:00">
  
  <form>
  </div>

let elem1 = document.getElementById('elem');
  

 // нужно создать класс и сделать из скрытой формы открытую

 class div  {
 constructor(  visibility ) { 
 this.visibility = 'visible'
 }
 }

Konstantin47,

<style type="text/css">
    [name='elems']{
        display: none;
    }
    [name='elems'].open{
        display:  initial;
    }
    </style> <script>
document.addEventListener( "DOMContentLoaded" , function() {
 const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
     if(target = target.closest(selector)) handler(target)
 })
 const fn = el => {
 document.elems.classList.add("open")
 //alert(`${el.textContent} форма открывайся, раз, два!!!`);
 }
 on(document, "click", "#calendar2 tbody td", fn);
  });
    </script>