Het maken/tonen van een rooster
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?
Kijk achter bovenstaande link hoe het werkt en maak er gebruik van.
Code (php)
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
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>
$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>
Ben nieuwsgierig hoe het eruit ziet. Heb je een online voorbeeldje?
Edit: screendump
https://www.awesomescreenshot.com/image/32926134?key=5a4c8fa1857d74e234e2f353f99666e2
Gewijzigd op 29/09/2022 20:22:37 door Jan Koehoorn
Dat is best een slimme oplossing!
Met css kan ik natuurlijk makkelijk de positie bepalen, aangezien je via php de class bepaald.