Liên kết Thêm vào Lịch cho phép thêm sự kiện vào lịch với thông tin được điền trước. Chi tiết sự kiện được điền trước dựa trên thông tin được cung cấp trong liên kết HTML. Hầu hết, liên kết Thêm vào Lịch được sử dụng trong email hoặc trang web để chuyển hướng người dùng trực tiếp đến lịch. Trong ví dụ này, chúng tôi sẽ chỉ cho bạn cách tạo liên kết HTML để thêm sự kiện vào lịch Google cũng như Outlook, Office 365 và Apple Mail
Liên kết Lịch Google
Liên kết HTML sau chuyển hướng đến Outlook và Office 365 với các chi tiết sự kiện được điền sẵn [tiêu đề, mô tả, vị trí, thời gian bắt đầu và thời gian kết thúc]
Tìm hiểu cách tạo Lịch bằng CSS
Cách tạo bố cục lịch
- 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
Tự mình thử »
Bước 1] Thêm HTMLThí dụ
- ❮
- ❯
- Tháng 8
2021
- mo
- Tú
- chúng tôi
- Thứ tự
- cha
- sa
- sự
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
...etc
Thí dụ
ul {list-style-type. none;}
body {font-family. Verdana, sans-serif;}
/* Tiêu đề tháng */
. tháng {
phần đệm. 70px 25px;
chiều rộng. 100%;
nền. #1abc9c;
căn chỉnh văn bản. trung tâm;
}
/* Danh sách tháng */
. tháng ul {
lợi nhuận. 0;
phần đệm. 0;
}
.month ul li {
màu. trắng;
cỡ chữ. 20px;
chuyển đổi văn bản. chữ hoa;
khoảng cách giữa các chữ cái. 3px;
}
/* Nút trước trong tiêu đề tháng */
. tháng. trước {
float. left;
padding-top. 10px;
}
/* Nút tiếp theo */
. tháng. tiếp theo {
phao. phải;
padding-top. 10px;
}
/* Các ngày trong tuần [Thứ Hai-Chủ nhật] */
. các ngày trong tuần {
lề. 0;
phần đệm. 10px 0;
màu nền. #ddd;
}
.weekdays li {
hiển thị. inline-block;
chiều rộng. 13. 6%;
màu. #666;
căn chỉnh văn bản. trung tâm;
}
/* Ngày [1-31] */
. ngày {
đệm. 10px 0;
nền. #eee;
lề. 0;
}
.days li {
list-style-type. không;
hiển thị. inline-block;
chiều rộng. 13. 6%;
căn chỉnh văn bản. chính giữa;
lề-dưới. 5px;
cỡ chữ. 12px;
màu. #777;
}
/* Đánh dấu ngày "hiện tại" */
. ngày li. phần đệm {
đang hoạt động. 5px;
nền. #1abc9c;
màu. trắng. quan trọng
}
Một tiện ích giao diện người dùng nhỏ hữu ích ở đây từ Jens Kuerschner. Nhấp vào nút thêm vào lịch, nhận danh sách các ứng dụng lịch, người dùng chọn ứng dụng họ thực sự sử dụng và họ nhận được những gì họ cần cho lịch đó. Có thể là một URL chuyên biệt mà chúng được gửi đến hoặc thậm chí là một tệp .ics được tải xuống
backdrop-filter lạ mắt đó