CODEWITHSUNDEEP
php
adamc
adamc

Reputation: 3

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

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

Upvotes: 0

Views: 1861

Answers (2)

Twisty
Twisty

Reputation: 30893

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>

Upvotes: 0

tshimkus
tshimkus

Reputation: 1181

<?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;

?>

Upvotes: 1

Related Questions