Trouble with a PHP Calendar - php

Question

So I have made a calendar using a php class and it works fine except when the first day of the month lands on a Saturday (two examples being February 1, 2020 or August 1, 2020). I believe the issue is in the PHP class, but I will include the CSS, along with a couple screenshots of what is happening.
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;
}
Top PHP on myCalendar.php (calls 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);
?>
HTML on myCalendar.php
<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>
JQuery
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());
});
});
Correct Result
a correctly rendered calendar
Incorrect result
enter image description here

Answer 1

The problem was actually in the CSS.
New CSS snippet
.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%;
}
Old CSS Snippet
.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%;
}
Essentially, for whatever reason in this situation the container was .01 percent too big to fit in the appropriate row.