ساخت تقویم با html ، css و جاوا اسکریپت
تقویم ها بخش ضروری وب سایت شما هستند، به خصوص اگر سایت یک هتل یا سینما را اداره می کنید، یا اگر یک شرکت هواپیمایی هستید. با یک تقویم در سایت شما، کاربران می توانند به راحتی اتاق، تاریخ و بلیط هواپیما را بدون نیاز به تماس یا منتظر ماندن در صف برای مدت طولانی رزرو کنند. ایجاد تقویم می تواند یک چالش باشد، با این حال، الگوهای تقویم HTML وجود دارد که به راحتی به صورت آنلاین در دسترس هستند. این قالب ها توسط طراحان وب ساخته شده اند و توسط طراحان وب و برنامه نویسان دیگری که می خواهند یک تقویم عالی به وب سایت خود اضافه کنند استفاده می شود. این مقاله ، به آموزش ساخت تقویم جذاب با استفاده از کدهای html ، css و جاوا اسکریپت می پردازد.
خروجی تقویم ما به صورت زیر خواهد بود . یک تقویم زیبا همراه با انیمیشن
کدهای ساخت تقویم با html و CSS ، جاوا اسکریپت
ابتدا در فایل index.htm خود ، کدهای زیر را وارد می کنیم :
<!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>Calendar | @geek.with.me</title> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <link rel="stylesheet" href="assets/css/styles.css"> </head> <body> <div class="wrapper"> <div class="datepicker"> <div class="datepicker-header"></div> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script> <script src="assets/js/script.js"></script> </body> </html>
حالا نوبت به استایل دهی به تقویم خود با استفاده از CSS می رسد :
body{
font-family: sans-serif;
}
.wrapper{
height: 100vh;
display: grid;
place-items: center;
}
.datepicker{
width: 475px;
background-color: #fdfdfd;
border-radius: 10px;
box-shadow: 0 19px 38px rgba(0, 0, 0, .2),
۰ 15px 12px rgba(0, 0, 0, .2);
margin: 15px auto;
overflow: hidden;
}
.datepicker .datepicker-header{
height: 300px;
background: url("../images/bg.jpg") no-repeat center;
background-size: cover;
}
.datepicker .ui-datepicker-inline{
padding: 30px;
}
.datepicker .ui-datepicker-header{
text-align: center;
font-size: 1.4em;
padding-bottom: .5em;
letter-spacing: .1em;
color: #333;
}
.datepicker .ui-datepicker-header .ui-datepicker-prev,
.datepicker .ui-datepicker-header .ui-datepicker-next{
float: left;
cursor: pointer;
font-size: pointer;
padding: 0 5px;
margin-top: -8px;
color : rgb(150, 150, 150);
transition: .6s;
}
.datepicker .ui-datepicker-header .ui-datepicker-next{
float: right;
}
.datepicker .ui-datepicker-header .ui-datepicker-prev:hover{
transform: translateX(-5px);
}
.datepicker .ui-datepicker-header .ui-datepicker-next:hover{
transform: translateX(5px);
}
.datepicker .ui-datepicker-calendar{
width: 100%;
padding: 5px;
text-align: center;
}
.datepicker .ui-datepicker-calendar thead{
color: rgb(150, 150, 150);
}
.ui-datepicker-title{
color: rgb(97, 93, 93);
}
.datepicker .ui-datepicker-calendar tr th,
.datepicker .ui-datepicker-calendar tr td{
margin-bottom: .4em;
}
.datepicker .ui-datepicker-calendar a{
color: #333;
text-decoration: none;
display: block;
margin: auto;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid transparent;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background-color.4s;
}
.datepicker .ui-datepicker-calendar a:hover{
background-color: #da89a2;
color: white;
}
.datepicker .ui-datepicker-calendar .ui-state-highlight{
background-color: #da89a2;
color: white;
}
بک گراند این تقویم با نام Bg.JPG را از همین لینک می توانید دریافت کنید.
در پایان هم در فایل script.js خود مقداری کد jQuery اضافه می کنیم :
برای انتخاب تاریخ از رشته کد کوتاه زیر استفاده می کنیم.
$(document).ready(function () {
$(".datepicker").datepicker();
});
لینک گیت هاب این پروژه از اینجا در دسترس است.
این یک تقویم پویا و جذاب است که به شما دید و کنترل بهتری برای طراحی تقویم سایت خود می دهد. این تقویم ترکیبی از کدنویسی CSS و Html است، اما برای اینکه کار کند به قطعه کدی از جاوا اسکریپت نیاز دارد.
دیدگاه ها