calendar.css

.DayPicker {
  background: #28262e;
  border-radius: 10px;
}

.DayPicker-wrapper {
  padding-bottom: 0;
}

.DayPicker,
.DayPicker-Month {
  width: 100%;
}

.DayPicker-Month {
  border-collapse: separate;
  border-spacing: 8px;
  margin: 16px;
}

.DayPicker-Day {
  width: 40px;
  height: 40px;
}

.DayPicker-Day--available:not(.DayPicker-Day--outside) {
  background: #3e3b47;
  border-radius: 10px;
  color: #fff;
}

.DayPicker:not(.DayPicker--interactionDisabled)
  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
  background: ${shade(0.2, '#3e3b47')};
}

.DayPicker-Day--today {
  font-weight: normal;
}

.DayPicker-Day--disabled {
  color: #666360 !important;
  background: transparent !important;
}

.DayPicker-Day--selected {
  background: #ff9000 !important;
  border-radius: 10px;
  color: #232129 !important;
}

Versão com alguns ajustes extras pra tornar o calendário mais parecido com o do design no Figma

  .DayPicker {
    border-radius: 10px;
  }

  .DayPicker-wrapper {
    padding-bottom: 0;
    background: #3e3b47;
    border-radius: 10px;
  }

  .DayPicker,
  .DayPicker-Month {
    width: 100%;
  }

  .DayPicker-NavButton {
    color: #999591 !important;
  }

  .DayPicker-NavButton--prev {
    right: auto;
    left: 1.5em;
    margin-right: 0;
  }

  .DayPicker-Month {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 16px 0 0 0;
    padding: 16px;
    background-color: #28262e;
    border-radius: 0 0 10px 10px;
  }

  .DayPicker-Caption {
    margin-bottom: 1em;
    padding: 0 1em;
    color: #f4ede8;

    > div {
      text-align: center;
    }
  }

  .DayPicker-Day {
    width: 40px;
    height: 40px;
  }

  .DayPicker-Day--available:not(.DayPicker-Day--outside) {
    background: #3e3b47;
    border-radius: 10px;
    color: #fff;
  }

  .DayPicker:not(.DayPicker--interactionDisabled)
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
    background: ${shade(0.2, '#3e3b47')};
  }

  .DayPicker-Day--today {
    font-weight: normal;
  }

  .DayPicker-Day--disabled {
    color: #666360 !important;
    background: transparent !important;
  }

  .DayPicker-Day--selected {
    background: #ff9000 !important;
    border-radius: 10px;
    color: #232129 !important;
  }

Valeu @sethwololo!

Boa @sethwololo!

Muito bom, obrigado!

top. Obrigado

Boa @sethwololo, valeu!

Valeu, @sethwololo !

Thanks @sethwololo!

Show! Obrigado!

Boa! Ficou show @sethwololo

Atualizando a melhoria do @sethwololo:

Substituí a seta padrão pela do layout do figma e alterei a cor dos dias da semana pra ficar igual a dos dias desabilitados.

  .DayPicker {
    border-radius: 0.6rem;
  }

  .DayPicker-wrapper {
    padding-bottom: 0;
    background: #3e3b47;
    border-radius: 0.6rem;
  }

  .DayPicker,
  .DayPicker-Month {
    width: 100%;
  }

  .DayPicker-NavButton {
    color: #999591 !important;
  }

  .DayPicker-NavButton--prev {
    background: url(${ArrowLeftIcon}) no-repeat center;
    right: auto;
    left: 1.5em;
    margin-right: 0;
  }

  .DayPicker-NavButton--next {
    background: url(${ArrowRightIcon}) no-repeat center;
  }

  .DayPicker-Month {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 1rem 0 0 0;
    padding: 16px;
    background-color: #28262e;
    border-radius: 0 0 10px 10px;
  }

  .DayPicker-Caption {
    margin-bottom: 1rem;
    padding: 0 1rem;
    color: #f4ede8;

    > div {
      text-align: center;
    }
  }

  .DayPicker-Weekday {
    color: #666360;
  }

  .DayPicker-Day {
    width: 2.5rem;
    height: 2.5rem;
  }

  .DayPicker-Day--available:not(.DayPicker-Day--outside) {
    background: #3e3b47;
    border-radius: 0.6rem;
  }

  .DayPicker:not(.DayPicker--interactionDisabled)
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
    background: ${shade(0.2, '#3e3b47')};
  }

  .DayPicker-Day--today {
    font-weight: normal;
    color: #fff;
  }

  .DayPicker-Day--disabled {
    color: #666360;
    background: transparent !important;
  }

  .DayPicker-Day--selected {
    background: #ff9000 !important;
    border-radius: 0.6rem;
    color: #232129 !important;
  }

Atualizando a melhoria do @sethwololo:

Substituí a seta padrão pela do layout do figma e alterei a cor dos dias da semana pra ficar igual a dos dias desabilitados.

@lorenasg1 faltou os import das setas

Atualizando a resposta da @lorenasg1.
Para baixar os SVG (import que estão faltando, basta ir no Figma do GoBarber e exportar as setas em formato SVG e por o mesmo nome dos imports do código dela).
Para baixar diretamente basta clicar aqui e extrair os svg's.

Depois de baixado, basta colocar os svg's na pasta de assets e fazer os imports no css.

import ArrowLeftIcon from '../../assets/ArrowLeftIcon.svg'; import ArrowRightIcon from '../../assets/ArrowRightIcon.svg';

Boa galera, que demais!

Como tá tudo em EM, só faltou colocar um font-size: 16px no .DayPicker. Aí fica show.

.DayPicker {
    border-radius: 10px;
    font-size: 16px;
}

Valeu galera, ficou top!

Boaaaa!

Valeu d+++!

Muito bom!

Arrasaram!

Muito bom!!

@sethwololo @lorenasg1 @AdSoNaTuRaL
Muito bom pessoal valeu!

Caraca, muito bom pessoal! Muito obrigado mesmo! Ficou TOP

A alterações ficaram muito massa!!

Segue mais uma melhoria com alguns ajustes e incluindo o background do header, aproveitando o código já feito pelos colegas:

.DayPicker {
  border-radius: 10px;

  &-wrapper {
    padding-bottom: 0;
    background: #28262e;
    border-radius: 10px;
    z-index: 0;
  }

  &-NavBar {
    position: relative;

    ::before {
      content: '';
      width: 100%;
      height: 50px;
      position: absolute;
      background: #3e3b47;
      border-radius: 10px 10px 0 0;
      z-index: -1;
    }
  }

  &-NavButton {
    color: #999591 !important;
    margin-top: 0;
    top: 0;

    &--prev {
      background: url(${ArrowLeftIcon}) no-repeat center;
      margin-right: 0;
      left: 12px;
      width: 50px;
      height: 50px;
    }

    &--next {
      background: url(${ArrowRightIcon}) no-repeat center;
      right: 12px;
      width: 50px;
      height: 50px;
    }
  }

  &-Month {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 0;
    padding: 0 10px 10px;
  }

  &-Caption {
    line-height: 50px;
    color: #f4ede8;

    > div {
      text-align: center;
    }
  }

  &-Weekday {
    color: #666360;
    font-size: 16px;
  }

  &-Day {
    width: 40px;
    height: 40px;
    transition: all 0.2s ease;
    border-radius: 10px;

    &--today {
      font-weight: normal;
      color: #fff;
    }

    &--available:not(.DayPicker-Day--outside) {
      background: #3e3b47;
      border-radius: 10px;
    }

    &--disabled {
      color: #666360;
      background: transparent !important;
    }

    &--selected:not(.DayPicker-Day--disabled) {
      background: #ff9000 !important;
      color: #232129 !important;
    }
  }

  &:not(.DayPicker--interactionDisabled)
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
    background: ${shade(0.2, '#3e3b47')};
  }
}

Mitaram!

Vocês são ninjas do css mesmo em.. kakaka, Show de bola pessoal , valeu demais !

Value pelas atualizações no css.
@sethwololo, @lorenasg1, @adeonir mitaram de verdade.

Ficou muito bom galera! Ficaram top as alterações

Muito legal pessoal, parabéns pelo trampo