2023年，让我们携手一道兔谋大业、做出兔出贡献！同打拼、共丰盈、多喜乐、长安宁，好运一路相随兔气扬眉！
💂作者简介： 向阳逐梦 ，一名有内涵的嵌入式开发工程师
👉欢迎支持：点赞👍🏼、收藏⭐、留言📩
日历小部件是事件交互型网站中比较重要的组件之一。因为它可以帮助用户查看特定日期的日程安排或事件信息。除此之外，日历还能用于日期选择器、事件调度器或的日历小部件项目。
一个可以根据需要设计的日历绝对是你所需要的。因此，我在创建日历小部件的同时也注重日历的自定义。
HTML结构
在HTML中加载Reset CSS以便清除HTML元素的默认浏览器格式。同样的，添加以下CDN链接到网页的head标签中，以便加载Roboto字体和Font Awesome CSS（用于图标）。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
我们需要一个div元素，用于动态呈现日历。因此，创建一个类名为softcard的div元素，放置next/prev按钮，并放入一个id为soft-btn的div元素。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="softcard">
<div class="calendar-bar">
<button class="prev soft-btn"><i class="fas fa-chevron-left"></i></button>
<div class="current-month"></div>
<button class="next soft-btn"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="calendar">
<div class="weekdays-name">
<div class="days-name">Sa</div>
<div class="days-name">Su</div>
<div class="days-name">Mo</div>
<div class="days-name">Tu</div>
<div class="days-name">We</div>
<div class="days-name">Th</div>
<div class="days-name">Fr</div>
</div>
<div class="calendar-days"></div>
</div>
<div class="goto-buttons">
<button type="button" class="btn prev-year">Prev Year</button>
<button type="button" class="btn today">Today</button>
<button type="button" class="btn next-year">Next Year</button>
</div>
</div>
你可以将上述HTML结构放置在想要创建日历小部件的网页或App的任何位置。
创建日历的CSS样式
在HTML中创建Soft Card之后，现在该设置日历布局的样式了。选择calendar-bar类并定义其宽度、背景、填充和边框属性，如下所示。
你可以根据自己的选择来设置自定义背景颜色。
* {
margin: 0; padding: 0;}
body {
height: 100vh; background: #ddd; display: flex; justify-content: center;
align-items: center; font-family: "Quicksand", sans-serif; user-select: none;
}
.softcard { width: 316px; height: fit-content;
background: -webkit-linear-gradient(to right, #f7b733, #fc4a1a); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f7b733, #fc4a1a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 20px; box-shadow: 0px 0px 10px #000;
}
.calendar-bar { display: flex; justify-content: space-between;
align-items: center; padding: 20px; padding-bottom: 15px;
border-bottom: 19px;
}
.calendar-bar > .current-month {
font-size: 20px; font-weight: bold; color: #ddd;
background:#000; padding:5px; border-radius:10px;
}
.calendar-bar > [class$="soft-btn"] {
width: 40px; aspect-ratio: 1; text-align: center;
line-height: 40px; font-size: 14px; color: #000;
background: #ddd; border: none; border-radius: 50%;
}
.weekdays-name,
.calendar-days { display: flex; flex-wrap: wrap; padding-inline:18px;}
.weekdays-name { padding-top: 12px;}
.calendar-days { padding-bottom: 12px;}
.days-name,
[class$="-day"] { width: 40px; height: 40px; color: #000; text-align: center;
line-height: 40px; font-weight: 500; font-size: 1rem;
}
.days-name { color: #fff; font-weight: 700;}
.current-day {
background-color: #000; color: #fff;
border-radius: 50%; font-weight: 700; transition: 0.5s; cursor: pointer;
}
.padding-day {
color: #a5a5a5; user-select: none;
}
.calendar-bar > [class$="soft-btn"]:hover,
.month-day:hover,
.btn:hover {
border-radius:5px; background-color:#f8f7fa; color:#000; border-radius:15px;
transition: 0.1s; cursor: pointer;
}
.calendar-bar > [class$="soft-btn"]:focus,
.month-day:focus,
.btn:focus { border-radius:15px; background-color: #000; color: #ddd;
}
.goto-buttons {
border-top: solid 2px yellow; padding-block: 18px; display: flex;
justify-content: space-evenly;
}
.btn {
background: #eee border: none; border-radius: 10px;
padding: 11px 13px; color:#000; font-family: "Quicksand", sans-serif;
font-weight: 600; font-size: 0.9rem; margin-right: 1px; box-shadow: 0px 0px 0px #000;
}JavaScript 函数
万事俱备，只欠最后一场东风了——只需要将日历JavaScript函数添加到项目中即可。在关闭body标记之前，在script标记之间添加以下代码。
如果你需要添加更多功能，也可以相应地修改代码。非常简单。
var currentMonth = document.querySelector(".current-month");
var calendarDays = document.querySelector(".calendar-days");
var today = new Date();
var date = new Date();
currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});
today.setHours(0,0,0,0);
renderCalendar();
function renderCalendar(){
const prevLastDay = new Date(date.getFullYear(),date.getMonth(),0).getDate();
const totalMonthDay = new Date(date.getFullYear(),date.getMonth()+1,0).getDate();
const startWeekDay = new Date(date.getFullYear(),date.getMonth(),1).getDay();
calendarDays.innerHTML = "";
let totalCalendarDay = 6 * 7;
for (let i = 0; i < totalCalendarDay; i++) {
let day = i-startWeekDay;
if(i <= startWeekDay){
// adding previous month days
calendarDays.innerHTML += `<div class='padding-day'>${prevLastDay-i}</div>`;
}else if(i <= startWeekDay+totalMonthDay){
// adding this month days
date.setDate(day);
date.setHours(0,0,0,0);
let dayClass = date.getTime()===today.getTime() ? 'current-day' : 'month-day';
calendarDays.innerHTML += `<div class='${dayClass}'>${day}</div>`;
}else{
// adding next month days
calendarDays.innerHTML += `<div class='padding-day'>${day-totalMonthDay}</div>`;
} }}
document.querySelectorAll(".soft-btn").forEach(function (element) {
element.addEventListener("click", function () {
date = new Date(currentMonth.textContent);
date.setMonth(date.getMonth() + (element.classList.contains("prev") ? -1 : 1));
currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});
renderCalendar();
});});
document.querySelectorAll(".btn").forEach(function (element) {
element.addEventListener("click", function () {
let btnClass = element.classList;
date = new Date(currentMonth.textContent);
if(btnClass.contains("today"))
date = new Date();
else if(btnClass.contains("prev-year"))
date = new Date(date.getFullYear()-1, 0, 1);
else
date = new Date(date.getFullYear()+1, 0, 1);
currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});
renderCalendar();
});
});
兔年新年走大运，祥瑞如意万事顺，幸福美满乐畅怀，喜色盈门快乐多，金银财宝数不尽，财气亨通福相随，祝朋友们新年快乐！
