Creating a calendar using PHP

Question

I am new to php and really have no clue what I am doing. I am trying to make the calendar 4 rows across and 4 columns wide. So one month per row and column. For example January, February, March and April will consist of row 2 columns. I'm not even sure how to get started.

Image for an example.

This is what i have so far

<div class="row">
    <div class="column";">
        <h2>LOGO GOES HERE</h2>
        <p></p>
    </div>
    <div class="column";">
        <h2>2021</h2>
    </div>
    <div class="column">
        <h2>2021</h2>
    </div>
    <div class="column">
        <h2>2021</h2>
    </div>
</div>
<div class="row">
    <div class="column">
        <h2>January</h2>
    </div>
    <div class="column">

        <h2>February</h2>
    </div>
    <div class="column">
        <h2>March</h2>
    </div>
    <div class="column">
        <h2>April</h2>
    </div>
</div>
<div class="row">
    <div class="column">
        <h2>May</h2>
    </div>
    <div class="column">
        <h2>June</h2>
    </div>
    <div class="column">
        <h2>July</h2>
    </div>
    <div class="column">
        <h2>August</h2>
    </div>
</div>
<div class="row">
    <div class="column">
        <h2>September</h2>
    </div>
    <div class="column">
        <h2>October</h2> –

    </div>
    <div class="column">
        <h2>November</h2>
    </div>
    <div class="column">
        <h2>December</h2>
    </div>
</div>

Answer 1

The simplest option would be to use the built-in HTML date element, which adds a calendar view when users click it. This is the example provided in the MDN Web Docs:

<label for="start">Start date:</label>

<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

To get the value in a form using PHP you'd do something like the below. Save this into a file called index.php:

<form action="get-date.php" method="POST">

  <label for="start">Start date:</label>

  <input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

  <input type="submit" name="submit" value="submit">

</form>

Now create a file called get-date.php in the same folder and add the following:

<?php

  if(isset($_POST['submit'])) {
      $date = $_POST['trip-start'];
      echo $date;
  }

?> 

Answer 2

In plain html code, you could build with tables code. You could use php to iterate on 4 rows over 4 columns, and for each table, thead for dayNames, tr for each week.

<?php 
for($i=0; $i<4; $i++) { 
 for($j=0; $j<4; $j++) { ?>
   <table><!-- for each month -->
     <thead>
       <th>MON</th><th>TUES</th><th>WED</th><th>THURS</th>
       <th>FRI</th><th>SAT</th><th>SUN</th>
     </thead>
     <tbody>
       <tr><!--iterate over weeks for month-->
         <td></td><!--iterate over days for the week-->
       </tr>
     </tbody>
   </table>
<?php } } ?>

Answer 3

I think this should help you:

1. Choose your start date - you could use a php function for today's date

2. Iterate over 4 rows and for each over 4 columns

3. Display the month and year for each of the subsequent months

4. For each month open a table and table head to display the days' label

5. For each each week for that month put in a table row and the day of month number in the corresponding table cell. Try to follow through in the code below:

        <div style="width:100%; padding:0; margin:2%;"> 
        <?php
        for($j=0; $j<4; $j++) { 
        ?> <!--column of 4 rows -->
            <div style="width:22%; float:left; margin:1%; padding:0;"><!<!-- row of 4 months -->
                <h4><?=date('F Y', strtotime($date));?></h4>
                <table><!<!-- for each month -->
                    <thead><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th><th>S</th></thead>
                    <tbody>
                        <?php
                        for($m = date('m',strtotime($date)); 
                            $m == date('m', strtotime($date)); 
                            $date = date('Y-m-d',strtotime($date))) { ?>
                        <!-- for each week -->
                        <tr>
                            <?php if(date('w',strtotime($date))!=1) { ?>
                            <td colspan="<?=(date('w',strtotime($date))+6)%7;?>"></td> <?php } ?>
                            <?php
                            for($wkNo = date('W',strtotime($date)); 
                                $wkNo == date('W',strtotime($date)); 
                                $date = date('Y-m-d',strtotime($date)+$plus1day)) {
                                    if($m != date('m',strtotime($date))) { break;}
                                    ?>
                                <!--for each day -->
                                <td style="width:3%"><?=date('d',strtotime($date));?></td>
                         <?php } ?><!--end of week-->                  
                        </tr>   
                    <?php } ?>
                    </tbody>
                </table>
            </div>
        <?php    } ?>
        </div>
    <?php } ?>