.
| Nie | Pon | Wto | Sro | Czw | Pia | Sob |
<table id="tabelka">
<tr>
<td>Nie</td><td>Pon</td><td>Wto</td><td>Sro</td><td>Czw</td><td>Pia</td><td>Sob</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
Następnie tworzymy skrypt któy wypełni nam naszą tabelkę datami oraz zaznaczy aktualny dzień:
<script type="text/javascript">
function kalendarz()
{
var wiersz=1 //dni wstawaimy od wiersza nr.1 ponieważ w wierszu 0 powstawialiśmy nazwy dni tygodnia
Data = new Date(); //pobieramy date
var aktmies=Data.getMonth() //pobieramy miesiąc który jest aktualnie
var aktdzien=Data.getDate() //pobieramy aktualny dzień
var dzien=1 //dni liczymy od 1
Data.setDate(dzien) //cofniecie na poczatek aktualnego miesiaca
while (Data.getMonth()==aktmies) //petla dopoki nie skonczy sie miesiac
{
document.getElementById("tabelka").rows[wiersz].cells[Data.getDay()].innerHTML=Data.getDate() //napisz dzien w polu
if (Data.getDate()==aktdzien)
document.getElementById("tabelka").rows[wiersz].cells[Data.getDay()].className="dzis" //dodajemy klase "dzś" do komórki która przechowuje date aktualnego dnia
if (Data.getDay()==6) {wiersz++} //dodajemy wiersz ponieważ skończył nam się tydzień
dzien++ //zwiększamy date o kolejny dzień
Data.setDate(dzien) //kolejny dzien
}
}
</script>
Skrypt dodajemy pomiędzy znaczniki <head>.
Po tabelce dopisujemy
<script type="text/javascript">Czyli uruchamiamy funkcję.
kalendarz();
</script>
Teraz w możemy pozmieniać styl kalendarza np:
<style type="text/css">I to wszystko, prosty skrypt a efekt ciekawy.
#tabela,td,th{
border:solid 2px #03436A;
border-collapse: collapse;
}
td {
width:50px;
height:50px;
text-align: center;
font-size: 28px;
font-family: "Comic Sans MS";
}
tr:nth-child( odd ) { //wiersze parzyste
background-color: #FFCC40 ;
}
tr:nth-child( even ) { //wiersze nieparzyste
background-color: #A62800 ;
color: white;
}
.dzis { //komórka która została określona jako dzisiaj
background-color: #FF3D00 ;
border: 3px solid white;
}
tr:first-child { //wiersz z nazwami dni tygodnia
background-color: #0969A2 ;
color: white;
}
</style>
A mój kalendarz też będzie miał taki przecinek na początku ? A i jak se go wydrukuje to też będzie się data zmieniać ?
OdpowiedzUsuńJest możliwość przydzielenia kolorów pod konkretne daty np:
OdpowiedzUsuń1 styczeń - kolor 1
2 styczeń - kolor 2
3 styczeń - kolor 3
...i aby kalendarz powtarzał te kolory co 3 dni ( mam na myśli taki kalendarz zmianowy - co 3 dni jedna zmiana)