Jquery UI calender with event date display using ajax and css


<div id="datepicker"></div>
<div id="dialog" title="Event" style="display:none;"></div>
<style>
.events a {
background-color: #FF33CC !important;
}
</style>

<script>
var eventsDays = [ ‘2014-03-29′ ,’2014-03-30’ ];
$( “#datepicker” ).datepicker({
dateFormat: “yy-mm-dd”,
beforeShowDay: function(date) {
date = $.datepicker.formatDate(‘yy-mm-dd’, date);
if($.inArray( date, eventsDays )!==-1){
return [true, “events”, ”];
} else {
return [true, ”,”];
}
},
onSelect: function(a,b){
$.ajax({
type: “GET”,
url: “general_ajax.php”,
data: ‘option=ShowEvent&date=’+a,
success: function(data) {
if(data != 0){
$(‘#dialog’).html(data);
$(‘.dialog’).html(data);
$( “#dialog” ).dialog();
} else {
$( “#dialog” ).dialog( “destroy” );
}
}
});
}
});
</script>