How to display days in a grid by weeks in php?

Question

I am trying to display the days of a month in a grid-like or table like form. I was considering using Bulma or bootstrap to handle the grid/tables. The grid is based on 5 rows and 7 columns. I can't figure out how to go about implementing the correct days of the week. Each week should be grouped by a div with dates inside the div. This is what I have so far:

  <?php

  $row = '';
  $startDate = 12/30/2018;
  $numDays = 35;
  $datesArr = array();
  $weekCounter = 1;

  for ($i = 0; $i <= numDays; i++) {
     $row .= '<div>';
     $date = date('m/j/Y', strtotime("$startDate +$i days"));
     $datesArr[] = $date;

     if ($i % 8 == 0) {
        $row .= '<p>Week ' . $weekCounter++ . '</p>';
     } else {
        $row .= '<p>'.$date . ' - ' . date('l'), strtotime($date)). '</p>';
     }

     $row .= '</div>';
  }
  echo $row;
 ?>

This is my current output:

Week 1

12/31/2018-Monday

01/1/2019-Tuesday

01/2/2019-Wednesday

01/3/2019-Thursday

01/4/2019-Friday

01/5/2019-Saturday

01/6/2019-Sunday

Week 2

01/8/2019-Tuesday

01/9/2019-Wednesday

01/10/2019-Thursday

01/11/2019-Friday

01/12/2019-Saturday

01/13/2019-Sunday

01/14/2019-Monday

Week 3

01/16/2019-Wednesday

01/17/2019-Thursday

01/18/2019-Friday

01/19/2019-Saturday

01/20/2019-Sunday

01/21/2019-Monday

01/22/2019-Tuesday

Week 4

01/24/2019-Thursday

01/25/2019-Friday

01/26/2019-Saturday

01/27/2019-Sunday

01/28/2019-Monday

01/29/2019-Tuesday

01/30/2019-Wednesday

Week 5

02/1/2019-Friday

02/2/2019-Saturday

02/3/2019-Sunday

Answer 1

<?php

$row = '';
$startDate = '12/30/2018';
$numDays = 35;
$datesArr = array();
$weekCounter = 1;

for ($i = 0; $i <= $numDays; $i++) {

    $date = date('m/j/Y', strtotime("$startDate +$i days"));
    $datesArr[] = $date;

    // New div at start of week
    if (date("l", strtotime($date)) == "Sunday") {
        $row .= "<div style=\"float: left; margin: 10px;\">";
        $row .= '<p>Week ' . $weekCounter++ . '</p>';
    }

    $row .= '<p>'. $date . ' - ' . date("l", strtotime($date)) . '</p>';

    // close div at end of week
    if (date("l", strtotime($date)) == "Saturday") {
        $row .= "</div>"; 
    }

}

echo $row;

?>

Answer 2

You can also consider using jQuery UI Datepicker. You can use AJAX to get a start date and number of days. Then draw the calendar.

 $(function() { function getDateInfo() { $.getJSON("dateInfo.php", function(data){ drawCal(data.startDate, data.numDays, $(".calendar")); }) } function drawCal(sd, nd, tObj) { var format = "mm/dd/yy"; var min = $.datepicker.parseDate(format, sd); var max = new Date(); max.setDate(min.getDay() + nd); console.log(sd, max); tObj.html(""); tObj.datepicker({ dateFormat: format, minDate: min, maxDate: max, numberOfMonths: [3, 1] }); } drawCal("12/31/2018", 35, $(".calendar")); }); 

 .ui-datepicker-group { width: 100%; } 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="calendar"></div>