Mẹo hay giúp bạn lên một kế hoahcj hoàn hảo

Làm event calendar không dùng thư viện

Hiện nay có rất nhiều thư viện làm event calendar. Nhưng kèm theo việc sử dụng thư viện là web bạn sẽ ảnh hưởng tới tốc độ load web. Thư viện không trình bày đúng theo ý của bạn và bạn phải vào source thư viện để chỉnh sửa. Điều đó khả thi đó nhưng nếu bạn không chỉnh sửa được thư viện thì bài viết này thật sự hữu ích cho bạn. Trong bài viết này mình sẽ hướng dẫn các bạn có thể tự làm một event calendar theo đúng ý của các bạn.

=>> Xem thêm tại: https://bit.ly/2NnZE5y
Lên khung sườn event
Trước tiên mình sẽ tạo một object event trong đó kèm theo ngày xảy ra sự kiện và cùng với title trong event. Mình có 2 object ngày trên event. Thật ra mình có hàm để tính ra object này với input đầu vào date bất kỳ. Nhưng với bài chia sẻ này mình sẽ không show hàm đó và lấy ví dụ từ một object nhất định.

dayOne ={day: 9,month:6,year: 2020,Day: 2};
var dayTwo ={day: 8,month: 7,year: 2020,Day: 3};
Sau đó mình tạo thêm một array object event cùng với title kèm theo cũng event:

var events = [{'Date': dayOne, 'Title': '<i class="fas fa-birthday-cake"></i>'},{'Date': dayTwo, 'Title': '<i class="fas fa-birthday-cake"></i>'}]
Vậy là bước đầu tạo event đã xong bây giờ chúng ta cùng đi sang bước tiếp theo. Sẽ là bước hardcore nhất )) Nhưng không sao mình sẽ cùng các bạn giải quyết.

Thêm Javascript vào event calendar in khung lịch và event đầu tiên
Trước nhất mình sẽ DOM tới thẻ div mà mình muốn đặt event calendar(tạo một array dayData do hàm lấy ngày trả về Thứ là số.):
var dayData=['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];var showCalendar = document.querySelector('.calendar');

Sau đó từ array dayData mình dùng JavaScript in các thứ trong tuần lên giao diện:

dayData.forEach((dayItem) => {showCalendar.innerHTML += `<div class="calendar__label calendar_item">${dayItem}</div>`;});
Sau đó mình thêm tí css :

.calendar.calendar__label.calendar_item{background:#fa587d;color:#fff}.calendar.calendar_item{display:flex;flex:0 0 14.27%;max-width:14.27%;width:100%;height:53px;border-right:1px solid #dadada;line-height:53px;text-align:center;border:1px solid #dadada;justify-content:space-evenly}.calendar.calendar_item:hover{background:#feedf1}.calendar.calendar__label.calendar_item:hover{background:#fa587d}.calendar__btn{text-align:center}.calendar__btn button{margin:0 25px;padding:8px 10px;font-size:15px;-webkit-appearance:none;-moz-appearance:none;background:#fa587d;border:2px solid #fa587d;border-radius:0;color:#fff;cursor:pointer;display:inline-block;letter-spacing:.0333em;line-height:1.25;opacity:1;text-align:center;text-decoration:none;text-transform:uppercase;transition:all .15s linear;text-transform:uppercase;display:none}
Và đây là kết quả:

Sau khi đã in được các thứ trong tuần chúng ta sẽ in khung lịch ra ngoài giao diện. Mình muốn trang lịch này trang đầu có 49 ô lịch, trang sau có 42 trang và chỉ hiện được từ 1 tới 2 trang lịch. Mình viết đoạn script như sau: