JavaScript日历是一种基于JavaScript编程语言实现的日期选择器，它可以让用户在网页上方便地选择日期，这种日历通常具有以下功能：
1、显示当前日期和星期几；
2、支持向前、向后翻页查看日期；
3、支持选择特定日期；
4、支持自定义日期格式；
5、支持禁用某些日期（如周末或特定节假日）。
下面是一个简单的JavaScript日历实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript日历</title>
<style>
.calendar {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
}
.calendar table {
border-collapse: collapse;
width: 100%;
}
.calendar th, .calendar td {
border: 1px solid #ccc;
text-align: center;
padding: 5px;
}
.calendar th {
background-color: #eee;
font-weight: bold;
}
.calendar td.disabled {
cursor: not-allowed;
color: #999;
}
</style>
</head>
<body>
<div class="calendar" id="calendar"></div>
<script>
function createCalendar(id) {
var calendar = document.getElementById(id);
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var daysInMonth = new Date(year, month, 0).getDate();
var firstDayOfWeek = new Date(year, month - 1, 1).getDay();
var days = ['日', '一', '二', '三', '四', '五', '六'];
var weekdays = [];
var dates = [];
var disabledDates = [];
for (var i = 0; i < 7; i++) {
weekdays.push({ text: days[firstDayOfWeek], day: firstDayOfWeek });
firstDayOfWeek++;
if (firstDayOfWeek > 6) {
firstDayOfWeek = 0;
}
}
for (var i = 1; i <= daysInMonth; i++) {
dates.push({ text: i, day: i, isDisabled: false });
}
calendar.innerHTML = '<table><tr><th></th><th>' + weekdays.map(function (item) { return item.text; }).join('</th><th>') + '</th></tr><tr><td></td><td>' + dates.map(function (item) { return '<span class="' + (item.isDisabled ? 'disabled' : '') + '">' + item.text + '</span>'; }).join('</td><td>') + '</td></tr></table>';
}
createCalendar('calendar');
</script>
</body>
</html>
这个示例中，我们首先创建了一个名为createCalendar的函数，该函数接收一个参数id，用于指定日历的容器元素，在函数内部，我们首先获取当前日期，并计算出年份、月份和当月的天数，接着，我们创建一个数组weekdays来存储一周的星期几，以及一个数组dates来存储当月的所有日期，我们还创建了一个空数组disabledDates，用于存储禁用的日期。
接下来，我们遍历一周的星期几，将它们添加到weekdays数组中，我们遍历当月的所有日期，将它们添加到dates数组中，注意，我们将每个日期对象设置为{ text: i, day: i, isDisabled: false }，其中text表示日期的文本显示，day表示日期的数字表示，isDisabled表示该日期是否被禁用，默认情况下，所有日期都是可用的。
我们将日历的内容填充到指定的容器元素中，我们使用<table、tr、th和td元素来构建日历的结构，对于星期几，我们直接从weekdays数组中获取文本，对于日期，我们遍历dates数组，并根据每个日期对象的isDisabled属性来决定是否添加一个带有disabled类的span元素，这样，我们就可以通过CSS样式来控制禁用日期的显示效果。