HTML, CSS 및 Javascript를 사용하여 캘린더 만들기

HTML, CSS 및 Javascript를 사용하여 캘린더 만들기

2022-10-19 last update

8 minutes reading beginners programming webdev javascript
Code With Random 블로그에 오신 것을 환영합니다. 이 기사에서는 Html, Css 및 Javascript 코딩을 사용하여 달력을 만듭니다. 이 달력에는 모든 연도, 월 및 날짜가 있습니다.

달력에는 월 슬라이더가 있고 월의 제목이 있고 매달 배경색이 바뀌므로 달력 html css 자바스크립트를 만들어 보겠습니다.

블로그를 즐기시기 바라며 캘린더의 기본 HTML 구조부터 시작하겠습니다.

간단한 달력 HTML 코드를 사용하여 이것을 배우게 되며 초보자도 기본 사항을 이해하면 만들 수 있습니다.
지금 시작하겠습니다.

캘린더용 HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://fonts.googleapis.com/css?family=Lato"
rel="stylesheet"
type="text/css"
/>
</head>
<body>
<div id="calendar">
<div id="calendar_header">
<i class="icon-chevron-left"></i>
<h1></h1>
<i class="icon-chevron-right"></i>
</div>
<div id="calendar_weekdays"></div>
<div id="calendar_content"></div>
</div>
</body>
</html>


캘린더 프로젝트에 대한 모든 html 코드가 있습니다. 이제 css 및 javascript 코드 없이 출력을 볼 수 있습니다. 그런 다음 달력에 대한 CSS 및 자바스크립트 코드를 작성합니다.

출력 캘린더 프로젝트



캘린더용 CSS 코드

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 h1{
font-size: 1.5em;
color: #FFFFFF;
float:left;
width:70%;
}
i[class^=icon-chevron]{
color: #FFFFFF;
float: left;
width:15%;
border-radius: 50%;
}


이제 캘린더 프로젝트에 대한 CSS 섹션을 완료했습니다. 다음은 캘린더 프로젝트 CSS의 업데이트된 출력입니다.

캘린더 프로젝트의 출력



이제 캘린더 기능을 위한 자바스크립트 코드를 추가하세요!

캘린더용 자바스크립트 코드
이 캘린더 프로젝트에서 Jquery 코드를 사용하므로 캘린더 프로젝트에 Jquery CDN 링크를 포함해야 합니다. 그렇지 않으면 프로젝트가 작동하지 않으므로 여기에 Jquery의 CDN 링크가 있습니다(스크립트 src로 추가하고 이 링크를 붙여넣음).

$(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('<div class="blank"></div>');
r++;
}
}
for (var c = 0; c < 42 - r; c++) {
if (c >= e.length) {
l.append('<div class="blank"></div>');
} else {
var v = e[c].day;
var m = g(new Date(t, n - 1, v)) ? '<div class="today">' : "<div>";
l.append(m + "" + v + "</div>");
}
}
var y = o[n - 1];
a.css("background-color", y)
.find("h1")
.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("<div>" + s[e].substring(0, 3) + "</div>");
}
}
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");
}
});
});


최종 출력



이제 달력에 대한 자바스크립트 섹션을 완료했습니다. 다음은 작업 달력의 업데이트된 출력입니다. 캘린더가 마음에 드셨으면 합니다. 출력 비디오와 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오. 고맙습니다

이 게시물에서는 간단한 HTML, CSS 및 자바 스크립트를 사용하여 캘린더를 만드는 방법을 배웁니다. 우리가 실수하거나 혼란스러운 점이 있으면 댓글을 남겨 답장을 보내거나 쉬운 학습을 도와주세요.

작성자 – Random/Anki가 있는 코드

일부 관련 주제 -

music-player-project-in-html-and-css

simple-css-waves-wave-background-css-pure-css-wave

add-to-cart-button-animation-add-to-cart-button-html-css-javascript

restaurant-website-html-css

age-calculator-javascript-age-calculator-using-html-css-javascript