Utilizing the power of an HTML button element to trigger a PHP function without the need for a page refresh:
calendar.html
<div id="buttons_week">
<button>+1 Week</button>
<button>-1 Week</button>
</div>
<div id="calendar"></div>
<script>
// retrieving target display
var calendar = document.getElementById('calendar');
// selecting buttons and iterating through them
Array.prototype.forEach.call(document.querySelectorAll('#buttons_week button'), function (elem) {
// adding function to click event
elem.addEventListener('click', function (evt) {
// setting up XHR object
if ( window.XMLHttpRequest ) {
xmlhttp=new XMLHttpRequest() // IE7+, Firefox, Chrome, Opera, Safari
}
else { // IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
// here's where you manage the response received from the PHP script
// for debugging
//calendar.innerHTML = xmlhttp.responseText
//console.log(JSON.parse(xmlhttp.responseText))
// parsing JSON string from server and updating calendar
var calendar_obj = JSON.parse(xmlhttp.responseText)
calendar.innerHTML = calendar_obj.weekNum + '/' + calendar_obj.mName + '/' + calendar_obj.yearNum
}
}
xmlhttp.open("GET","calendar.php?mod="+encodeURIComponent(evt.target.innerHTML),true);
xmlhttp.send();
})
})
</script>
calendar.php
<?php
echo json_encode(calendar($_GET['mod']));
function calendar($modification){
// actual function code omitted for brevity
}
?>
If there's no necessity to reach out to the server for additional tasks, check out this JavaScript-only solution. No server calls required!
JSFiddle
<div id="buttons_week">
<button>+1 Week</button>
<button>-1 Week</button>
</div>
<div id="calendar"></div>
<script>
var calendar = document.getElementById('calendar');
Array.prototype.forEach.call(document.querySelectorAll('#buttons_week button'), function (elem) {
elem.addEventListener('click', function (evt) {
var calendar_obj = week_increment(evt.target.innerHTML)
console.log(calendar_obj.days)
console.log(calendar_obj.dayMonth)
calendar.innerHTML =
calendar_obj.weekNum + '/' +
calendar_obj.mName + '/' +
calendar_obj.yearNum
})
})
function week_increment(mod) {
var dd = new Date()
var week_inc = 7 * 24 * 60 * 60 * 1000
if ( 0 === mod.indexOf('-') ) { week_inc *= -1 } // decrease week
dd = new Date(dd.getTime() + week_inc)
dd.setHours(0,0,0);
var dayMonth = [], days = [], weekNum
dd.setHours(-24 * ((dd.getDay() || 7) - 1))
for ( ii = 0; ii < 7; dd.setHours(24), ii++ ) {
days.push(dd.getDate())
dayMonth.push(dd.getMonth()+1)
if ( 3 === ii ) { // obtain weekNum on Thursday ??
weekNum = Math.ceil((((dd-new Date(dd.getFullYear(),0,1))/8.64e7)+1)/7) // http://stackoverflow.com/a/18005464/2743458
}
}
return {
'dayMonth': dayMonth,
'days': days,
'weekNum': weekNum,
'mName': months[dd.getMonth()],
'yearNum': dd.getFullYear()
}
}
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
</script>