<div class='datepicker'>
  <div class="datepicker-header"></div>
</div>

*, *:before, *:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  line-height: 1.6;
}

.datepicker {
  width: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 50px 0 rgba(0,0,0,0.2);
  margin: 50px auto;
  overflow: hidden;
  .datepicker-header {
    height: 250px;
    background-image: url('https://cdn.dribbble.com/users/3178178/screenshots/6346366/lifeguard_on_duty.jpg');
    background-position: center center;
    background-size: 100%;
  }
  .ui-datepicker-inline {
    padding: 30px;
  }

  .ui-datepicker-header {
    text-align: center;
    padding-bottom: 1em;
    text-transform: uppercase;
    letter-spacing: .1em;
    .ui-datepicker-prev,
    .ui-datepicker-next {
      display: inline;
      float: left;
      cursor: pointer;
      font-size: 1.4em;
      padding: 0 10px;
      margin-top: -10px;
      color: #CCC;
    }
    
    .ui-datepicker-next {
      float: right;
    }
  }

  .ui-datepicker-calendar {
    width: 100%;
    text-align: center;
    thead {
      color: #CCC;
    }
    
    tr {
      th, td {
        padding-bottom: .5em;
      }
    }
    a {
      color: #444;
      text-decoration: none;
      display: block;
      margin: 0 auto;
      width: 35px;
      height: 35px;
      line-height: 35px;
      border-radius: 50%;
      border: 1px solid transparent;
      cursor: pointer;
    }
    
    .ui-state-highlight {
      border-color: #D24D57;
      color: #D24D57;
    }
  }
}

$(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>'
  });
});