Hướng dẫn how to make a calendar using html and javascript - cách tạo lịch bằng html và javascript

Bây giờ chúng tôi đã hoàn thành phần JavaScript của chúng tôi cho lịch. Dưới đây là đầu ra cập nhật của chúng tôi về lịch làm việc. Hy vọng bạn thích lịch. Bạn có thể xem video đầu ra và ảnh chụp màn hình dự án. Xem các blog khác của chúng tôi và có được kiến ​​thức trong phát triển phía trước. Cảm ơn bạn

Có một thanh trượt một tháng trong lịch và tiêu đề của tháng và mỗi tháng thay đổi màu nền thay đổi màu, vì vậy hãy để tạo ra một lịch HTML CSS JavaScript.

Hy vọng bạn thích blog của chúng tôi, vì vậy hãy để bắt đầu với cấu trúc HTML cơ bản cho lịch.

Hơn 100 dự án đầu tiên cho các nhà phát triển web (mã nguồn)

Chúng tôi sẽ tìm hiểu điều này bằng cách sử dụng mã HTML lịch đơn giản, ngay cả người mới bắt đầu cũng có thể tạo ra điều này với sự hiểu biết về những điều cơ bản. Hãy để chúng tôi bắt đầu ngay bây giờ.
Let us begin now.

Mã HTML cho lịch

Thêm phông chữ liên kết CDN tuyệt vời: & nbsp;

Phông chữ liên kết tuyệt vời

Chúng tôi sử dụng liên kết này để hiển thị các biểu tượng trên trang web của chúng tôi. Nếu bạn muốn trải nghiệm don lồng thêm liên kết CDN này vào dự án của bạn thì hãy xem những gì bạn thấy và sau đó thêm nó, dự án của bạn đã hoàn thành.

Có tất cả các mã HTML cho dự án lịch. Bây giờ, bạn có thể thấy đầu ra mà không cần mã CSS và JavaScript. & NBSP; sau đó chúng tôi viết mã CSS và JavaScript cho lịch.

Dự án lịch đầu ra

Mã CSS cho lịch

body{
background-color: #F5F1E9;
}
#calendar{
margin-left: auto;
margin-right: auto;
width: 320px;
font-family: 'Lato', sans-serif;
}
#calendar_weekdays div{
display:inline-block;
vertical-align:top;
}
#calendar_content, #calendar_weekdays, #calendar_header{
position: relative;
width: 320px;
overflow: hidden;
float: left;
z-index: 10;
}
#calendar_weekdays div, #calendar_content div{
width:40px;
height: 40px;
overflow: hidden;
text-align: center;
background-color: #FFFFFF;
color: #787878;
}
#calendar_content{
-webkit-border-radius: 0px 0px 12px 12px;
-moz-border-radius: 0px 0px 12px 12px;
border-radius: 0px 0px 12px 12px;
}
#calendar_content div{
float: left;
}
#calendar_content div:hover{
background-color: #F8F8F8;
}
#calendar_content div.blank{
background-color: #E8E8E8;
}
#calendar_header, #calendar_content div.today{
zoom: 1;
filter: alpha(opacity=70);
opacity: 0.7;
}
#calendar_content div.today{
color: #FFFFFF;
}
#calendar_header{
width: 100%;
height: 37px;
text-align: center;
background-color: #FF6860;
padding: 18px 0;
-webkit-border-radius: 12px 12px 0px 0px;
-moz-border-radius: 12px 12px 0px 0px;
border-radius: 12px 12px 0px 0px;
}
#calendar_header h2{
font-size: 1.5em;
color: #FFFFFF;
float:left;
width:70%;
}
i[class^=icon-chevron]{
color: #FFFFFF;
float: left;
width:15%;
border-radius: 50%;
}

Bây giờ chúng tôi đã hoàn thành phần CSS của chúng tôi cho dự án lịch, & NBSP; Dưới đây là đầu ra cập nhật của chúng tôi của CSS dự án lịch.

đầu ra của dự án lịch & nbsp;

Bây giờ thêm mã JavaScript cho lịch chức năng!

Hơn 50 dự án mặt trước với mã nguồn | Các dự án phía trước có mã nguồn

Mã JavaScript cho Lịch

Chúng tôi sử dụng mã jQuery trong dự án lịch này, vì vậy chúng tôi phải bao gồm liên kết CDN jQuery trong dự án lịch của chúng tôi nếu không dự án của chúng tôi không hoạt động vì vậy đây là liên kết CDN của jQuery (bạn thêm dưới dạng src script và dán liên kết này).

Liên kết cho jQuery

$(function () {
function c() {
p();
var e = h();
var r = 0;
var u = false;
l.empty();
while (!u) {
if (s[r] == e[0].weekday) {
u = true;
} else {
l.append('
');
r++;
}
}
for (var c = 0; c < 42 - r; c++) {
if (c >= e.length) {
l.append('
');
} else {
var v = e[c].day;
var m = g(new Date(t, n - 1, v)) ? '
' : "
";
l.append(m + "" + v + "
");
}
}
var y = o[n - 1];
a.css("background-color", y)
.find("h2")
.text(i[n - 1] + " " + t);
f.find("div").css("color", y);
l.find(".today").css("background-color", y);
d();
}
function h() {
var e = [];
for (var r = 1; r < v(t, n) + 1; r++) {
e.push({ day: r, weekday: s[m(t, n, r)] });
}
return e;
}
function p() {
f.empty();
for (var e = 0; e < 7; e++) {
f.append("
" + s[e].substring(0, 3) + "
");
}
}
function d() {
var t;
var n = $("#calendar").css("width", e + "px");
n.find((t = "#calendar_weekdays, #calendar_content"))
.css("width", e + "px")
.find("div")
.css({
width: e / 7 + "px",
height: e / 7 + "px",
"line-height": e / 7 + "px",
});
n.find("#calendar_header")
.css({ height: e * (1 / 7) + "px" })
.find('i[class^="icon-chevron"]')
.css("line-height", e * (1 / 7) + "px");
}
function v(e, t) {
return new Date(e, t, 0).getDate();
}
function m(e, t, n) {
return new Date(e, t - 1, n).getDay();
}
function g(e) {
return y(new Date()) == y(e);
}
function y(e) {
return e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate();
}
function b() {
var e = new Date();
t = e.getFullYear();
n = e.getMonth() + 1;
}
var e = 480;
var t = 2013;
var n = 9;
var r = [];
var i = [
"JANUARY",
"FEBRUARY",
"MARCH",
"APRIL",
"MAY",
"JUNE",
"JULY",
"AUGUST",
"SEPTEMBER",
"OCTOBER",
"NOVEMBER",
"DECEMBER",
];
var s = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
var o = [
"#16a085",
"#1abc9c",
"#c0392b",
"#27ae60",
"#FF6860",
"#f39c12",
"#f1c40f",
"#e67e22",
"#2ecc71",
"#e74c3c",
"#d35400",
"#2c3e50",
];
var u = $("#calendar");
var a = u.find("#calendar_header");
var f = u.find("#calendar_weekdays");
var l = u.find("#calendar_content");
b();
c();
a.find('i[class^="icon-chevron"]').on("click", function () {
var e = $(this);
var r = function (e) {
n = e == "next" ? n + 1 : n - 1;
if (n < 1) {
n = 12;
t--;
} else if (n > 12) {
n = 1;
t++;
}
c();
};
if (e.attr("class").indexOf("left") != -1) {
r("previous");
} else {
r("next");
}
});
});

Đầu ra cuối cùng

Lịch sử dụng HTML, CSS & JavaScript

Bây giờ chúng tôi đã hoàn thành phần JavaScript của chúng tôi cho lịch. Dưới đây là đầu ra cập nhật của chúng tôi về lịch làm việc. Hy vọng bạn thích lịch. Bạn có thể xem video đầu ra và ảnh chụp màn hình dự án. Xem các blog khác của chúng tôi và có được kiến ​​thức trong phát triển phía trước. Cảm ơn bạn

Trong bài đăng này, chúng tôi tìm hiểu cách tạo lịch bằng cách sử dụng HTML, CSS và JavaScript đơn giản. Nếu chúng tôi mắc lỗi hoặc bất kỳ sự nhầm lẫn nào, xin vui lòng gửi bình luận để trả lời hoặc giúp bạn học dễ dàng.

Được viết bởi - mã với ngẫu nhiên/anki