Agenda afspraken

    ICTscripters maakt gebruik van cookies. Door het gebruiken en browsen naar onze site gaat je automatisch akkoord met het gebruik van cookies. Klik hier voor meer informatie

    • Agenda afspraken

      Hallo Iedereen

      Voor een nieuw project ben ik bezig met een agenda overzicht waarin afspraken komen te staan.
      De agenda is opgebouwd alsvolgt:



      Nu wil ik graag via PHP de afspraken er online in plaatsen zoals je kan zien van 9 uur tot 9 uur 30.

      Hoe krijg ik dit het beste voor elkaar?

      De agenda structuur is zo opgebouwd:

      PHP Source Code

      1. <table class="agenda">
      2. <tr>
      3. <th></th>
      4. <?php
      5. do {
      6. echo "<th>" . getWeekday($dt->format('l')) . " " . $dt->format('d-m') . "</th>\n";
      7. $dt->modify('+1 day');
      8. } while ($week == $dt->format('W'));
      9. ?>
      10. </th>
      11. </tr>
      12. <?php
      13. for ($i = $settings["begin_werkdag"]; $i <= $settings["einde_werkdag"]; $i++){
      14. for ($j = 0; $j <= 45 && $i < $settings["einde_werkdag"]; $j+=$settings["tijd_stappen"]){
      15. if($j == 0){
      16. $j = "00";
      17. }
      18. ?>
      19. <tr>
      20. <td><?= $i.":".$j?></td>
      21. <td></td>
      22. <td></td>
      23. <td></td>
      24. <td></td>
      25. <td></td>
      26. <td></td>
      27. <td></td>
      28. </tr>
      29. <?php
      30. }
      31. if($i == $settings["einde_werkdag"]){
      32. ?>
      33. <tr>
      34. <td><?= $i.":00"?></td>
      35. <td></td>
      36. <td></td>
      37. <td></td>
      38. <td></td>
      39. <td></td>
      40. <td></td>
      41. <td></td>
      42. </tr>
      43. <?php
      44. }
      45. }
      46. ?>
      47. </table>
      Laat alles zien
      Ik zal dus gaan moeten kijken naar $i en $j en dan vervolgens rowspan gaan gebruiken.

      Maar dit wordt me echter iets te complex. Iemand enig idee of betere manier?
      Met vriendelijke groet,

      L.Kok
      YoungVision
    • Je moet je tabel anders / dynamischer laten opbouwen. En je afspraken zo formatteren zodat je makkelijk kan zien wanneer er een afspraak begint en hoelang hij dan duurd in rowspans.

      --oude code weg gehaald--

      Als je dit doet zou je op de volgende code terug kunnen komen:

      Edit code iets opgeschoond en duidelijker gemaakt:

      PHP Source Code

      1. <style type="text/css">
      2. .agenda{
      3. color:#73879c;
      4. }
      5. .agenda caption{
      6. font-size: 20px;
      7. font-weight: 900;
      8. }
      9. .agenda td{
      10. border-bottom: 1px solid #999;
      11. border-right: 1px solid #999;
      12. color: #000;
      13. cursor: pointer;
      14. padding: 10px 15px;
      15. transition: all 0.5s ease 0s;
      16. }
      17. .agenda td.bezet{
      18. background: #eaeaea;
      19. }
      20. .agenda th{
      21. border-bottom: 1px solid #999;
      22. border-right: 1px solid #999;
      23. font-weight: bolder;
      24. padding: 20px 15px 0 15px;
      25. }
      26. </style>
      27. <?php
      28. $settings["begin_werkdag"] = '08:00'; // Begin van werkdag
      29. $settings["einde_werkdag"] = '17:00'; // Eind tijd van werkdag
      30. $settings["tijd_stappen"] = '+30 minutes'; //cell span grote
      31. $settings["start_year"] = "2017"; // Jaar van de week die je wil laten zien
      32. $settings["start_week"] = "16"; // Weeknr die je wil laten zien.
      33. define('stapgrote',strtotime($settings["tijd_stappen"]) - time()); // Grote van de stappen berekenen
      34. define('start_timestamp',strtotime($settings["start_year"] .'W'.$settings["start_week"].' '.$settings["begin_werkdag"])); // begin datum omzetten naar timestamp
      35. define('einde_timestamp',strtotime($settings["start_year"] .'W'.$settings["start_week"].' '.$settings["einde_werkdag"]));
      36. /* Het volgende is ter illustratie hoe ik aan welke waarde kom. Dit kan je natuurlijk versimpelen */
      37. $afspraken['oud'] = array(
      38. array('start'=>'2017-04-17 9:00','end'=>'2017-04-17 9:14','titel'=>'test'),
      39. array('start'=>'2017-04-20 10:30','end'=>'2017-04-20 15:00','titel'=>'Aap')
      40. );
      41. /* Afspraken omzetten zodat we rowspan weten en de +- begin tijd hebben als array key */
      42. foreach($afspraken['oud'] as $afspraak){
      43. $round_start = (round(strtotime($afspraak['start']) / stapgrote) * stapgrote); // Rond start tijd af naar dichtbijzijnde stap.
      44. $rowspan = round((strtotime($afspraak['end']) - strtotime($afspraak['start'])) / stapgrote); // Bijkijk hoeveel rijen de afsprak inneemt
      45. $rowspan = $rowspan<=0?1:$rowspan; // Rowspan moet minimaal 1 zijn;
      46. $afspraken['nieuw'][$round_start] = $afspraak; //oude info gewoon overnemen
      47. $afspraken['nieuw'][$round_start]['rowspan'] = $rowspan; // rowspan toevoegen aan array
      48. for($i = ($round_start+stapgrote);
      49. $i <= ($round_start+(stapgrote*($rowspan - 1)));
      50. $i=($i+stapgrote)){
      51. $afspraken['bezet'][$i] = true; // Aangeven welke tijden bezet zijn en dus geen cell hoven te krijgen.
      52. }
      53. }
      54. echo '<table class="agenda">
      55. <caption>Afsprakenoverzicht Week '.$settings["start_week"].'</caption>
      56. <thead><tr><th></th>';
      57. for($i = start_timestamp; $i <= strtotime('+6 day',start_timestamp); $i = strtotime('+1 day',$i)){
      58. echo '<th>'.date('d-m',$i).'</th>'; //Datums boven aan tabel zetten//
      59. }
      60. echo '</tr></thead>';
      61. for($h = start_timestamp;$h <= einde_timestamp; $h = $h + stapgrote){// Tijden door lopen
      62. echo '<tr><th>'.date('H:i',$h).'</th>';
      63. for($i = $h; $i <= strtotime('+6 day',$h); $i = strtotime('+1 day',$i)){ // Dagen doorlopen.
      64. if(isset($afspraken['nieuw'][$i])){//er is een afpsraak die begind op +- deze tijd.
      65. echo '<td class="bezet" data-timestamp="'.$i.'" data-datetime="'.date('Y-m-d H:i',$i).'" rowspan="'.$afspraken['nieuw'][$i]['rowspan'].'">';
      66. echo $afspraken['nieuw'][$i]['titel'];
      67. echo '</td>';
      68. }elseif(empty($afspraken['bezet'][$i])){ // doe niks gezien rowspan
      69. echo '<td class="vrij" data-timestamp="'.$i.'" data-datetime="'.date('Y-m-d H:i',$i).'"></td>';
      70. }
      71. }
      72. echo '</tr>';
      73. }
      74. echo'</table>';
      75. ?>
      Laat alles zien
      The law is what I write down on paper

      Post werd 1x aangepast, het laatst door MOnkNL ().

    • Het is me ondertussen gelukt!
      Oplossing die ik gebruik:
      1 table waarin de dagen en uren instaan.
      Vervolgens een table erover leggen waarin de afspraken aan de hand van position absolute en top positie gepositioneerd worden.

      Reden waarom geen plugin te gebruiken:
      Ik verkies alles zelf te maken met eigen code omwille van onderhoudbaarheid en flexibiliteit.

      Tevens blijft het ook altijd een leerproces als je nieuwe manieren moet zoeken om je eigen niveau omhoog te krikken.
      Met vriendelijke groet,

      L.Kok
      YoungVision