This may seem a little basic but here is my issue.
function output_calendar($month, $year) {
/* draw table */
$calendar = '<table class="table table-bordered" cellpadding="0" cellspacing="0" class="calendar">';
/* table headings */
$headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
$calendar.= '<tr><td>'.implode('</td><td>',$headings).'</td></tr>';
/* days and weeks vars now ... */
$running_day = date('w',mktime(0,0,0,$month,1,$year));
$days_in_month = date('t',mktime(0,0,0,$month,1,$year));
$days_in_this_week = 1;
$day_counter = 0;
$dates_array = array();
/* row for week one */
$calendar.= '<tr>';
/* print "blank" days until the first of the current week */
for($x = 0; $x < $running_day; $x++):
$calendar.= '<td> </td>';
$days_in_this_week++;
endfor;
/* keep going with days.... */
for($list_day = 1; $list_day <= $days_in_month; $list_day++):
$calendar.= '<td style="width:14%;height:10%;">';
/* add in the day number */
$calendar.= '<div>'.$list_day.'</div>';
/** QUERY THE DATABASE FOR AN ENTRY FOR THIS DAY !! IF MATCHES FOUND, PRINT THEM !! **/
$calendar.= str_repeat('<p> </p>',2);
$calendar.= '</td>';
if($running_day == 6):
$calendar.= '</tr>';
if(($day_counter+1) != $days_in_month):
$calendar.= '<tr>';
endif;
$running_day = -1;
$days_in_this_week = 0;
endif;
$days_in_this_week++; $running_day++; $day_counter++;
endfor;
/* finish the rest of the days in the week */
if($days_in_this_week < 8):
for($x = 1; $x <= (8 - $days_in_this_week); $x++):
$calendar.= '<td> </td>';
endfor;
endif;
/* final row */
$calendar.= '</tr>';
/* end the table */
$calendar.= '</table>';
/* all done, return result */
return $calendar;
}
Front End JS
$(document).ready(function () {
$(document).on('click', '#next', function() {
$("#main").empty();
if(display_month < 12) {
display_month++;
} else {
display_month = 1;
display_year++;
}
getCal(display_month, display_year);
$('#title').empty();
$('#title').html(months[display_month].concat(' ').concat(display_year));
});
$(document).on('click', '#last', function() {
$("#main").empty();
if(display_month > 1) {
display_month--;
} else {
display_month = 12;
display_year--;
}
getCal(display_month, display_year);
$('#title').empty();
$('#title').html(months[display_month].concat(' ').concat(display_year));
});
});
// handles the click event, sends the query
function getCal(v1, v2) {
$.ajax({
url: "calGrab.php",
type: 'POST',
dataType: 'html',
data: content,
data: {
"month": display_month,
"year": display_year,
},
}).done(function ( data ) {
$('#main').empty();
$('#main').append(data);
});
}
How do I go about correctly lining up the date with the associated day. For example, August starts on a Saturday for 2015. Are there any known techniques for this?
Please see prototype: http://calendar.conneraiken.com
You'd need 3 separate loops:
a) loop to pad calendar table with final days of previous month
b) loop to output current month
c) loop to pad calendar table with first days of next month
e.g.
Su M T W Th F Sa
28 29 30 1 2 3 4 // 1st week of current month
a a a b b b b // loops used
.... // full weeks in current month, all loop 'b'
28 29 30 1 2 3 // final week of current month
b b b c c c // loops used
$first = mktime(0,0,0,$month,1,$year);
$dow = date('w', $first);
# pad calendar for "end of last month"
echo '<tr>';
for($i = 0; $i < $dow; $i++) {
echo '<td></td>';
}
... loop to output actual days in current month
... loop to pad final week with "next month" days to complete the row