PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Het maken/tonen van een rooster

Door Jorn Reed op 21-09-2022 12:14
2.682 views
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?
? Onbekende gebruiker
21-09-2022 16:42
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.
J Jorn Reed
29-09-2022 13:47
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
29-09-2022 20:08
Een snel voorbeeld met grid om je op weg te helpen:


<?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
29-09-2022 20:13
@Jan

Ben nieuwsgierig hoe het eruit ziet. Heb je een online voorbeeldje?
J Jorn Reed
30-09-2022 09:56
@Jan
Dat is best een slimme oplossing!
Met css kan ik natuurlijk makkelijk de positie bepalen, aangezien je via php de class bepaald.

Reageren

Inloggen om te reageren