HTML
Razred
CSS
<!DOCTYPE html>
<html lang="sl">
<head>
<meta charset="UTF-8">
<title>Koledar</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<?php
include "Razred.php"; // vnesemo ime razreda
$koledar = new Koledar();
$koledar -> add_event('Rojstni dan', 'rojstni datum', 1, 'barva');
?>
</body>
</html>
<?php
class Koledar
{
private string $trenutni_dan;
private string $trenutni_mesec;
private string $trenutno_leto;
private array $dogodki = [];
public function __construct(?string $datum = null)
{
$datum = $datum ? strtotime($datum) : time();
$this->trenutno_leto = date('Y', $datum);
$this->trenutni_mesec = date('m', $datum);
$this->trenutni_dan = date('d', $datum);
}
public function add_event(string $txt, string $datum, int $dnevi = 1, string $barva = ''): void
{
$barva = $barva ? ' ' . $barva : $barva;
$this->dogodki[] = [
'txt' => $txt,
'datum' => $datum,
'dnevi' => $dnevi,
'barva' => $barva
];
}
public function __toString(): string
{
$st_dneva = date('t',
strtotime("$this->trenutni_dan-$this->trenutni_mesec-$this->trenutno_leto"));
$st_dneva_prejsnji_mesec = date('j', strtotime('last day of previous month',
strtotime("$this->trenutno_leto-$this->trenutni_mesec")));
$dnevi = ['Nedelja', 'Ponedeljek', 'Torek', 'Sreda', 'Četrtek', 'Petek', 'Sobota'];
$prvi_dan_v_tednu = date('w', strtotime("$this->trenutno_leto-$this->trenutni_mesec"));
$html = '<div class="koledar-wrapper">';
$html = '<div class="koledar">';
$html .= '<div class="glavaKoledarja">';
$html .= '<div class="mesec-leto">';
$html .= date('F Y',
strtotime("$this->trenutno_leto-$this->trenutni_mesec-$this->trenutni_dan"));
$html .= '</div>';
$html .= '</div>';
$html .= '<div class="dnevi">';
foreach ($dnevi as $dan) {
$html .= '<div class="imeDneva">' . $dan . '</div>';
}
for ($i = $prvi_dan_v_tednu; $i > 0; $i--) {
$html .= '<div class="stevilkaDneva prazno">' . ($st_dneva_prejsnji_mesec - $i + 1) . '</div>';
}
for ($i = 1; $i <= $st_dneva; $i++) {
$izbrano = '';
if ($i == (int)$this->trenutni_dan) {
$izbrano = ' izbrano';
}
// Ali je zadnji v tednu (le sobote).
$zadnji_v_tednu = (date('w', strtotime("$this->trenutno_leto-$this->trenutni_mesec-$i")) == 6) ? ' zadnji-v-tednu' : '';
// Ali je v zadnji vrstici, vendar samo številke 26–31 (ne velja za 25!).
$zadnji_v_mesecu = ($i > $st_dneva - date('w', strtotime("$this->trenutno_leto-$this->trenutni_mesec-$st_dneva")) - 1) ? ' zadnji-v-mesecu' : '';
// Upoštevamo tudi neveljavne kombinacije.
if ($i == $st_dneva) {
$zadnji_v_tednu = ''; // Zadnji dan meseca ne potrebuje zadnji-v-tednu.
}
// Končna celica za posamezni dan
$html .= '<div class="stevilkaDneva' . $izbrano . $zadnji_v_tednu . $zadnji_v_mesecu . '">';
$html .= '<span>' . $i . '</span>';
foreach ($this->dogodki as $dogodek) {
for ($y = 0; $y < $dogodek['dnevi']; $y++) {
if (date('Y-m-d',
strtotime("$this->trenutno_leto-$this->trenutni_mesec-$i +$y")) ==
date('Y-m-d', strtotime($dogodek['datum']))) {
$html .= '<div class="dogodek' . $dogodek['barva'] . '">';
$html .= $dogodek['txt'];
$html .= '</div>';
}
}
}
$html .= '</div>';
}
for ($i = 1; $i <= (31 - $st_dneva - max($prvi_dan_v_tednu, 0)); $i++) {
$html .= '<div class="stevilkaDneva prazno">' . $i . '</div>';
}
$html .= '</div>';
$html .= '</div>';
$html .= '</div>';
return $html;
}
}
.koledar-wrapper {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
width: 100%;
}
/* Koledar z minimalno širino */
.koledar {
display: inline-block;
width: auto;
min-width: 700px;
border: 1px solid #ccc;
}
/* Glava koledarja */
.koledar .glavaKoledarja .mesec-leto {
font-size: 24px;
font-weight: bold;
color: #333333;
padding: 20px;
text-align: center;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
}
/* Glava z dnevi (imena dni) */
.koledar .dnevi {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 0;
}
.koledar .dnevi .imeDneva {
text-align: center;
font-weight: bold;
font-size: 12px;
padding: 10px;
text-transform: uppercase;
background-color: #e9ecef;
color: #495057;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
/* Odpravimo robove prve in zadnje celice */
.koledar .dnevi .imeDneva:last-child {
border-right: none;
}
.koledar .dnevi .imeDneva:nth-child(7n+1) {
border-left: none;
}
/* Celice dneva */
.koledar .dnevi .stevilkaDneva {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #333333;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
min-height: 100px;
background-color: #ffffff;
box-sizing: border-box;
overflow: hidden;
}
/* Največja velikost besedila za dneve */
.koledar .dnevi .stevilkaDneva span {
display: inline-flex;
font-size: 20px;
font-weight: 700;
line-height: 1;
color: #007bff;
margin-bottom: 5px;
border-radius: 4px;
padding: 2px 5px;
background-color: #f8f9fa;
}
/* Dogodki v dnevu */
.koledar .dnevi .stevilkaDneva .dogodek {
font-weight: 500;
font-size: 12px;
margin-top: 2px;
padding: 3px 5px;
border-radius: 5px;
background-color: #ffeb3b;
color: #333333;
word-wrap: break-word;
text-align: center;
max-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Barvni dogodki */
.koledar .dnevi .stevilkaDneva .dogodek.barva {
background-color: #ff5722;
color: #ffffff;
}
/* Stil za prazne dneve */
.koledar .dnevi .stevilkaDneva.prazno {
background-color: #f7f7f7;
color: #cccccc;
cursor: default;
}
/* Odstranimo border-right za zadnje dneve v tednu */
.stevilkaDneva.zadnji-v-tednu {
border-right: none !important;
}
/* Odstranimo border-bottom za dni v zadnji vrstici meseca */
.stevilkaDneva.zadnji-v-mesecu {
border-bottom: none !important;
}
/* Kombinacija zadnji-v-tednu in zadnji-v-mesecu */
.stevilkaDneva.zadnji-v-tednu.zadnji-v-mesecu {
border-right: none !important;
border-bottom: none !important;
}
/* Izjema: zadnji dan meseca vedno ohrani svoj border-right */
.stevilkaDneva:last-child {
border-right: 1px solid #ccc !important;
}
/* Za trenutni izbrani dan */
.koledar .dnevi .stevilkaDneva.izbrano {
background-color: #c8e6c9;
border: 2px solid #388e3c;
}
/* Skrij zadnje obrobe */
.koledar .dnevi .stevilkaDneva:last-child {
border-right: none;
}
