js-custom-datepicker/dist/js-custom-datepicker.css

Сalendar was written on javascript using es6 format and was redone to es5 using webpack and babel tools. There are many classes for easy styling for the desired website design.

.custom-calendar {
  border: 1px solid #dbedeb;
  background-color: white;
  font-weight: 700;
  color: #666;
  z-index: 1000; }
  .custom-calendar table {
    border-spacing: 0;
    border-collapse: collapse; }
  .custom-calendar td, .custom-calendar th {
    padding: 0; }
  .custom-calendar .custom-select-block {
    font-weight: 400; }
    .custom-calendar .custom-select-block .value-field {
      text-align: left; }
  .custom-calendar .datepicker-header {
    padding: 15px 5px;
    background-color: #fbfbfb;
    display: table;
    width: 100%; }
    .custom-calendar .datepicker-header > span {
      display: table-cell;
      vertical-align: middle;
      width: 10px;
      padding: 0 8px; }
      .custom-calendar .datepicker-header > span .fa {
        pointer-events: none; }
      .custom-calendar .datepicker-header > span:not(.disabled) {
        cursor: pointer; }
        .custom-calendar .datepicker-header > span:not(.disabled):hover .fa {
          color: black; }
    .custom-calendar .datepicker-header .datepicker-title {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      padding: 0 13px; }
      .custom-calendar .datepicker-header .datepicker-title > div {
        width: 45%; }
        .custom-calendar .datepicker-header .datepicker-title > div select {
          width: 100%; }
      .custom-calendar .datepicker-header .datepicker-title .datepicker-month {
        float: left; }
      .custom-calendar .datepicker-header .datepicker-title .datepicker-year {
        float: right; }
  .custom-calendar .datepicker-calendar table {
    width: 100%; }
  .custom-calendar .datepicker-calendar .datepicker-week {
    border-color: #dbedeb;
    border-style: solid;
    border-width: 1px 0 1px 0; }
    .custom-calendar .datepicker-calendar .datepicker-week td {
      padding: 9px 0;
      text-align: center;
      font-size: 13px;
      text-transform: uppercase; }
  .custom-calendar .datepicker-calendar .datepicker-days {
    padding: 3px 0; }
    .custom-calendar .datepicker-calendar .datepicker-days td {
      width: 40px;
      height: 40px;
      text-align: center;
      font-size: 13px;
      color: #333;
      cursor: pointer; }
      .custom-calendar .datepicker-calendar .datepicker-days td.disabled {
        cursor: default;
        color: #999; }
        .custom-calendar .datepicker-calendar .datepicker-days td.disabled.current, .custom-calendar .datepicker-calendar .datepicker-days td.disabled.today {
          opacity: 0.5; }
      .custom-calendar .datepicker-calendar .datepicker-days td.today {
        outline: 1px solid #e95800; }
      .custom-calendar .datepicker-calendar .datepicker-days td.current {
        background-color: #e95800;
        color: white; }
        .custom-calendar .datepicker-calendar .datepicker-days td.current.hovering:not(.current):not(:hover) {
          opacity: 0.5; }
      .custom-calendar .datepicker-calendar .datepicker-days td.hover {
        background-color: #e95800;
        color: white; }
        .custom-calendar .datepicker-calendar .datepicker-days td.hover.hovering:not(.current):not(:hover) {
          opacity: 0.5; }
      .custom-calendar .datepicker-calendar .datepicker-days td.hovering {
        background-color: #e95800;
        color: white; }
        .custom-calendar .datepicker-calendar .datepicker-days td.hovering.hovering:not(.current):not(:hover) {
          opacity: 0.5; }

/*# sourceMappingURL=js-custom-datepicker.css.map*/