Pełny gotowy kod. ~Kajetan Pietrzak
This commit is contained in:
Tulis_Dwa
commit
ddeb959eaa
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
5
README
Normal file
5
README
Normal file
@ -0,0 +1,5 @@
|
||||
Bardzo proszę wejść (w przeglądarce) na index.html, z włączonym JavaScriptem. Zrobiłem generator (własne dostosowywanie kalendarza), z opcją łatwego druku.
|
||||
Projekt w pełni napisany przeze mnie, kod dostępny na:
|
||||
Bardzo proszę "pobawić" się dostępnymi parametrami :)
|
||||
Dziękuję.
|
||||
~Kajetan Pietrzak
|
||||
335
index.html
Normal file
335
index.html
Normal file
@ -0,0 +1,335 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kajetan Pietrzak</title>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-style: normal;
|
||||
font-variation-settings:"wdth" 100;
|
||||
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 5%;
|
||||
-webkit-transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: calc(15px * var(--mnoznik) * 1.2);
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute !important;
|
||||
left: 50% !important;
|
||||
top: 100% !important;
|
||||
|
||||
-webkit-transform: translate(-50%, -100%) !important;
|
||||
transform: translate(-50%, -100%) !important;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: 2s;
|
||||
}
|
||||
|
||||
.nazwa-miesiaca {
|
||||
color: darkcyan;
|
||||
text-align: center;
|
||||
font-size: calc(25px * var(--mnoznik) * 1.2);
|
||||
margin-top: 2%;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
.obrazek {
|
||||
border-radius: 5%;
|
||||
width: calc(350px * var(--mnoznik));
|
||||
margin: calc(10px * var(--mnoznik));
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
img:hover {
|
||||
transition: 0.6s;
|
||||
transform: rotate(2.5deg);
|
||||
}
|
||||
|
||||
.trm {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
|
||||
.tdm {
|
||||
width: calc(50px * var(--mnoznik)) !important;
|
||||
}
|
||||
|
||||
.miesiac-kalendarz {
|
||||
width: calc(350px * var(--mnoznik));
|
||||
margin-left: calc(10px * var(--mnoznik));
|
||||
margin-right: calc(10px * var(--mnoznik));
|
||||
margin-bottom: calc(10px * var(--mnoznik));
|
||||
}
|
||||
|
||||
#kalendarz-table {
|
||||
border-style: dashed;
|
||||
border-radius: 10px;
|
||||
border-width: 10px !important;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: red;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ustawienia {
|
||||
text-align: center;
|
||||
|
||||
margin-top: 10px;
|
||||
border: 3px solid black !important;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.nie-drukuj {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<div class="error">
|
||||
Ta strona bazuje na JavaScript (do generowania kalendarza). Włącz JavaScript w przeglądarce.
|
||||
</div>
|
||||
</noscript>
|
||||
|
||||
<table id="kalendarz-table">
|
||||
<tbody id="tbody">
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div id="ustawienia" class="nie-drukuj">
|
||||
<br>
|
||||
|
||||
<div>
|
||||
<button onclick="window.print()">Podoba się? Wydrukuj!</button>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
Dostosuj kalendarz do swoich potrzeb!
|
||||
|
||||
<div>
|
||||
Ustaw liczbę kolumn: <span id="collumns">4</span>
|
||||
<input style="width: 150px !important;" type="range" min="1" max="5" step="1" value="4" id="iloscKolumn" oninput="aktualizacjaWartosci()">
|
||||
Ustaw wielkość (mnożnik): <span id="mnoznik">100%</span>
|
||||
<input style="width: 150px !important;" type="range" min="1" max="100" step="0" value="100" id="mnoznikInput" oninput="aktualizacjaWartosci()">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Włącz lub wyłącz miesiące:
|
||||
<div id="miesiaceList"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button onclick="aktualizacjaKalendarza()">Aktualizuj kalendarz!</button>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<footer class="tekst">
|
||||
Napisane w całości (HTML, CSS, JavaScript) przez: Kajetan Pietrzak <br> Wszystkie obrazy (poza maj i czerwiec - Google Images), pobrane ze strony: <a href="https://pixabay.com/">pixabay.com</a>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
var wielkosc = -1;
|
||||
var wierszy = 0;
|
||||
var collumns = 4;
|
||||
var mnoznik = 100;
|
||||
|
||||
const miesiaceList = document.getElementById("miesiaceList");
|
||||
const nazwyMisiacow = ["Styczeń", "Luty", "Marzec", "Kwiecień", "Maj", "Czerwiec", "Lipiec", "Sierpień", "Wrzesień", "Październik", "Listopad", "Grudzień"]
|
||||
var stanMiesiacow = [];
|
||||
|
||||
for(var i = 0; i<12; i++) {
|
||||
let checkbox = document.createElement("input");
|
||||
checkbox.type = "checkbox";
|
||||
checkbox.id = `checkbox${i}`
|
||||
checkbox.checked = true;
|
||||
stanMiesiacow[`checkbox${i}`] = true;
|
||||
|
||||
let span = document.createElement("span");
|
||||
span.textContent = nazwyMisiacow[i];
|
||||
|
||||
miesiaceList.appendChild(checkbox);
|
||||
miesiaceList.appendChild(span);
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty("--mnoznik", "1");
|
||||
|
||||
function aktualizacjaWartosci() {
|
||||
collumns = document.getElementById("iloscKolumn").value;
|
||||
document.getElementById("collumns").textContent = collumns;
|
||||
|
||||
mnoznik = document.getElementById("mnoznikInput").value;
|
||||
document.getElementById("mnoznik").textContent = mnoznik + "%";
|
||||
}
|
||||
|
||||
function aktualizacjaKalendarza() {
|
||||
document.documentElement.style.setProperty("--mnoznik", (mnoznik / 100).toString());
|
||||
|
||||
for(let i = 0; i<wierszy +1; i++) {
|
||||
const kalendarz = document.getElementById(`kalendarz${i}`);
|
||||
kalendarz.remove();
|
||||
}
|
||||
|
||||
wielkosc = -1;
|
||||
wierszy = 0;
|
||||
|
||||
dodajWiersz()
|
||||
|
||||
for(var i in stanMiesiacow) {
|
||||
let checkbox = document.getElementById(i);
|
||||
if(checkbox.checked) {
|
||||
if(stanMiesiacow[i] == true) {
|
||||
dodajDoKalendarza(2025, parseInt(i.replace(/\D/g, ''), 10)+1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function dodajWiersz() {
|
||||
var tbody = document.getElementById("tbody");
|
||||
var nowyWiersz = document.createElement("tr");
|
||||
nowyWiersz.id = `kalendarz${wierszy}`;
|
||||
|
||||
tbody.appendChild(nowyWiersz);
|
||||
}
|
||||
|
||||
function dzienTygodnia(rok, miesiac, dzien) {
|
||||
return dataZDni(rok, miesiac, dzien).toLocaleDateString("pl-PL", { weekday: 'short' })
|
||||
}
|
||||
|
||||
function dniWMiesiacu(rok, miesiac) {
|
||||
return new Date(rok, miesiac, 0).getDate();
|
||||
}
|
||||
|
||||
function dataZDni(rok, miesiac, dzien) {
|
||||
return new Date(`${miesiac}/${dzien}/${rok}`)
|
||||
}
|
||||
|
||||
function dodajDoKalendarza(rok, miesiac) {
|
||||
wielkosc++;
|
||||
if(wielkosc >= collumns) {
|
||||
wierszy++;
|
||||
wielkosc = 0;
|
||||
|
||||
dodajWiersz();
|
||||
}
|
||||
const kalendarz = document.getElementById(`kalendarz${wierszy}`);
|
||||
var html = kalendarz.innerHTML;
|
||||
miesiac--;
|
||||
|
||||
var opisy = ["Zima w styczniu maluje na drzewach białe gałązki. Śnieżna pokrywa na drzewach jest podziwiana przez ludzi podczas spacerów",
|
||||
"Zima, ferie, wolny czas, zabawy na śniegu, to najlepszy czas dla dzieci, czekają na to co roku.",
|
||||
"Fioletowe, żółte, białe krokusy w zanikającym śniegu to znak, że marzec wita wiosnę",
|
||||
"Słońce na niebie i kwietniowe żółte forsycje w parkach zapiera dech w piersiach",
|
||||
"Majowe niezapominajki bawią swoimi pięknymi kolorami.",
|
||||
"Czerwcowy klimat rozpoczynających się wakacji.",
|
||||
"Wakacje, lody, kwiaty i owoce, tak wygląda raj na ziemi",
|
||||
"Złote kłosy zbóż, złote słońce, końcówka wakacji to sierpniowy znak, że lato odchodzi",
|
||||
"Wrzesień przynosi kolory, owoce, warzywa, grzyby i cieniutkie nitki Babiego Lata",
|
||||
"Klony, brzozy, dęby w kolorowych liściach żegnają okres wegetacji przechodząc w październiku na spoczynek, by wiosną powrócić swoim pięknem",
|
||||
"Mgliście, zimno, dżdżyście jakby ktoś wyłączył kolory, jakoś trzeba przetrwać listopad",
|
||||
"Grudzień pachnie śniegiem, choinką, piernikami i pomarańczami."]
|
||||
var tytuly = ["Styczniowe śnieżne drzewa",
|
||||
"Lutowe ferie szkolne",
|
||||
"Krokusy w śniegu",
|
||||
"Żółta forsycja jak słońce",
|
||||
"Majowe niezapominajki",
|
||||
"Czerwcowe wakacje",
|
||||
"Lipcowe atrakcje",
|
||||
"Sierpień pachnący zbożem",
|
||||
"Wrześniowe Babie Lato",
|
||||
"Październik pachnący liśćmi",
|
||||
"Szary i bury listopad",
|
||||
"Grudniowe, rodzinne święta"]
|
||||
|
||||
html += `
|
||||
<td>
|
||||
<p class="nazwa-miesiaca">${nazwyMisiacow[miesiac]}</p>
|
||||
<img class="obrazek" src="${miesiac}.jpg" title="${tytuly[miesiac]}" alt="${opisy[miesiac]}">
|
||||
<table class="miesiac-kalendarz">
|
||||
<tr style="background-color: rgb(0, 174, 255); text-align: center;">
|
||||
<td class="tdm">Pn</td>
|
||||
<td class="tdm">Wt</td>
|
||||
<td class="tdm">Śr</td>
|
||||
<td class="tdm">Czw</td>
|
||||
<td class="tdm">Pt</td>
|
||||
<td class="tdm">Sb</td>
|
||||
<td class="tdm">Nd</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
var dzienTotal = 1;
|
||||
var dzienMisiaca = 1;
|
||||
var tydzien = 1;
|
||||
var zaczolem = false;
|
||||
var koniec = false;
|
||||
|
||||
const dniMisiaca = dniWMiesiacu(rok, miesiac+1);
|
||||
var zaczynaSieOd = dataZDni(rok, miesiac+1, 1).getDay() -1;
|
||||
zaczynaSieOd = (zaczynaSieOd == -1) ? 6 : zaczynaSieOd;
|
||||
|
||||
for(var tydzien = 1; tydzien<8; tydzien++) { //Maksymalnie 6 tygodni, ale jako, że zaczynam od "1" to i nie może być większe niż 7.
|
||||
html += `<tr class="trm">`;
|
||||
|
||||
for(var dzien = 0; dzien<7; dzien++) {
|
||||
if(tydzien == 1 && !zaczolem) {
|
||||
if(dzien == zaczynaSieOd) {
|
||||
html += `<td>${dzienMisiaca}</td>`
|
||||
zaczolem = true;
|
||||
} else {
|
||||
html += "<td></td>";
|
||||
}
|
||||
dzienTotal++;
|
||||
} else {
|
||||
dzienMisiaca++;
|
||||
if(dzienMisiaca > dniMisiaca) koniec = true;
|
||||
if(koniec) {
|
||||
if(dzien == 0) break;
|
||||
html += `<td></td>`;
|
||||
continue;
|
||||
}
|
||||
html += `<td>${dzienMisiaca}</td>`;
|
||||
}
|
||||
}
|
||||
|
||||
html += "</tr>";
|
||||
}
|
||||
|
||||
html += '</td>';
|
||||
|
||||
kalendarz.innerHTML = html;
|
||||
}
|
||||
|
||||
dodajWiersz()
|
||||
|
||||
for(var i = 1; i<13; i++) {
|
||||
dodajDoKalendarza(2025, i);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user