Việt hóa Calendar: Thêm locale tiếng Việt cho header toolbar và view buttons

This commit is contained in:
tuanOts 2025-06-14 23:21:08 +07:00
parent 16400eef12
commit ad6106ff67
2 changed files with 30 additions and 16 deletions

View File

@ -317,7 +317,7 @@ const Calendar = () => {
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#add_event" data-bs-target="#add_event"
> >
Create Event Thêm sự kiện
</a> </a>
</div> </div>
</div> </div>
@ -327,35 +327,35 @@ const Calendar = () => {
<div className="calendar-sidebar"> <div className="calendar-sidebar">
<h4 className="card-title">🎯 Drag & Drop Events</h4> <h4 className="card-title">🎯 Drag & Drop Events</h4>
<div id="calendar-events" className="mb-3"> <div id="calendar-events" className="mb-3">
<div className="calendar-events" data-class="bg-primary"> <div className="calendar-events" data-class="bg-danger">
<i className="fas fa-circle" /> 👥 Team Meeting <i className="fas fa-circle" /> 👥 Họp
</div> </div>
<div className="calendar-events" data-class="bg-success"> <div className="calendar-events" data-class="bg-success">
<i className="fas fa-circle" /> 📊 Project Review <i className="fas fa-circle" /> Bóng đá
</div>
<div className="calendar-events" data-class="bg-warning">
<i className="fas fa-circle" /> 📞 Client Call
</div> </div>
<div className="calendar-events" data-class="bg-danger"> <div className="calendar-events" data-class="bg-danger">
<i className="fas fa-circle" /> 🎨 Design Workshop <i className="fas fa-circle" /> 🔑 Quan trọng
</div>
<div className="calendar-events" data-class="bg-success">
<i className="fas fa-circle" /> 🎨 Sáng tạo
</div> </div>
<div className="calendar-events" data-class="bg-info"> <div className="calendar-events" data-class="bg-info">
<i className="fas fa-circle" /> 💻 Code Review <i className="fas fa-circle" /> 🧑💼 Đi làm
</div> </div>
<div className="calendar-events" data-class="bg-secondary"> <div className="calendar-events" data-class="bg-secondary">
<i className="fas fa-circle" /> 🍽 Lunch Break <i className="fas fa-circle" /> 🍽 Ăn trưa
</div> </div>
<div className="calendar-events" data-class="bg-purple"> <div className="calendar-events" data-class="bg-purple">
<i className="fas fa-circle" /> 📚 Training Session <i className="fas fa-circle" /> 📚 Training Session
</div> </div>
<div className="calendar-events" data-class="bg-success"> <div className="calendar-events" data-class="bg-success">
<i className="fas fa-circle" /> 🏃 Sprint Planning <i className="fas fa-circle" /> 🏃 Gym
</div> </div>
<div className="calendar-events" data-class="bg-info"> <div className="calendar-events" data-class="bg-info">
<i className="fas fa-circle" /> 🔍 Bug Triage <i className="fas fa-circle" /> 🏸 Cầu lông
</div> </div>
<div className="calendar-events" data-class="bg-warning"> <div className="calendar-events" data-class="bg-primary">
<i className="fas fa-circle" /> Coffee Chat <i className="fas fa-circle" /> Cafe
</div> </div>
</div> </div>
<div className="checkbox mb-3"> <div className="checkbox mb-3">
@ -432,11 +432,25 @@ const Calendar = () => {
<FullCalendar <FullCalendar
ref={calendarRef} ref={calendarRef}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]} plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
locale="vi" // Set Vietnamese locale
headerToolbar={{ headerToolbar={{
left: "prev,next today", left: "prev,next today",
center: "title", center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay", right: "dayGridMonth,timeGridWeek,timeGridDay",
}} }}
buttonText={{
today: "Hôm nay",
month: "Tháng",
week: "Tuần",
day: "Ngày",
prev: "Trước",
next: "Sau"
}}
dayHeaderFormat={{ weekday: 'long' }}
titleFormat={{
year: 'numeric',
month: 'long'
}}
initialView="dayGridMonth" initialView="dayGridMonth"
editable={true} editable={true}
selectable={true} selectable={true}
@ -516,7 +530,7 @@ const Calendar = () => {
type="button" type="button"
className="btn btn-success save-event submit-btn" className="btn btn-success save-event submit-btn"
> >
Create event Thêm sự kiện
</button> </button>
<button <button
type="button" type="button"

View File

@ -86,7 +86,7 @@ const Content = () => {
className="feather-calendar" className="feather-calendar"
/> />
</span> </span>
<h3>Today</h3> <h3>Hôm nay</h3>
<h6>1</h6> <h6>1</h6>
</div> </div>
</div> </div>