56 lines
1.6 KiB
JavaScript
56 lines
1.6 KiB
JavaScript
import FullCalendar from "@fullcalendar/react";
|
|
import dayGridPlugin from "@fullcalendar/daygrid";
|
|
import timeGridPlugin from "@fullcalendar/timegrid";
|
|
import interactionPlugin from "@fullcalendar/interaction";
|
|
import ptBrLocale from "@fullcalendar/core/locales/pt-br";
|
|
|
|
function DoctorCalendar() {
|
|
return (
|
|
<div className="doctor-calendar-container">
|
|
<h2 className="calendar-title">Calendário do Médico</h2>
|
|
<div className="calendar-wrapper">
|
|
<FullCalendar
|
|
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
|
initialView={"dayGridMonth"}
|
|
locale={ptBrLocale}
|
|
headerToolbar={{
|
|
start: "today prev,next",
|
|
center: "title",
|
|
end: "dayGridMonth,timeGridWeek,timeGridDay",
|
|
}}
|
|
height="auto"
|
|
/>
|
|
</div>
|
|
|
|
{/* CSS inline para centralizar */}
|
|
<style jsx>{`
|
|
.doctor-calendar-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* centraliza horizontal */
|
|
justify-content: center; /* centraliza vertical se precisar */
|
|
width: 100%;
|
|
padding: 20px;
|
|
}
|
|
|
|
.calendar-title {
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.calendar-wrapper {
|
|
max-width: 900px; /* largura máxima do calendário */
|
|
width: 100%;
|
|
background: #fff;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DoctorCalendar;
|
|
|