Code Tests

FORD
1
V
2
N
3
V
4
V
5
N
6
N
7
N
8
N
9
N
10
N
11
N
12
V
13
V
14
N
15
N
16
V
17
V
18
N
19
N
20
VV
21
N
22
N
23
N
24
V
25
V
26
N
27
V
28
N
29
N
30
V
31
N
CHEVY
1
N
2
N
3
N
4
N
5
N
6
N
7
VV
8
N
9
N
10
V
11
N
12
N
13
V
14
N
15
N
16
V
17
N
18
N
19
N
20
N
21
V
22
V
23
N
24
N
25
N
26
V
27
N
28
V

/*======= MUST MAKE SURE TO INCLUDE THE PREFIXES BECAUSE NOT ALL BROWSERS SUPPORT FLEX =======

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

*/
<style>
.acalendar{
	display: inline-block;
	clear: both;
	width: 100%;
	background: #fbfbfb;
}
.acalendar .acar{
	display: inline-block;
	clear: both;
	width: 100%;
	margin-bottom: 20px;
}
.acalendar .cartype{
	width: 100%;
	clear:both;
	display: inline-block;
	background: #e3f1fa;
	margin-top: 20px;
	padding: 10px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.acalendar .typeinner{
	
}
.acalendar .cartitle{
	
}
.acalendar .daysofmonth{	
	background: #eee;
	clear: both;
	width: 100%;
	display: inline-block;
	padding: 5px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.acalendar .monthinner{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	/*align-content: space-between;*/
	align-content: flex-start;
}
.acalendar .cday{
	width: 54px;
	height: 54px;
	background: #fff;
	padding: 5px;
	position: relative;
	border: 1px solid aliceblue;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	cursor: pointer;
}
.acalendar .cday:hover{
	opacity: 0.8;
}
.acalendar .cdayofmonth{
	position: absolute;
	display: inline-block;
	top: 1px;
	left: 1px;
	font-size: 9px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.acalendar .cdayinner{
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
}
.acalendar .chasbooking{
	color: #000;
	font-size: 15px;
	font-weight: 400;
	text-align: center;
}
.acalendar .hb{
	display: inline-block;
	margin: 0px 3px;
}
.acalendar .hby{
	color: red;
}
.acalendar .hbn{
	color: blue;
}
@media screen and (max-width: 650px) {

}
</style>

<script>
	var resizeId;
	jQuery(document).ready(function(){
		respondResize();
		jQuery(window).resize(function(){
			clearTimeout(resizeId);
			resizeId = setTimeout(respondResize, 500);
		});
	});
	function respondResize(){
		//we can go through a long process of calculating width of container by counting boxes, but don't have time.
		//there is probably a way to do this with flex but I am not so familiar with display flex so I can't center the calendar box
		//with it.
	}
</script>

	<?php 
	$stuffs = array(1,0,1,1,0,0,0,0,0,0,0,1,1,0,0,1,1,0,0,array(1,1),0,0,0,1,1,0,1,0,0,1,0);
	$stuffs2 = array(0,0,0,0,0,0,array(1,1),0,0,1,0,0,1,0,0,1,0,0,0,0,1,1,0,0,0,1,0,1);
	$allstuffs = array("FORD" => $stuffs, "CHEVY" => $stuffs2);
	?>
	<div class="acalendar">
	<?php foreach($allstuffs as $k => $v){ ?>
		<div class="acar">
			<div class="cartype">
				<div class="typeinner">
					<div class="cartitle"><?php echo $k; ?></div>
				</div>
		</div>
			<div class="daysofmonth">
				<div class="monthinner">
				<?php
					foreach($v as $n => $stuff){
					$hasBooking = "";
					if(is_array($stuff)){
						foreach($stuff as $s){
							$hasBooking .= $s === 1?'<span class="hb hby">V</span>':'<span class="hb hbn">N</span>';
						}
					}else{
						$hasBooking = $stuff === 1?'<span class="hb hby">V</span>':'<span class="hb hbn">N</span>';
					}
				?>
					<div class="cday">
						<div class="cdayofmonth"><?php echo $n + 1; ?></div>
						<div class="cdayinner">
							<div class="chasbooking"><?php echo $hasBooking; ?></div>
						</div>
					</div>
				<?php } ?>
				</div>
			</div>
		</div>
	<?php } ?>
	</div>