Date Time Picker - Appointment Booker

by joplomacedo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<div id="app">

	<div class="day_time_picker">
		<div class="day_col">
			<div class="days_group_header">
				<div>
					Esta semana
				</div>
			</div>
			
			<div class="day_group">
				<div class="days_day">
					<div class="days_day_desc">
						<span class="days_week_day">Segunda</span>
						<span class="days_date">3 de Junho</span>
					</div>
					<span class="vagas vagas--negative">0 vagas</span>
				</div>
				<div class="days_day">
					<div class="days_day_desc">
						<span class="days_week_day">Terça</span>
						<span class="days_date">4 de Junho</span>
					</div>
					<span class="vagas vagas--positive">3 vagas</span>
				</div>
				<div class="days_day is-selected">
					<div class="days_day_desc">
						<span class="days_week_day">Quarta</span>
						<span class="days_date">5 de Junho</span>
					</div>
					<span class="vagas vagas--negative">0 vagas</span>
				</div>
				<div class="days_day">
					<div class="days_day_desc">
						<span class="days_week_day">Quinta</span>
						<span class="days_date">6 de Junho</span>
					</div>
					<span class="vagas vagas--negative">0 vagas</span>
				</div>
				<div class="days_day">
					<div class="days_day_desc">
						<span class="days_week_day">Sexta</span>
						<span class="days_date">7 de Junho</span>
					</div>
					<span class="vagas vagas--negative">0 vagas</span>
				</div>
			</div>
			
			<div class="days_group_header">
				<div>
					Próxima Semana
					<i class="fas fa-chevron-down"></i>
				</div>
			</div>
			
		</div>
		
		<div class="hours_col" >
			<div class="hours_group">
				<div class="hours_hour">
					<span class="hours_hours__start">09:00</span> <span class="hours_hours__end"> - 10:00</span>
				</div>
				<div class="hours_hour">
					<span class="hours_hours__start">10:00</span> <span class="hours_hours__end"> - 11:00</span>
				</div>
				<div...

CSS

*,
*:after,
*:before {
  box-sizing: border-box;
  font: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  outline: none;
  color: inherit;
  text-decoration: none;
}

ul,
ol,
li {
  list-style: none;
}

input,
select,
textarea {
  max-width: 100%;
}


#app {
	font-family: helveticaneue;
	-webkit-font-smoothing: antialiased;
}

.day_time_picker {
	display: flex;
	border: 1px solid;
}

.day_col {
	position: relative;
	margin-right: -1px;
	padding-left: 2em;
}


.days_group_header,
.days_day,
.hours_hour {
	padding: 1em 2em;
}

.days_group_header {
	font-weight: 800;
}

.days_day {
    display: flex;
    justify-content: space-between;
		align-items: flex-end;
		border-radius: 3px 0 0 3px;
}

.days_day.is-selected {
	border: 1px solid;
	border-right: 1px solid #fff;
}

.days_day_desc {
	position: relative;
	margin-right: 1em;
}

.vagas {
    background: #eee;
    padding: 1px 5px;
    font-size: .9em;
    border-radius: 14px;
    font-weight: 700;
}

.vagas--positive {
    background: #47ca47;
    color: #fff;
}

.days_week_day,
.days_date {
	display: block;
}

.days_week_day,
.hours_hours__end {
	color: #888;	
}


.hours_col {
	padding: 2em 1em;
	border-left: 1px solid;
}


.hours_hour {

}

Vue

var app = new Vue({
  el: "#app",
  data: {
	
	
	time_slot_groups: [
		{
			name: 'Manha',
			slots: [
				['9:00', '10:00'],
				['10:00', '11:00'],
				['11:00', '12:00'],
				['12:00', '13:00']
			]
		},
		
		{
			name: 'Tarde',
			slots: [
				['13:00', '14:00'],
				['14:00', '15:00'],
				['15:00', '16:00'],
				['16:00', '17:00'],
				['17:00', '18:00'],
				['18:00', '19:00'],
				['19:00', '20:00']
			]
		}
	],
	
  },
  computed: {

  },
  methods: {

  }
})