div.datepicker
  div.datepicker-header
View Compiled
body {
  font-family: 'Abril Fatface', cursive;
  font-size: 1.2em;
  background: #ffe7e9 url("https://images.unsplash.com/photo-1456271390536-693558280c8f?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=996&q=80&cs=tinysrgb") no-repeat center center fixed;
  background-size: cover;
  color: #ddd;
}
.datepicker {
  width: 475px;
  background: #fdfdfd;
  border-radius: 10px;
  box-shadow: 0 19px 38px rgba(0,0,0,0.2), 0 15px 12px rgba(0,0,0,0.2);
  margin: 15px auto;
  overflow: hidden;
}

.datepicker .datepicker-header {
  height: 250px;
  background-image: url("https://images.unsplash.com/photo-1441205337478-70cb1521e35a?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb");
  background-size: 100%;
}
.datepicker .ui-datepicker-inline {
  padding: 30px;
}
.datepicker .ui-datepicker-header {
  text-align: center;
  font-size: 1.4em;
  padding-bottom: .5em;
  letter-spacing: .1em;
  color: #333;
}
.datepicker .ui-datepicker-header .ui-datepicker-prev,
.datepicker .ui-datepicker-header .ui-datepicker-next {
  float: left;
  cursor: pointer;
  font-size: 1.4em;
  padding: 0 5px;
  margin-top: -8px;
  color: #ddd;
  transition: .6s;
}
.datepicker .ui-datepicker-header .ui-datepicker-next {
  float: right;
}
.datepicker .ui-datepicker-header .ui-datepicker-prev:hover {
  transform: translateX(-25px)
}
.datepicker .ui-datepicker-header .ui-datepicker-next:hover {
  transform: translateX(25px)
}
.datepicker .ui-datepicker-calendar {
  width: 100%;
  text-align: center;
}
.datepicker .ui-datepicker-calendar thead {
  color: #ddd;
}
.datepicker .ui-datepicker-calendar tr th,
.datepicker .ui-datepicker-calendar tr td {
  padding-bottom: .4em;
}
.datepicker .ui-datepicker-calendar a {
  color: #333;
  text-decoration: none;
  display: block;
  margin: 0 auto;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
}
.datepicker .ui-datepicker-calendar a:hover {
  background: #da89a2;
  color: #fff;
  transition: .7s;
  transform: scale(1);
}
.datepicker .ui-datepicker-calendar .ui-state-highlight {
  background: #da89a2;
  color: #fff;
}
.datepicker .ui-datepicker-calendar .ui-state-highlight:hover {
  color: #fff;
}
$(document).ready(function() {

  $(".datepicker").datepicker({
    prevText: '<i class="fa fa-fw fa-angle-left"></i>',
    nextText: '<i class="fa fa-fw fa-angle-right"></i>'
  });
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css
  2. https://fonts.googleapis.com/css?family=Abril+Fatface

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js