Bạn đang tìm kiếm một Lịch nhẹ, Năng động và không phụ thuộc trong Javascript?
Đó là một lịch thiết kế sáng tạo, dễ dàng tùy chỉnh. Đó là lý do tại sao Chúng tôi đã tùy chỉnh một chút để làm cho nó đẹp hơn
Với sự trợ giúp của CSS, Bạn có thể thay đổi toàn bộ thiết kế của nó và làm cho nó hoàn hảo theo nhu cầu thiết kế web của bạn
Bạn có thể nghĩ về đáp ứng, phải không?
Nó được tích hợp sẵn bốn bản dịch ngôn ngữ khác nhau và hỗ trợ bố cục RTL cho các ngôn ngữ được viết từ phải sang trái [như tiếng Ả Rập, tiếng Urdu, tiếng Do Thái, v.v.]
Cách tạo Lịch động trong Javascript
Để đặt lịch làm việc trên website của bạn, Bạn cần tải mã nguồn
Tiếp theo, Bạn cần thêm cả tệp CSS và tệp Javascript vào trang web của mình
Tiếp theo, đánh dấu HTML Rất dễ dàng và chỉ cần xác định một div với tên lớp hello-week. Để hiển thị tuần và tháng, chúng tôi sẽ đặt hai div khác
Cuối cùng, chúng tôi sẽ Khởi tạo lịch với cài đặt mặc định
new HelloWeek[];
Tùy chọn lịch Javascript
Plugin đi kèm với một vài cài đặt tùy chọn cho phép bạn dễ dàng tùy chỉnh nó. Bạn có thể thay đổi cài đặt bằng cách chuyển một đối tượng làm đối số
Lịch HTML động
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
JavaScripted Dynamic HTML Table
Month at a Glance [Dynamic HTML]
SunMonTueWed
ThuFriSat
Ví dụ liên quan trong cùng thể loại
Mọi nhà phát triển đều cần các yếu tố hiện đại và sạch sẽ để phát triển trang web của họ, Nó chứa hình ảnh và thành phần giao diện người dùng trong trang web. Phần quan trọng nhất và phần đầu tiên mà người dùng nhìn thấy khi người dùng vào trang web. Cách tạo lịch động trong html
Vì vậy, nếu bạn là người muốn phát triển một trang web, bạn phải biết cách tạo trang web đó đúng cách.
100+ Chủ đề & plugin WordPress cao cấp
Chỉ $2. 99 Từ Mẫu Cafe
Cách tạo lịch động trong html
Chúng tôi ở đây để giải quyết vấn đề của bạn. Trong bài viết này, chúng tôi thảo luận về cách tạo các yếu tố này. Trước khi chúng tôi bắt đầu, vui lòng đọc các bài viết dưới đây để bạn dễ hiểu quy trình hơn nếu bạn là người mới phát triển
- Làm thế nào để bắt đầu với HTML?
- CSS là gì?
- JavaScript là gì?
Bước 1 – Thêm HTML
Thật quá dễ dàng và đơn giản. Chỉ cần sao chép và dán mã bên dưới vào trình chỉnh sửa HTML của bạn giữa thẻ .
Calendar18August
Mon Tue Wed Thu Fri Sat Sun 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1
Bước 2 – Thêm CSS
Sao chép và dán mã bên dưới vào trình chỉnh sửa HTML của bạn giữa thẻ .
body {
background-color: #fbab7e;
background-image: linear-gradient[62deg, #fbab7e 0%, #f7ce68 100%];
font: 87.5%/1.5em "Lato", sans-serif;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
padding: 0;
}
.container {
height: 600px;
left: 50%;
margin: -300px 0 0 -300px;
position: absolute;
top: 50%;
width: 600px;
}
.calendar-container {
position: relative;
width: 450px;
}
.calendar-container header {
border-radius: 1em 1em 0 0;
background: #e66b6b;
color: #fff;
padding: 3em 2em;
}
.day {
font-size: 8em;
font-weight: 900;
line-height: 1em;
}
.month {
font-size: 4em;
line-height: 1em;
text-transform: lowercase;
}
.calendar {
background: #fff;
border-radius: 0 0 1em 1em;
-webkit-box-shadow: 0 2px 1px rgba[0, 0, 0, 0.2], 0 3px 1px #fff;
box-shadow: 0 2px 1px rgba[0, 0, 0, 0.2], 0 3px 1px #fff;
color: #555;
display: inline-block;
padding: 2em;
}
.calendar thead {
color: #e66b6b;
font-weight: 700;
text-transform: uppercase;
}
.calendar td {
padding: 0.5em 1em;
text-align: center;
}
.calendar tbody td:hover {
background: #cacaca;
color: #fff;
}
.current-day {
color: #e66b6b;
}
.prev-month,
.next-month {
color: #cacaca;
}
.ring-left,
.ring-right {
position: absolute;
top: 230px;
}
.ring-left {
left: 2em;
}
.ring-right {
right: 2em;
}
.ring-left:before,
.ring-left:after,
.ring-right:before,
.ring-right:after {
background: #fff;
border-radius: 4px;
-webkit-box-shadow: 0 3px 1px rgba[0, 0, 0, 0.3],
0 -1px 1px rgba[0, 0, 0, 0.2];
box-shadow: 0 3px 1px rgba[0, 0, 0, 0.3], 0 -1px 1px rgba[0, 0, 0, 0.2];
content: "";
display: inline-block;
margin: 8px;
height: 32px;
width: 8px;
}
Cuối cùng, chúng ta sẽ có một cái gì đó như thế này. Bạn có thể thay đổi phông chữ, màu sắc, hình nền và tất cả những thứ bạn muốn. tận hưởng nó
Đầu ra của bạn
Tải xuống mã đầy đủ
Video hướng dẫn
Hãy xem video này để hiểu rõ hơn về hướng dẫn này và đừng quên đăng ký kênh của chúng tôi
Giúp người khác tìm hiểu về bài viết này trên các trang Mạng xã hội. Nếu bạn có bất kỳ nghi ngờ hoặc bất kỳ vấn đề nào, đừng ngần ngại liên hệ với chúng tôi. Sau đó, chúng tôi sẽ có thể giúp bạn và cũng đảm bảo rằng bạn đánh dấu trang web của chúng tôi trên trình duyệt của bạn