Het maken/tonen van een rooster

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jorn Reed

Jorn Reed

21/09/2022 12:14:08
Quote Anchor link
Hoi, ik wil graag een rooster maken.
Een simpel rooster waarin je elk uur van de dag aan de linker kant ziet en de dagen van de week bovenaan.
Ik haal in php met een api data op (activiteiten), activiteiten kunnen elk moment beginnen/eindigen, als het maar op de zelfde dag is. Tuurlijk is het simpel om de data te loopen en te printen. Maar hoe krijg ik bijvoorbeeld zwemles van 10:00 tot 12:30 op maandag in het rooster.

Ik kan de uren en de dag uit de opgehaalde data halen, maar geen idee hoe ik verder te werk moet gaan.

Heeft iemand een idee?
 
PHP hulp

PHP hulp

05/10/2022 00:49:43
 
Ad Fundum

Ad Fundum

21/09/2022 16:42:33
Quote Anchor link
Gewoon een ouderwets planningsbord maken met een CSS grid, waarbij je elke dag opdeelt in halve uren of kwartieren.
Kijk achter bovenstaande link hoe het werkt en maak er gebruik van.
 
Jorn Reed

Jorn Reed

29/09/2022 13:47:11
Quote Anchor link
Grid ben ik niet zo goed in, ik gebruik zelf altijd flex. De moeilijkheid leek mij juist aan de hand van de tijdstippen de positie van de divjes te bepalen.
 
Jan Koehoorn

Jan Koehoorn

29/09/2022 20:08:24
Quote Anchor link
Een snel voorbeeld met grid om je op weg te helpen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?php
$times
= [
    '0800',
    '0830',
    '0900',
    '0930',
    '1000',
    '1030',
    '1100',
    '1130',
    '1200',
    '1230',
];

$mo_activity       = new stdClass;
$mo_activity->from = '0930';
$mo_activity->to   = '1130';
$mo_activity->txt  = 'Answer questions at phphulp @ monday';

$tu_activity       = new stdClass;
$tu_activity->from = '1030';
$tu_activity->to   = '1100';
$tu_activity->txt  = 'Answer questions at phphulp @ tuesday';
?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        html,body{font:  14px Verdana;}
        .days {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 5px;
        }
        .schedule {
            display: grid;
            grid-template-rows: repeat(10, 100px);
            grid-gap: 5px;
        }
        .activity {
            background:  orange;
            border-radius: 5px;
            padding: 5px;
        }
        .from-0930 {
            grid-row-start: 4;
        }
        .from-1030 {
            grid-row-start: 6;
        }
        .to-1100 {
            grid-row-end: 7;
        }
        .to-1130 {
            grid-row-end: 8;
        }
    </style>
</head>
<body>
    <div class="days">
        <div class="schedule schedule--mo">
            <div class="activity from-<?=$mo_activity->from;?> to-<?=$mo_activity->to;?>"><?=$mo_activity->txt;?></div>
        </div>
        <div class="schedule schedule--tu">
            <div class="activity from-<?=$tu_activity->from;?> to-<?=$tu_activity->to;?>"><?=$tu_activity->txt;?></div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="phphulp.js"></script>

</body>
</html>
 
Ozzie PHP

Ozzie PHP

29/09/2022 20:13:32
Quote Anchor link
@Jan

Ben nieuwsgierig hoe het eruit ziet. Heb je een online voorbeeldje?
 
Jan Koehoorn

Jan Koehoorn

29/09/2022 20:17:46
Quote Anchor link
Nee, deze had ik ff op localhost gemaakt. Het ziet er ook nog helemaal niet goed uit, maar klopt wel qua start en stop positie op de verticale as. Je zou voor elk half uur een CSS class moeten genereren. Daarvoor zou ik een SASS mixin gebruiken.

Edit: screendump
https://www.awesomescreenshot.com/image/32926134?key=5a4c8fa1857d74e234e2f353f99666e2
Gewijzigd op 29/09/2022 20:22:37 door Jan Koehoorn
 
Jorn Reed

Jorn Reed

30/09/2022 09:56:31
Quote Anchor link
@Jan
Dat is best een slimme oplossing!
Met css kan ik natuurlijk makkelijk de positie bepalen, aangezien je via php de class bepaald.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.