Làm cách nào để thêm nút lịch trong html?

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 HTML

Thí 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

Bước 2) Thêm CSS

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

Nó khá dễ sử dụng. Đây là tôi sử dụng thư viện ngoài CDN cho cả JavaScript và CSS

Dự phòng nhúng CodePen

Hãy làm một bãi suy nghĩ

Cấu hình là “một đoạn lớn JSON nằm trong HTML dưới dạng một chuỗi” hơi lạ đối với tôi

Tôi thấy cách hack sử dụng display: none; trên thẻ gốc để ẩn văn bản đó khỏi kết xuất, nhưng tôi nghĩ rằng tôi thích cách thiết lập trong đó đưa vào thẻ

programming html

Reply 9 0 Chia sẻ