Weekly Schedule - Copy this React, Tailwind Component to your project
<div class="container mt 4"> <table class="table table hover table bordered"> <thead> <tr> <th class="text center">Nhân Viên</th> <th class="text center">Thứ 2</th> <th class="text center">Thứ 3</th> <th class="text center">Thứ 4</th> <th class="text center">Thứ 5</th> <th class="text center">Thứ 6</th> <th class="text center">Thứ 7</th> <th class="text center">Chủ nhật</th> </tr> </thead> <tbody> <tr id="dates row"> <td></td> <td class="text center">Ngày 1</td> <td class="text center">Ngày 2</td> <td class="text center">Ngày 3</td> <td class="text center">Ngày 4</td> <td class="text center">Ngày 5</td> <td class="text center">Ngày 6</td> <td class="text center">Ngày 7</td> </tr> <tr th:each="lichLamViec, i : ${lichLamViecs}" th:if="${lichLamViec.getNhanVien().getTrangThai() != false}"> <td class="text center"> <span class="ma nhan vien" th:value="${lichLamViec.nhanVien.idNhanVien}" th:text="${lichLamViec.nhanVien.maNhanVien}"></span> <br> <span class="ho ten nhan vien" th:text="${lichLamViec.nhanVien.hoTen}"></span> </td> <td class="btn container text center"> <button class="btn btn primary add shift btn" data nhanvien="${lichLamViec.nhanVien.idNhanVien}" data ngay="${#dates.format(lichLamViec.ngay, 'yyyy MM dd')}">Thêm ca</button> </td> <td class="btn container text center"> <button class="btn btn primary add shift btn" data nhanvien="${lichLamViec.nhanVien.idNhanVien}" data ngay="Ngày 2">Thêm ca</button> </td> <td class="btn container text center"> <button class="btn btn primary add shift btn" data nhanvien="${lichLamViec.nhanVien.idNhanVien}" data ngay="Ngày 3">Thêm ca</button> </td> <td class="btn container text center"> <button class="btn btn primary add shift btn" data nhanvien="${lichLamViec.nhanVien.idNhanVien}" data ngay="Ngày 4">Thêm ca</button> </td> <td class="btn container text center"> <button class="btn btn primary add shift btn" data nhanvien="${lichLamViec.nhanVien.idNhanVien}" data ngay="Ngày 5">Thêm ca</button> </td> <td class="btn container text center"> <button class="btn btn primary add shift btn" data nhanvien="${lichLamViec.nhanVien.idNhanVien}" data ngay="Ngày 6">Thêm ca</button> </td> <td class="btn container text center"> <button class="btn btn primary add shift btn" data nhanvien="${lichLamViec.nhanVien.idNhanVien}" data ngay="Ngày 7">Thêm ca</button> </td> </tr> </tbody> </table> </div> <! Modal > <div class="modal fade" id="addShiftModal" tabindex=" 1" aria labelledby="exampleModalLabel" aria hidden="true"> <div class="modal dialog"> <div class="modal content"> <div class="modal header"> <h5 class="modal title">Thêm ca làm</h5> <button type="button" class="btn close" data bs dismiss="modal" aria label="Close"></button> </div> <div class="modal body"> <form id="add shift form" action=""> <input type="text" name="nhanVien" id="idNhanVien"> <input type="date" name="ngay" id="idNgay"> <div class="col md 12 mb 3"> <div class="form group"> <label>Ca làm</label> <select name="caLamViec" class="form select"> <option value="" selected disabled>Chọn ca làm</option> <option th:each="caLamViec : ${caLamViecs}" th:value="${caLamViec.getMaCaLamViec()}" th:text="${caLamViec.getTenCaLamViec()}"></option> </select> </div> </div> <div class="col md 12 mb 3"> <div class="form group"> <label for="start time">Thời gian bắt đầu</label> <input type="datetime local" id="start time" name="startTime" class="form control"> </div> </div> <div class="col md 12 mb 3"> <div class="form group"> <label for="end time">Thời gian kết thúc</label> <input type="datetime local" id="end time" name="endTime" class="form control"> </div> </div> <div class="col md 12"> <button type="submit" class="btn btn success">Thêm</button> </div> </form> </div> <div class="modal footer"> <button type="button" class="btn btn secondary" data bs dismiss="modal">Đóng</button> </div> </div> </div> </div>
