Как обновить календарь без перезагрузки страницы?

Question

есть календарь на php, он формируется при открытии страницы. Как имеющийся код модифицировать (Ajax) чтобы при выборе в выпадающем списке месяца календарь менялся на выбранный месяц?

код -

`//<!--здесь выводим содержимое (форму)-->
 
echo <<<HTML
    <style type="text/css">
        /* css for calendar */
        .b-calendar {
            font: 14px/1.2 Arial, sans-serif;
            background: #f2f2f2;
        }
        .b-calendar__head {
            font: bold 14px/1.2 Arial, sans-serif;
            padding: 0 5px 5px 5px;
            text-align: center;
            border-bottom: 1px solid #c0c0c0;
        }
        .b-calendar__np {
            padding: 5px;
        }
        .b-calendar__day {
            font: 14px/1.2 Arial, sans-serif;
            padding: 8px 5px;
            text-align: center;
            background: #ffffff;
        }
        .b-calendar__weekend {
            color: red;
        }
        .b-calendar__today {
            border: 1px solid blue;
            border-radius: 4px;
        }
    </style>
<?php
HTML;
        function draw_calendar($month, $year, $action = 'none') {
            $calendar = '<table cellpadding="0" cellspacing="0" class="b-calendar__tb">';
 
            // вывод дней недели
            $headings = array('Пн','Вт','Ср','Чт','Пт','Сб','Вс');
            $calendar.= '<tr class="b-calendar__row">';
            for($head_day = 0; $head_day <= 6; $head_day++) {
                $calendar.= '<th class="b-calendar__head';
                // выделяем выходные дни
                if ($head_day != 0) {
                    if (($head_day % 5 == 0) || ($head_day % 6 == 0)) {
                        $calendar .= ' b-calendar__weekend';
                    }
                }
                $calendar .= '">';
                $calendar.= '<div class="b-calendar__number">'.$headings[$head_day].'</div>';
                $calendar.= '</th>';
            }
            $calendar.= '</tr>';
 
            // выставляем начало недели на понедельник
            $running_day = date('w',mktime(0,0,0,$month,1,$year));
            $running_day = $running_day - 1;
            if ($running_day == -1) {
                $running_day = 6;
            }
 
            $days_in_month = date('t',mktime(0,0,0,$month,1,$year));
            $day_counter = 0;
            $days_in_this_week = 1;
            $dates_array = array();
 
            // первая строка календаря
            $calendar.= '<tr class="b-calendar__row">';
 
            // вывод пустых ячеек
            for ($x = 0; $x < $running_day; $x++) {
                $calendar.= '<td class="b-calendar__np"></td>';
                $days_in_this_week++;
            }
 
            // дошли до чисел, будем их писать в первую строку
            for($list_day = 1; $list_day <= $days_in_month; $list_day++) {
                $calendar.= '<td class="b-calendar__day';
 
                // выделяем сегодняшний день
                if ($list_day != 0 && $list_day == date('j')) {
                    $calendar .= ' b-calendar__today';
                }
 
                // выделяем выходные дни
                if ($running_day != 0) {
                    if (($running_day % 5 == 0) || ($running_day % 6 == 0)) {
                        $calendar .= ' b-calendar__weekend';
                    }
                }
               
                $calendar .= '">';
 
                // пишем номер в ячейку
                $calendar.= '<div class="b-calendar__number">'.$list_day.'</div>';
                $calendar.= '</td>';
 
                // дошли до последнего дня недели
                if ($running_day == 6) {
                    // закрываем строку
                    $calendar.= '</tr>';
                    // если день не последний в месяце, начинаем следующую строку
                    if (($day_counter + 1) != $days_in_month) {
                        $calendar.= '<tr class="b-calendar__row">';
                    }
                    // сбрасываем счетчики
                    $running_day = -1;
                    $days_in_this_week = 0;
                }
 
                $days_in_this_week++;
                $running_day++;
                $day_counter++;
            }
 
            // выводим пустые ячейки в конце последней недели
            if ($days_in_this_week < 8) {
                for($x = 1; $x <= (8 - $days_in_this_week); $x++) {
                    $calendar.= '<td class="b-calendar__np"> </td>';
                }
            }
            $calendar.= '</tr>';
            $calendar.= '</table>';
 
            return $calendar;
        }
        ?>
            <div class="b-calendar">
                <?php echo draw_calendar(date('n'), date('Y')); ?>
                <div style="display: flex;">
                    <div style="width: 50%;margin-right: 10px;">
                        <select>
                            <option>июнь</option>
                            <option>июль</option>
                            <option>август</option>
                        </select>
                    </div>
                    <div style="width: 50%;">
                        <select>
                            <option>2019</option>
                            <option>2020</option>
                            <option>2021</option>
                        </select>
                    </div>
                </div>
            </div>
        <?php
 
// конец формы`

Answer 1

Делать целиком календарь не буду, тут или учите сами или используйте готовые библиотеки, вот пример динамической замены содержимого.

const calendar = document.querySelector('.calendar-content');
const month = document.querySelector('#month');
const year = document.querySelector('#year');

const update = () => {
  const choosed =  (`${month.value} ${year.value}`).toUpperCase();
  calendar.innerHTML = `Выводим календать за <strong>${choosed}</strong>`;
};

.calendar {
  margin: 1rem;
}

.options {
  display: flex;
}

.options>* {
  flex: 1;
  margin: 0 1rem;
}

<div class="calendar">
  <h3>Календарь</h3>
  <div class="calendar-content">месяца</div>
</div>

<div class="options">
  <select name="month" onchange="update()" id="month">
    <option value="june">Июнь</option>
    <option value="july">Июль</option>
    <option value="august">Август</option>
  </select>
  <select name="year" onchange="update()" id="year">
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
  </select>
</div>

БЛОГ НА HUSL

Как обновить календарь без перезагрузки страницы?

Ответы (1 шт):