PHP calendar to block some not available dates

I’m designing a little PHP calendar for a little booking system. The final feature is to block some not available dates, that I have stored in a PHP array. What is the best way to achieve this? Please I need some recommendations about how to do this. Thanks

// Set your timezone!!
date_default_timezone_set('Europe/Madrid');

// Get prev & next month
if (isset($_GET['ym'])) {
    $ym = $_GET['ym'];
} else {
    // This month
    $ym = date('Y-m');
}

// Check format
$timestamp = strtotime($ym . '-01');  // the first day of the month
if ($timestamp === false) {
    $ym = date('Y-m');
    $timestamp = strtotime($ym . '-01');
}

// Today (Format:2018-08-8)
$today = date('Y-m-j');

// Title (Format:August, 2018)
$title = date('F, Y', $timestamp);

// Create prev & next month link
$prev = date('Y-m', strtotime('-1 month', $timestamp));
$next = date('Y-m', strtotime('+1 month', $timestamp));

// Number of days in the month
$day_count = date('t', $timestamp);

// 1:Mon 2:Tue 3: Wed ... 7:Sun
$str = date('N', $timestamp);

// Array for calendar
$weeks = [];
$week = '';

// Add empty cell(s)
$week .= str_repeat('<td></td>', $str - 1);

for ($day = 1; $day <= $day_count; $day++, $str++) {

    $date = $ym . '-' . $day;

    if ($today == $date) {
        $week .= '<td class="today">';
    } else {
        $week .= '<td>';
    }
    $week .= $day . '</td>';

    // Sunday OR last day of the month
    if ($str % 7 == 0 || $day == $day_count) {

        // last day of the month
        if ($day == $day_count && $str % 7 != 0) {
            // Add empty cell(s)
            $week .= str_repeat('<td></td>', 7 - $str % 7);
        }

        $weeks[] = '<tr>' . $week . '</tr>';

        $week = '';
    }
}

JavaScript
​x
 
// Set your timezone!!date_default_timezone_set('Europe/Madrid');​// Get prev & next monthif (isset($_GET['ym'])) {    $ym = $_GET['ym'];} else {    // This month    $ym = date('Y-m');}​// Check format$timestamp = strtotime($ym . '-01');  // the first day of the monthif ($timestamp === false) {    $ym = date('Y-m');    $timestamp = strtotime($ym . '-01');}​// Today (Format:2018-08-8)$today = date('Y-m-j');​// Title (Format:August, 2018)$title = date('F, Y', $timestamp);​// Create prev & next month link$prev = date('Y-m', strtotime('-1 month', $timestamp));$next = date('Y-m', strtotime('+1 month', $timestamp));​// Number of days in the month$day_count = date('t', $timestamp);​// 1:Mon 2:Tue 3: Wed ... 7:Sun$str = date('N', $timestamp);​// Array for calendar$weeks = [];$week = '';​// Add empty cell(s)$week .= str_repeat('<td></td>', $str - 1);​for ($day = 1; $day <= $day_count; $day++, $str++) {​    $date = $ym . '-' . $day;​    if ($today == $date) {        $week .= '<td class="today">';    } else {        $week .= '<td>';    }    $week .= $day . '</td>';​    // Sunday OR last day of the month    if ($str % 7 == 0 || $day == $day_count) {​        // last day of the month        if ($day == $day_count && $str % 7 != 0) {            // Add empty cell(s)            $week .= str_repeat('<td></td>', 7 - $str % 7);        }​        $weeks[] = '<tr>' . $week . '</tr>';​        $week = '';    }}​​

if I have an array in php with dates in this format “2020-08-12” that must be not available or not selectable how can I do.

here html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PHP Calendar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <style>
        .container {
            font-family: 'Montserrat', sans-serif;
            margin: 60px auto;
        }
        .list-inline {
            text-align: center;
            margin-bottom: 30px;
        }
        .title {
            font-weight: bold;
            font-size: 26px;
        }
        th {
            text-align: center;
        }

        td: {
            height: 50px;
        }
        td:hover{
          background-color: blue;
        }
        th:nth-of-type(6), td:nth-of-type(6) {
            color: blue;
        }
        th:nth-of-type(7), td:nth-of-type(7) {
            color: red;
        }
        .today {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="container w-50">
        <ul class="list-inline">
            <li class="list-inline-item"><a href="?ym=<?= $prev; ?>" class="btn btn-link">&lt; prev</a></li>
            <li class="list-inline-item"><span class="title"><?= $title; ?></span></li>
            <li class="list-inline-item"><a href="?ym=<?= $next; ?>" class="btn btn-link">next &gt;</a></li>
        </ul>
        <p class="text-right"><a href="icalmerger.php">Hoy</a></p>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>LU</th>
                    <th>MA</th>
                    <th>MI</th>
                    <th>JU</th>
                    <th>VI</th>
                    <th>SA</th>
                    <th>DO</th>
                </tr>
            </thead>
            <tbody>
                <?php
                    foreach ($weeks as $week) {
                        echo $week;
                    }
                ?>
            </tbody>
        </table>
    </div>

</body>
</html>

JavaScript
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>PHP Calendar</title>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">    <style>        .container {            font-family: 'Montserrat', sans-serif;            margin: 60px auto;        }        .list-inline {            text-align: center;            margin-bottom: 30px;        }        .title {            font-weight: bold;            font-size: 26px;        }        th {            text-align: center;        }​        td: {            height: 50px;        }        td:hover{          background-color: blue;        }        th:nth-of-type(6), td:nth-of-type(6) {            color: blue;        }        th:nth-of-type(7), td:nth-of-type(7) {            color: red;        }        .today {            background-color: red;        }    </style></head><body>    <div class="container w-50">        <ul class="list-inline">            <li class="list-inline-item"><a href="?ym=<?= $prev; ?>" class="btn btn-link">&lt; prev</a></li>            <li class="list-inline-item"><span class="title"><?= $title; ?></span></li>            <li class="list-inline-item"><a href="?ym=<?= $next; ?>" class="btn btn-link">next &gt;</a></li>        </ul>        <p class="text-right"><a href="icalmerger.php">Hoy</a></p>        <table class="table table-bordered">            <thead>                <tr>                    <th>LU</th>                    <th>MA</th>                    <th>MI</th>                    <th>JU</th>                    <th>VI</th>                    <th>SA</th>                    <th>DO</th>                </tr>            </thead>            <tbody>                <?php                    foreach ($weeks as $week) {                        echo $week;                    }                ?>            </tbody>        </table>    </div>​</body></html>​

Answer

For every <td> that you output, check if its date is in your list of unavailable dates and output a class name so you can target it with CSS.

Change this code:

if ($today == $date) {
    $week .= '<td class="today">';
} else {
    $week .= '<td>';
}
$week .= $day . '</td>';

JavaScript
 
if ($today == $date) {    $week .= '<td class="today">';} else {    $week .= '<td>';}$week .= $day . '</td>';​

To this:

$classes = []; // assume
if ( in_array( $date, $unavailable_dates ) ) {
    $classes[] = 'unavailable';
}

if ($today == $date) {
    $classes[] = 'today';
}

$week .= '<td class="' . join(' ', $classes ) . '"></td>';

JavaScript
 
$classes = []; // assumeif ( in_array( $date, $unavailable_dates ) ) {    $classes[] = 'unavailable';}​if ($today == $date) {    $classes[] = 'today';}​$week .= '<td class="' . join(' ', $classes ) . '"></td>';​

This assumes the array of unavailable dates is stored in $unavailable_dates, e.g. ['2020-08-10', '2020-08-12', '2020-08-17'].

Advertisement

Answer