AdminLTE is a great template for online admin panel systems and the template provides a huge range of needs. See the template here: almsaeedstudio.com

Among other handy components, AdminLTE provides the following calendar box.

adminlte-calendar-jquery

Of course, when the user clicks a date, there should be a way to pick this content. I looked around the web if somebody else already blogged about the same problem, but saw none. After quite thorough html source investigations, I realised that AdminLTE uses datepicker-switch class in table headers (<th>). So, the issue was solved for me. The rest is jquery code and call to the related php files.

/*
The following function is triggered when a calendar day
is clicked by the user. Corresponding box item (Agenda)
will show all reservations for the specified date and it
should also update the Capacity value under the calendar box.
*/
$(document).on('click', 'td.day', function() {
var month_and_year = $("th.datepicker-switch").html();
var day = $(this).text();
var picked_date = day + ' ' + month_and_year;
var myData = 'picked_date=' + picked_date;

jQuery.ajax({
type: "POST",
url: "./backend_php/reservation/list_reservations_of_active_date.php",
dataType:"text",
data:myData,
success:function(response){
$("#todays_agenda_content").html(response);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});

jQuery.ajax({
type: "POST",
url: "./backend_php/reservation/update_capacity.php",
dataType:"text",
data:myData,
success:function(response){
$("#progress_bar_respond").html(response);
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
});

 

Sercan Leylek / OSLO

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s