Bạn đã bao giờ nhìn thấy lịch trên một trang web và nghĩ, làm thế quái nào mà họ làm được như vậy? . Hãy làm một với nhau
Tôi đã thiết lập một bản demo tại CodeSandbox để bạn có thể thấy những gì chúng tôi đang hướng tới
Xem bản trình diễn
Trước tiên, hãy xác định một số yêu cầu đối với những gì lịch nên làm. nó nên
- Hiển thị lưới tháng cho một tháng nhất định
- Hiển thị ngày từ tháng trước và tháng tiếp theo để lưới luôn đầy
- Cho biết ngày hiện tại
- Hiển thị tên của tháng hiện được chọn
- Điều hướng đến tháng trước và tháng tiếp theo
- Cho phép người dùng điều hướng trở lại tháng hiện tại chỉ bằng một cú nhấp chuột
Ồ, và chúng tôi sẽ xây dựng ứng dụng này dưới dạng một ứng dụng trang tìm nạp các ngày theo lịch từ Ngày. js, một thư viện tiện ích siêu nhẹ
Chúng tôi sẽ ngại chọn một khuôn khổ cụ thể để giữ cho mọi thứ dễ dàng. Đối với thiết lập này, tôi đang sử dụng Parcel để quản lý gói để tôi có thể viết bằng Babel, sắp xếp mọi thứ và quản lý phần phụ thuộc duy nhất cho dự án. Kiểm tra tệp
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Bước 1. Bắt đầu với đánh dấu và kiểu cơ bản
Hãy bắt đầu với việc tạo một mẫu cơ bản cho lịch của chúng ta. Điều này không cần phải là bất cứ điều gì lạ mắt. Nhưng nó cũng nên được thực hiện mà không cần dùng đến bảng
Chúng ta có thể phác thảo đánh dấu của mình thành ba lớp nơi chúng ta có
- Một phần cho tiêu đề lịch. Điều này sẽ hiển thị tháng hiện được chọn và các yếu tố chịu trách nhiệm phân trang giữa các tháng
- Một phần cho tiêu đề lưới lịch. Một lần nữa, chúng tôi không tiếp cận các bảng biểu mẫu, nhưng đây sẽ giống như một tiêu đề bảng chứa danh sách chứa các ngày trong tuần, bắt đầu từ Thứ Hai
- lưới lịch. Bạn biết đấy, mỗi ngày trong tháng hiện tại, được biểu thị bằng một ô vuông trong lưới
Hãy viết điều này vào một tệp có tên là
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}
document.getElementById["app"].innerHTML = `
July 2020
- Mon
...
- Sun
-
1
...
29
`;Hãy tiếp tục và nhập tệp này vào tệp
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}
Parcel Sandbox
Bây giờ chúng ta có một số đánh dấu để làm việc, hãy tạo phong cách cho nó một chút để chúng ta có một hình ảnh đẹp để bắt đầu. Cụ thể, chúng tôi sẽ
- Định vị các phần tử bằng flexbox
- Tạo khung lịch bằng lưới CSS
- Định vị các nhãn trong các ô
Đầu tiên, hãy tạo một phong cách mới. css trong cùng thư mục
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Phần quan trọng thiết lập lưới của chúng tôi là đây
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Lưu ý rằng cả tiêu đề lưới lịch và bản thân lưới lịch đều đang sử dụng lưới CSS để bố trí mọi thứ. Chúng tôi biết sẽ luôn có bảy ngày trong một tuần, vì vậy điều đó cho phép chúng tôi sử dụng hàm
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Chúng ta cần kết nối các kiểu này với phần đánh dấu, vì vậy hãy thêm phần này vào đầu tệp
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Đây là một điểm tốt để dừng lại và xem những gì chúng tôi có cho đến nay
Xem bản trình diễn
Bước 2. Thiết lập lịch tháng hiện tại
Như bạn có thể nhận thấy, hiện tại mẫu chỉ chứa dữ liệu tĩnh. Tháng được mã hóa cứng là tháng 7 và số ngày cũng được mã hóa cứng. Đó là nơi Ngày. js đi vào chơi. Nó cung cấp tất cả dữ liệu chúng tôi cần để sắp xếp đúng ngày vào đúng ngày trong tuần cho một tháng nhất định bằng cách sử dụng dữ liệu lịch thực. Nó cho phép chúng tôi lấy và đặt bất kỳ thứ gì từ ngày bắt đầu của một tháng đến tất cả các tùy chọn định dạng ngày mà chúng tôi cần để hiển thị dữ liệu
Chúng tôi sẽ
- Nhận tháng hiện tại
- Tính toán nơi các ngày nên được đặt [các ngày trong tuần]
- Tính ngày để hiển thị ngày từ tháng trước và tháng tiếp theo
- Đặt tất cả các ngày lại với nhau trong một mảng
Đầu tiên, chúng ta cần nhập Ngày. js và xóa tất cả HTML tĩnh [tháng, ngày trong tuần và ngày đã chọn]. Chúng tôi sẽ làm điều đó bằng cách thêm tệp này vào tệp
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Chúng tôi cũng sẽ dựa vào một vài Ngày. plugin js để được trợ giúp. WeekDay giúp chúng ta thiết lập ngày đầu tuần. Một số thích chủ nhật là ngày đầu tuần. khác thích thứ hai. Heck, trong một số trường hợp, thật hợp lý khi bắt đầu với thứ Sáu. Chúng ta sẽ bắt đầu với thứ Hai
Plugin weekOfYear trả về giá trị số cho tuần hiện tại trong số tất cả các tuần trong năm. Có 52 tuần trong một năm, vì vậy chúng tôi muốn nói rằng tuần bắt đầu từ ngày 1 tháng 1 là tuần đầu tiên của năm, v.v.
Vì vậy, đây là những gì chúng tôi đưa vào
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Sau khi chúng tôi loại bỏ các giá trị lịch được ghi cứng, Đây là những gì chúng tôi có trong
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Bây giờ hãy thiết lập một vài hằng số. Cụ thể, chúng tôi muốn xây dựng một mảng ngày trong tuần [i. e. Thứ hai, thứ ba, thứ tư, v.v. ]
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Sau đó, chúng tôi muốn lấy năm hiện tại và đặt ở định dạng
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Và chúng tôi muốn đặt tháng hiện tại làm điểm bắt đầu khi tải lịch lần đầu, trong đó
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}
Parcel Sandbox
Hãy bắt đầu và điền vào tiêu đề lưới lịch của chúng ta các ngày trong tuần. Trước tiên, chúng tôi lấy phần tử thích hợp [________ 170], sau đó chúng tôi lặp qua mảng ________ 171 của mình, tạo phần tử mục danh sách cho từng mục trong mảng trong khi đặt tên cho từng mục
Parcel Sandbox
Bước 3. Tạo lưới lịch
Điều đó khá đơn giản nhưng bây giờ niềm vui thực sự mới bắt đầu khi chúng ta sẽ chơi với lưới lịch. Hãy dừng lại một chút và suy nghĩ xem chúng ta thực sự cần làm gì để đạt được điều đó
Đầu tiên, chúng tôi muốn số ngày nằm trong các cột ngày trong tuần chính xác. Ví dụ: ngày 1 tháng 7 năm 2020 là Thứ Tư. Đó là nơi bắt đầu đánh số ngày
Nếu ngày đầu tiên của tháng rơi vào Thứ Tư, thì điều đó có nghĩa là chúng tôi sẽ có các mục lưới trống cho Thứ Hai và Thứ Ba trong tuần đầu tiên. Ngày cuối cùng của tháng là ngày 31 tháng 7, rơi vào thứ sáu. Điều đó có nghĩa là thứ bảy và chủ nhật sẽ trống trong tuần cuối cùng của lưới điện. Chúng tôi đã điền vào những ngày đó bằng các ngày cuối và đầu của tháng trước và tháng tiếp theo, tương ứng, để lưới lịch luôn đầy
Tạo ngày cho tháng hiện tại
Để thêm các ngày của tháng hiện tại vào lưới, chúng ta cần biết có bao nhiêu ngày tồn tại trong tháng hiện tại. Chúng tôi có thể nhận được điều đó bằng cách sử dụng phương pháp được cung cấp bởi Day. js. Hãy tạo một phương thức trợ giúp cho điều đó
Parcel Sandbox
Khi biết điều đó, chúng ta tạo một mảng trống có độ dài bằng số ngày của tháng hiện tại. Sau đó, chúng tôi
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Tuy nhiên, trong ví dụ này, chúng tôi cần một thuộc tính
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}
Parcel Sandbox
Thêm ngày từ tháng trước vào lưới lịch
Để lấy ngày từ tháng trước hiển thị trong tháng hiện tại, chúng ta cần kiểm tra ngày trong tuần của ngày đầu tiên trong tháng đã chọn là thứ mấy. Đó là nơi chúng ta có thể sử dụng plugin WeekDay cho Ngày. js. Hãy tạo một phương thức trợ giúp cho điều đó
Parcel Sandbox
Sau đó, dựa vào đó, ta cần kiểm tra xem ngày thứ Hai cuối cùng của tháng trước là ngày nào. Chúng tôi cần giá trị đó để biết có bao nhiêu ngày từ tháng trước sẽ hiển thị trong chế độ xem tháng hiện tại. Chúng tôi có thể nhận được điều đó bằng cách trừ đi giá trị ngày trong tuần từ ngày đầu tiên của tháng hiện tại. Ví dụ, nếu ngày đầu tiên của tháng là thứ Tư, chúng ta cần trừ 3 ngày để có thứ Hai cuối cùng của tháng trước. Có giá trị đó cho phép chúng tôi tạo một mảng các đối tượng ngày bắt đầu từ thứ Hai cuối cùng của tháng trước cho đến cuối tháng đó
Parcel Sandbox
Thêm ngày từ tháng tiếp theo vào lưới lịch
Bây giờ, hãy làm ngược lại và tính toán những ngày chúng ta cần từ tháng tiếp theo để điền vào lưới cho tháng hiện tại. May mắn thay, chúng ta có thể sử dụng cùng một trình trợ giúp mà chúng ta vừa tạo để tính tháng trước. Sự khác biệt là chúng tôi sẽ tính toán số ngày từ tháng tiếp theo sẽ hiển thị bằng cách trừ giá trị số của ngày trong tuần đó từ 7
Vì vậy, ví dụ, nếu ngày cuối cùng của tháng là thứ bảy, chúng ta cần trừ 1 ngày từ 7 để xây dựng một mảng các ngày cần thiết cho tháng tiếp theo [Chủ nhật]
Parcel Sandbox
OK, chúng tôi biết cách tạo tất cả các ngày chúng tôi cần, hãy sử dụng các phương pháp chúng tôi vừa tạo và sau đó hợp nhất tất cả các ngày thành một mảng duy nhất gồm tất cả các ngày chúng tôi muốn hiển thị trong tháng hiện tại, bao gồm cả các ngày bổ sung từ tháng trước và tháng tiếp theo
Parcel Sandbox
Đây là tất cả những gì chúng ta vừa đề cập trong
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}
Parcel Sandbox
Xem bản trình diễn
Bước 4. Hiển thị ngày theo lịch
OK, vậy là chúng ta đã có đánh dấu cơ bản cho lịch của mình, dữ liệu chúng ta cần để hiển thị ngày từ tháng hiện tại, cộng với ngày từ tháng trước và tháng tiếp theo để điền vào các mục lưới trống. Bây giờ chúng ta cần thêm ngày vào lịch
Chúng tôi đã có một vùng chứa cho lưới lịch,
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}
Parcel Sandbox
Bây giờ, hãy tạo một chức năng sẽ thêm một ngày vào chế độ xem lịch của chúng ta
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Lưu ý rằng chúng tôi đang kiểm tra các ngày đến từ tháng trước và tháng tiếp theo để chúng tôi có thể thêm một lớp để tạo kiểu cho chúng khác với các ngày trong tháng hiện tại
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Đó là nó. Lịch của chúng tôi bây giờ sẽ trông như chúng tôi muốn
Xem bản trình diễn
Bước 5. Chọn tháng hiện tại
Những gì chúng tôi có cho đến nay là khá tốt, nhưng chúng tôi muốn người dùng có thể phân trang từ tháng này sang tháng khác và ngược lại theo thời gian, bắt đầu từ tháng hiện tại. Chúng tôi có hầu hết logic, vì vậy tất cả những gì chúng tôi thực sự cần làm là thêm một trình nghe
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Trước khi chúng tôi bắt đầu, hãy xác định các biến cho các ngày trong tháng hiện tại, tháng trước và tháng tiếp theo để chúng tôi có thể tham chiếu chúng trong suốt mã
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Bây giờ, hãy tạo một phương thức chịu trách nhiệm tính lại ngày theo lịch và hiển thị lại lịch khi phân trang sang tháng khác. Chúng ta sẽ gọi hàm đó là
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Phương thức sẽ thay thế nội dung tiêu đề để luôn hiển thị nhãn tháng đã chọn
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Sau đó, nó sẽ lấy vùng chứa ngày theo lịch và xóa tất cả các ngày hiện có
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Khi lịch bị xóa, nó sẽ tính toán các ngày mới sẽ được hiển thị bằng các phương pháp chúng tôi đã tạo trước đó
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Và cuối cùng, nó sẽ thêm một phần tử ngày cho mỗi ngày
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Có một phần logic vẫn còn thiếu. một phương pháp
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Bây giờ chúng ta có thể sử dụng lại logic đó khi chúng ta muốn thay đổi tháng. Nhớ lại bước đầu tiên khi chúng ta tạo một mẫu tĩnh cho thành phần của mình. Chúng tôi đã thêm các yếu tố này
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Đây là các điều khiển để phân trang giữa các tháng. Để thay đổi nó, chúng tôi cần lưu trữ tháng hiện được chọn. Hãy tạo một biến để theo dõi đó là gì và đặt giá trị ban đầu của nó thành tháng hiện tại
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Bây giờ, để bộ chọn hoạt động, chúng ta cần một chút JavaScript. Để làm cho nó dễ đọc hơn, chúng tôi sẽ tạo một phương thức khác có tên là
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Đó là nó. Lịch của chúng tôi đã sẵn sàng. Mặc dù điều đó thật tuyệt và tất cả, nhưng sẽ còn tuyệt hơn nữa nếu chúng ta có thể đánh dấu ngày hiện tại để nó nổi bật so với phần còn lại. Điều đó không nên rất khó khăn. Chúng tôi đã có những ngày tạo kiểu tóc không nằm trong tháng đã chọn, vì vậy hãy làm điều tương tự với điều đó
Chúng tôi sẽ tạo một biến được đặt cho ngày hôm nay
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}Sau đó, trong phương thức
.day-of-week,
.days-grid {
/* 7 equal columns for weekdays and days cells */
display: grid;
grid-template-columns: repeat[7, 1fr];
}