Hej,
jak w tytule: mam za zadanie zrobić projekt - kalendarz z rezerwacją usług. Poszperałem po forach, skręciłem kalendarz, dodałem wyskakujące okienko do każdego z dni z godzinami i...
mam dwa pytania:
- Jak sądzę, to w gruncie rzeczy dla każdego dnia wyskakuje jedno i to samo okno. Jak zrobić, żeby wyskakiwało ,,indywidualne" dla każdego dnia z osobna? (Chyba, że się mylę i tak zrobione jest ok?)
- W projekcie stoi, że aplikacja powinna sprawdzać, czy dany termin jest wolny - jeśli jest, to ma go zapisywać (mam użyć ,,Local Storage", o którym nigdy nic nie było wcześniej), a jeśli nie - to ma to pokazywać.
W drugim przypadku pewnie, jak zgaduję, mam skręcić alert, który wyskoczy po kliknięciu z infem, że termin zajęty, jeśli godzina w tym dniu jest zapisana w tym całym ,,Local Storage"?
Jednak w pierwszym nie bardzo wiem, jak to tam zapisać, bo nigdy nie miałem z tym do czynienia.
Nie proszę o napisanie kodu - tylko o jakieś wskazówki.
Czy muszę jakoś zmienić wygląd kodu, żeby zapis w tym czymś był możliwy, czy mam go jakoś zmienić?
Czy ktoś jest w stanie łopatologicznie mi wytłumaczyć, jak się z tego korzysta (albo posiada linka z takowym?).
Kod kalendarza i okienka wstawiam poniżej:
Kalendarz:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Projekt2_java_zaaw_CSS.css">
<title>projekt_java_zaaw_2</title>
</head>
<body>
<div class="container">
<div class="calendar">
<div class="month">
<img class="arrow-prev" src="https://i.ibb.co/y89XmR9/strza-ka-kopia.png" alt="arrow" height="70px" width="100px"/>
<div class="date">
<h1></h1>
<p></p>
</div>
<img class="arrow-next" src="https://i.ibb.co/SRchBnx/strza-ka.png" alt="arrow" height="70px" width="100px"/>
</div>
<div class="weekdays">
<div>Niedziela</div>
<div>Poniedziałek</div>
<div>Wtorek</div>
<div>Środa</div>
<div>Czwartek</div>
<div>Piątek</div>
<div>Sobota</div>
</div>
<div class="days">
</div>
</div>
</div>
<script>
const date = new Date();
const renderCalendar = () =>
{
date.setDate(1);
const month = date.getMonth();
const monthDays = document.querySelector('.days');
const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
const prevLastDay = new Date(date.getFullYear(), date.getMonth(), 0).getDate();
const firstDayOfMonth = date.getDay();
const lastDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 0).getDay();
const nextDays = 7 -lastDayOfMonth - 1;
const months = ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec",
"Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"];
document.querySelector('.date h1').innerHTML = months[date.getMonth()];
document.querySelector('.date p').innerHTML = new Date().toDateString();
let days = "";
for(let x= firstDayOfMonth; x>0; x--)
{
days += `<div class="prev-date">${prevLastDay - x +1}</div>`;
}
for(let i=1; i<=lastDay; i++)
{
if(i === new Date().getDate() && date.getMonth() ===new Date().getMonth())
{
days += `<div class="today">${i}</div>`;
}
else
{days += `<div>${i}</div>`;}
}
for (let j =1; j<=nextDays; j++)
{
days += `<div class="next-date">${j}</div>`;
monthDays.innerHTML = days;
}
}
document.querySelector('.arrow-prev').addEventListener('click', ()=>{
date.setMonth(date.getMonth() -1);
renderCalendar();
})
document.querySelector('.arrow-next').addEventListener('click', ()=>{
date.setMonth(date.getMonth() +1);
renderCalendar();
})
renderCalendar();
document.querySelector('.days').addEventListener('click', ()=> {
window.open('ćwiczenia_java_zaaw11.html', 'okno', 'height=450, width=250');
renderCalendar();
})
</script>
</body>
</html>
Okienko:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>ćwiczenia_java_zaaw11</title>
</head>
<body>
<script>
const chooseHour = document.createElement('p');
chooseHour.textContent = "Godziny:";
document.body.appendChild(chooseHour);
const hours = '12:00,13:00,14:00,15:00,16:00,17:00,18:00,19:00,20:00'.split(',');
for (let c in hours) {
const newElement = document.createElement('p');
newElement.id = hours[c]; newElement.className = "showHour";
newElement.innerHTML = hours[c];
document.body.appendChild(newElement);
}
const information = document.createElement('p');
information.textContent = "Imię i Nazwisko:";
document.body.appendChild(information);
const newInput1 = document.createElement('input');
newInput1.id = "imię-i-nazwisko";
document.body.appendChild(newInput1);
const service = document.createElement('p');
service.textContent = "Typ usługi:";
document.body.appendChild(service);
const newInput2 = document.createElement('input');
newInput2.id = "typ-usługi";
document.body.appendChild(newInput2);
</script>
</body>
</html>