PHP 日历问题

Question

所以我使用 php 类制作了一个日历，它工作正常，除非当月的第一天落在星期六（两个例子是 2020 年 2 月 1 日或 2020 年 8 月 1 日）。 我相信问题出在 PHP 类中，但我将包括 CSS，以及一些正在发生的事情的屏幕截图。

PHP

error_reporting(E_ALL);
ini_set('display_errors', 1);

class Calendar{

    private $month;
    private $year;
    private $days_of_week;
    private $num_days;
    private $date_info;
    private $day_of_week;

    public function __construct($month, $year, $days_of_week = array('Sun','Mon','Tue','Wed','Thu','Fri','Sat')){

       // server info would be here.

        require_once(CONN_DB);
        require_once(SESH);

        $this->month = $month;
        $this->year = $year;
        $this->days_of_week = $days_of_week;
        $this->num_days = cal_days_in_month(CAL_GREGORIAN, $this->month, $this->year);
        $this->date_info = getdate(strtotime('first day of', mktime(0,0,0,$this->month,1,$this->year)));
        $this->day_of_week = $this->date_info['wday'];          

    }

    public function show($conn){
        $output = '<div class="calRow">';

        foreach($this->days_of_week as $day){

            $output .= '<div class="calCol-1 header">'.$day.'</div>';

        }

        $output .= '</div>';
        $output .= '<div class="calRow dayRow">';

        if($this->day_of_week > 0){

            $output .= '<div class="calCol-'.$this->day_of_week.' empty"></div>';

        }
        //This is where I think the issue is...
        $current_day = 1;

        while($current_day <= $this->num_days){

            if($this->day_of_week == 7){
                $this->day_of_week = 0;
                $output .= '</div><div class="calRow dayRow">';
            }

            $day_date = str_pad($current_day,2,'0',STR_PAD_LEFT);
            $mnth_w_zero = str_pad($this->month,2,'0',STR_PAD_LEFT);
            $event_date = $this->year . '-' . $mnth_w_zero . '-' . $day_date;

            $output .= '<div class="calCol-1 day">';

                $output .= '<div class="date">'.$day_date.'</div>';
                $output .= '<div class="slots" id="'.$event_date.'"></div>';

            $output .= '</div>';

            $current_day++;
            $this->day_of_week++;
        }

        // bottom of issue spot...

        if($this->day_of_week != 7){
            $remaining_days = 7 - $this->day_of_week;
            $output .= '<div class="calCol-'.$remaining_days.' empty"></div>';
        }

        $output .= '</div>';

        echo $output;
    }

}

CSS

 .cal_selector { width: 100%; text-align: center; margin-bottom: 5px; } #calendar_div { width: 100%; height: 95%; border-right: 1px solid var(--mainnav-background-color); } .dayRow { height: 15.8%; } div.header { text-align: center; background-color: var(--mainnav-background-color); } div.empty { height: 100%; background-color: grey; } div.day { height: 100%; padding: 0px; } div.date { padding: 2px; } span.event { text-align: left; background-color: var(--main-front-color); color: white; font-size: 12px; padding: 2px; height: 20px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spread { position: absolute; z-index: 2; } .eventSlot { padding: 0; background-color: var(--main-front-color); margin-bottom: 1px; border-radius: 4px; } .eventSlot:hover .infopane { display: block; } .infopane { display: none; position: absolute; z-index: 3; background-color: var(--mainnav-background-color); border: 1px solid var(--main-front-color); border-radius: 4px; padding: 10px; } .optionPane { text-align: center; } .calOpts { padding: 2px; } .calCol-1 { width: 14.28%; } .calCol-2 { width: 28.57%; } .calCol-3 { width: 42.86%; } .calCol-4 { width: 57.15%; } .calCol-5 { width: 71.44%; } .calCol-6 { width: 85.73%; } .calCol-7 { width: 99.99%; } [class*="calCol-"] { border-left: 1px solid var(--mainnav-background-color); float: left; padding: 10px; } .calRow { border-bottom: 1px solid var(--mainnav-background-color); } .calRow::after { content: ""; clear: both; display: table; }

myCalendar.php 上的顶级 PHP（调用 myCalendar_class.php）

<?php

    error_reporting(E_ALL);
    ini_set('display_errors', 1);

   //server info here

    require_once(CONN_DB);
    require_once(SESH);
    require_once(CALENDAR_CLASS);

?>

myCalendar.php 上的 HTML

 <script src="Scripts/Calendar/scripts_calendar.js"></script> <span class="pageTitle">My Calendar</span> <div class="cal_selector"> <div class="cal_selector_center"> <select id="month_select" name="month_select" style="width:150px"> <option value='1'>January</option> <option value='2'>February</option> <option value='3'>March</option> <option value='4'>April</option> <option value='5'>May</option> <option value='6'>June</option> <option value='7'>July</option> <option value='8'>August</option> <option value='9'>September</option> <option value='10'>October</option> <option value='11'>November</option> <option value='12'>December</option> </select> <select id='year_select' name="year_select" style="width:75px;"> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> </select> </div> </div> <div id="calendar_div"></div>

查询

 function create_event_slots() { $('.slots').each(function() { var id = $(this).attr('id'); var d = new Date(id + 'T01:00:00'); var ms = d.getTime(); var div = ""; for (i = 0; i <= 20; i++) { div += '<div class="eventSlot" id="' + ms + '_' + i + '"></div>'; } $(this).html(div); }); } function change_calendar(mnth, year) { var str = 'month=' + mnth + '&year=' + year; $.ajax({ type: 'GET', data: str, url: 'Functions/load_calendar.php', success: function(result) { $('#calendar_div').html(result); create_event_slots(); update_events(mnth, year); } }); } function set_selects_to_current_month() { var d = new Date(); var m = d.getMonth() + 1; var y = d.getFullYear(); var m_sel = $('#month_select'); var y_sel = $('#year_select'); m_sel.val(m); y_sel.val(y); } $(document).ready(function() { set_selects_to_current_month(); change_calendar($('#month_select').val(), $('#year_select').val()); $('#month_select').change(function() { change_calendar($(this).val(), $('#year_select').val()); }); $('#year_select').change(function() { change_calendar($('#month_select').val(), $(this).val()); }); });

正确结果

正确呈现的日历

结果不正确

在此处输入图片说明

Answer 1

问题实际上出在 CSS 中。

新的 CSS 片段

 .calCol-1 { width: 14.27%; } .calCol-2 { width: 28.56%; } .calCol-3 { width: 42.85%; } .calCol-4 { width: 57.14%; } .calCol-5 { width: 71.43%; } .calCol-6 { width: 85.72%; } .calCol-7 { width: 99.98%; }

旧的 CSS 片段

 .calCol-1 { width: 14.28%; } .calCol-2 { width: 28.57%; } .calCol-3 { width: 42.86%; } .calCol-4 { width: 57.15%; } .calCol-5 { width: 71.44%; } .calCol-6 { width: 85.73%; } .calCol-7 { width: 99.99%; }

本质上，在这种情况下，无论出于何种原因，容器都太大了 0.01%，无法放入适当的行中。