HTML
<div class="d-flex justify-content-between">
<h4>Atividades</h4>
<div class="d-flex gap-2 align-items-center">
<div class="tag-option-content">
<span class="tag-option tag-option-active">
Todas
</span>
<span class="tag-option">
<i class="fa-regular fa-envelope"></i>
Email
</span>
<span class="tag-option">
<i class="fa-regular fa-location-dot"></i>
Visita
</span>
<span class="tag-option">
<i class="fa-regular fa-phone"></i>
Ligação
</span>
<span class="tag-option">
<i class="fa-regular fa-clipboard-list"></i>
Proposta
</span>
<span class="tag-option">
<i class="fa-light fa-users"></i>
Atendimento
</span>
</div>
<button type="button" class="btn btn-default">
<i class="fa-light fa-plus me-2"></i>
Nova
</button>
</div>
<div id='calendar'></div>
</div>
Javascript
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pt-br',
initialView: 'timeGridWeek',
initialDate: '2023-08-21',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short'
},
buttonText: {
today: 'Hoje',
month: 'Mês',
week: 'Semana',
day: 'Dia'
},
titleFormat: {
year: 'numeric',
month: '2-digit',
day: '2-digit',
separator: ' a '
},
});
calendar.render();
});