tự viết calendar
/* mình giới hạn chiều rộng calendar, bạn xóa max-width này đi nghen */
#calendar{
max-width: 500px;
}
/* css cho calendar */
.calendar{
display: block
}
.calendar__body{
display: block
}
.calendar__row{
display: flex;
}
.calendar__cell{
flex: 1;
padding: 10px;
background-color: #ccc;
border: 1px solid #f2f2f2;
}
.calendar__header-top{
display: flex;
justify-content: space-between;
}
.calendar__header-top button{
background-color: #0d6efd;
color: #fff;
border: 2px solid #0d6efd;
text-decoration: null;
white-space: normal;
word-wrap: break-word;
cursor: pointer;
user-select: none;
padding: .375rem .75rem;
margin: .375rem;
-webkit-border-radius: .125rem;
border-radius: .125rem;
}
.calendar__cell-disable{
background-color: #0d6efd;
opacity: 0.4;
}
.calendar__cell-sun{
background-color: #e180ee;
}
.calendar__cell-sat{
background-color: #96ee80;
}
.calendar__cell-today{
background-color: #a1b1f8;
}
var calendar = new Calendar[]
calendar.setElementDraw["calendar"]
calendar.draw[]
function Calendar[]{
this.today = new Date[]
this.currentDate = this.today.getDate[]
this.currentMonth = this.today.getMonth[]
this.currentYear = this.today.getFullYear[]
/// tạm thời chưa dùng tới nhưng cứ khởi tạo trước 2 biến LABEL_MONTH, LABEL_DATE
/// để hàm createBodyCalendar sẽ dùng sau này
this.LABEL_MONTH = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
this.LABEL_DATE = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
/// tạo 2 biến này để xác định tháng và năm mình sẽ lấy làm mốc để vẽ
this.selectYear = this.currentYear
this.selectMonth = this.currentMonth
this.idElementDraw = null
this.setElementDraw = function[_idElementDraw]{
this.idElementDraw = _idElementDraw
}
this.checkToday = function[_date]{
return _date === this.currentDate &&
this.selectYear === this.currentYear &&
this.selectMonth === this.currentMonth
}
this.checkSunDay = function[_date]{
var theDateLoop = new Date[ this.selectYear, this.selectMonth, _date ]
return theDateLoop.getDay[] == 0
}
this.checkSatDay = function[_date]{
var theDateLoop = new Date[ this.selectYear, this.selectMonth, _date ]
return theDateLoop.getDay[] == 6
}
/// function này sẽ tạo dom calendar dựa vào month, year được truyền vào
this.draw = function []{
var month = this.selectMonth
var year = this.selectYear
/// tạo thẻ cha bao calendar
var calendar = document.createElement["div"]
calendar.className = 'calendar'
/// tạo header
var headCalendar = this.createHeader[]
/// thêm header calendar dom vào calendar chính
calendar.appendChild[headCalendar]
/// tạo thân calendar
var bodyCalendar = this.createBody[]
calendar.appendChild[bodyCalendar]
//// cuối cùng thêm vào dom html của page
if[this.idElementDraw]{
document.getElementById[this.idElementDraw].innerHTML = ''
document.getElementById[this.idElementDraw].appendChild[calendar]
}
}
/**
* function này để tạo phần header cho calendar có cái nút next và prev
* để biết next là qua tháng nào năm nào chúng ta cần truyền vào biến month và year
*/
this.createHeader = function []{
var _instance = this
var month = this.selectMonth
var year = this.selectYear
//// tạm thời return ra cái dom có cái text header
var header = document.createElement["div"]
header.className = 'calendar__header'
/// bắt đầu tạo phần nut next, pre
var headingTop = document.createElement["div"]
headingTop.className = "calendar__header-top"
/// next
var prev = document.createElement["button"]
prev.innerText = "prev"
prev. title = this.prevMonth.bind[this]
headingTop.appendChild[prev]
/// year index
var yearIndex = document.createElement["span"]
yearIndex.innerText = `Tháng ${this.selectMonth + 1} năm ${this.selectYear}`
headingTop.appendChild[yearIndex]
/// next
var next = document.createElement["button"]
next.innerText = "next"
next. title = this.nextMonth.bind[this]
headingTop.appendChild[next]
header.appendChild[headingTop]
/// bắt đầu tạo phần label thứ 2, thứ 3, thứ 4, thứ 5 ....
var titleDays = document.createElement["div"]
titleDays.className = "calendar__row calendar__row-head"
for[var head = 0; head < this.LABEL_DATE.length; head++]{
var thead = document.createElement["div"]
thead.className = "calendar__cell calendar__cell-head"
thead.innerHTML = this.LABEL_DATE[head]
titleDays.appendChild[thead]
}
header.appendChild[titleDays]
/// kết thúc tạo phần label
return header
}
// check how many days in a month
this.daysInMonth = function[iMonth, iYear] {
return 32 - new Date[iYear, iMonth, 32].getDate[];
}
this.nextMonth = function []{
var indexDate = new Date[this.selectYear, this.selectMonth + 1, 1 ]
/// selectMonth là ban đầu đã có rồi, giờ chỉ cần set lại thôi
this.selectMonth = indexDate.getMonth[]
this.selectYear = indexDate.getFullYear[]
this.draw[]
}
this.prevMonth = function []{
var indexDate = new Date[this.selectYear, this.selectMonth - 1, 1 ]
/// selectMonth là ban đầu đã có rồi, giờ chỉ cần set lại thôi
this.selectMonth = indexDate.getMonth[]
this.selectYear = indexDate.getFullYear[]
this.draw[]
}
/**
* function này để tạo phần cell cho calendar quan trọng nhất
* để biết chúng ta vẽ calendar cho tháng năm nào cần truyền vào biến month và year
*/
this.createBody = function []{
var month = this.selectMonth
var year = this.selectYear
var body = document.createElement["div"]
body.className = 'calendar__body'
// creating all cells
var dateLoop = 1;
var dateAfterMonth = 1; /// biểu thị cho ngày của tháng sau
// tạo cells, 1 tháng có 6 dòng
for [let i = 0; i < 6; i++] {
// tạo 1 div bọc các ngày trong 1 tuần lại [ nếu bạn vẽ bằng table thì đây là thẻ tr]
var row = document.createElement["div"]
row.className = "calendar__row"
// trong 1 tuần luôn có 7 ngày [ nếu bạn vẽ bằng table thì đây là thẻ td ]
for [let j = 0; j < 7; j++] {
/// hàm xác định thứ đầu tiên của tháng.
/// cái này rất quan trọng trong việc vẽ calendar
/// vì bạn cần xác định calendar này được vẽ vào thứ mấy sau đó bạn for cho hết tháng
var firstDay = [new Date[year, month]].getDay[]
/// tạo cell [ ô ]
var cell = document.createElement["div"]
cell.className = "calendar__cell"
if [i === 0 && j < firstDay] {
/// back về tháng trước
cell. title = this.prevMonth.bind[this]
/// ngày của tháng trước [ kiểu như disable đi ]
/// cell disable before
cell.classList.add["calendar__cell-disable"]
var dateDisable = new Date[this.selectYear, this.selectMonth, 1]
dateDisable.setDate[dateDisable.getDate[] - firstDay + j ]
cell.innerText = dateDisable.getDate[]
}
else if [dateLoop > this.daysInMonth[month, year]] {
cell. title = this.nextMonth.bind[this]
//// ngày của tháng sau [ kiểu như disable đi ]
cell.classList.add["calendar__cell-disable"]
cell.innerText = dateAfterMonth
dateAfterMonth++
}
else {
cell.innerText = dateLoop
// color today's date
if[this.checkToday[dateLoop]]{
cell.classList.add["calendar__cell-today"]
}
// color sunday
if[this.checkSunDay[dateLoop]]{
cell.classList.add["calendar__cell-sun"]
}
// color satDay
if[this.checkSatDay[dateLoop]]{
cell.classList.add["calendar__cell-sat"]
}
dateLoop++;
}
row.appendChild[cell]
}
// appending each row into calendar body.
body.appendChild[row]
}
return body
}
}