html - Bootstrap CSS Calendar align months -
i hope there easy fix this. on full screen want 2 months show in colum, on smaller devices shifts 1 column (i using .col-md-6 this), 3 rows total showing 6 months. works if each div same size. issue arrises when there month less "blocks of days"
see here: https://www.dropbox.com/s/1rrryqzzppql858/months.png?dl=0
is there sort of vertical-align css can used in bootstrap fix this???
here code:
<?php $date = date_create("2015-01-01"); $date_end = date_create("2015-07-01"); while ($date < $date_end):?> <div class="col-md-6 month_border"> <?php echo "<h2>".date_format($date,'f')."<small>".date_format($date,'y')."</small></h2>"; ?> <div class="row"> <?php //date_format($date,'w') day of week: 0 = sunday //date_format($date,'t') number of days in current month $weekday = date_format($date,'w'); $total_days = date_format($date,'t'); $days28 = 0; if ($total_days == 28) {$days28 = 1;} ($day_block = 0 - $weekday + 1; $day_block <= $total_days + $days28; $day_block ++):?> <?php if($day_block > 0 , $day_block <= $total_days):?> <div class="col-7split day_block" id="day_block-<?php echo date_format($date,'n')."-".$day_block; ?> " data-toggle="modal" data-target="#mymodal" data-whatever="@mdo"> <div class="row border bg-info"> <?php echo $day_block; ?> </div> <div class="row border"> <div class="col-sm-6 shift_text"> <?php if($day_block != 3) { echo "n"; } ?> </div> <div class="col-sm-6 compliment_text nopadding hidden-print"> </div> </div> <?php else:?> <div class="col-7split day_block"> <?php endif; ?> </div> <?php endfor; ?> </div> </div> <?php date_modify($date,"+1 months"); endwhile; ?>
Comments
Post a Comment