How can I change the background of jQuery UI datepicker based on the selected month?
I have created 12 classes, each representing a month, and the selected month already has the background. I tried using "onChangeMonthYear: function(year, month, inst) { ... }" but didn't achieve the desired result.
Any suggestions or advice on how to accomplish this?
$(document).ready(function(){
$('#calendar').datepicker({
inline: true,
firstDay: 7,
showOtherMonths: true,
dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
});
var month = $('.ui-datepicker-month').text().toLowerCase();
$('.calendar_img').addClass(month);
})* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
}
.page {
position: absolute;
display: table;
width: 100%;
height: 100%;
}
.page .page_content {
display: table-cell;
vertical-align: middle;
padding: 80px 0;
}
.calendar_container {
display: flex;
width: 605px;
min-height: 400px;
box-shadow: 4px 5px 18px 0px rgba(0, 0, 0, 0.3);
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
}
.calendar_container .calendar_img {
float: left;
position: relative;
width: 250px;
min-height: 400px;
background-color: #f4f8f1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.calendar_container .calendar_data {
float:
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>
<div class="page">
<div class="page_content">
<div class="calendar_container">
<div class="calendar_img"></div>
<div class="calendar_data">
<div id="calendar"></div>
</div>
</div>
</div>
</div>