+----+----+----+----+----+----+----+
| ma | di | wo | do | vr | za | zo |
+----+----+----+----+----+----+----+
| [] | [] | | | [] | [] | |
| | [] | [] | | [] | | |
| | [] | | [] | | [] | |
+----+----+----+----+----+----+----+
Wat het lastig maakt is dat op eenzelfde dag afspraken kunnen overlappen. Daarvoor dacht ik heel handig een CSS grid layout te kunnen gebruiken. Het raster heeft dan in de Y-as de minuten met grid-template-rows, en de kolommen nemen dan autmatisch weinig plaats in doordat CSS ze automatisch in de kolommen plaatst waar nog ruimte is met grid-auto-flow.
<!DOCTYPE html>
<html>
<head>
<style>
.agenda {
width: 16em;
height: 350px;
background-color: whitesmoke;
border: 1px solid lightgrey;
display: inline-grid;
grid-template-rows: repeat(calc(24 * 60), 1fr);
grid-auto-flow: dense;
}
.afspraak {border: 1px solid grey;}
#afspraak-1 {grid-row: calc(calc(60 * 10) + 30)
/ calc(calc(60 * 12) + 10);}
#afspraak-2 {grid-row: calc(calc(60 * 11) + 15)
/ calc(calc(60 * 11) + 30);}
#afspraak-3 {grid-row: calc(calc(60 * 15) + 15)
/ calc(calc(60 * 20) + 30);}
</style>
</head>
<body>
<div class="agenda">
<div class="afspraak" id="afspraak-1">a</div>
<div class="afspraak" id="afspraak-2">t</div>
<div class="afspraak" id="afspraak-3">j</div>
</div>
</body>
</html>
Alleen, het algoritme achter dense houdt de afspraken 1 kolom breed, ook al is er meer plaats als afspraken niet (zo veel) overlappen, bijvoorbeeld bij #afspraak-3.
Als ik dit vergelijk met Outlook, dan doet Outlook dat een stuk slimmer.
Ik heb zitten Googelen naar een algoritme voor het gedrag van Outlook, met steekwoorden als "greedy", maar ik kan niets vinden dat lijkt op hoe Outlook het doet.
De agendatabel is heel simpel, met tijdstempels 'van' en 'tot', een kolom 'id' en een kolom 'onderwerp'.
Hoe reken je zo iets uit in PHP?
