@{
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
.calendar-container {
width:800px;
min-width:800px;
margin-left:auto;
margin-right:auto;
}
.calendar-header {
text-align: center;
margin-top: 18px;
margin-bottom: 6px;
display: flex;
}
.calendar-header div {
display: flex;
justify-content: center;
align-items: center;
}
.calendar-header .calendar-month-name {
width: 100%;
height: 40px; /* 設定元素的高度 */
font-size: 24px; /* 設定元素內容的字體大小 */
font-weight: bold; /* 設定元素內容的字體加粗 */
color:#666;
}
.calendar-header .btn-change-month {
font-size: 24px;
font-weight: bold;
background-color: #2196F3;
color: #fff;
padding: 0px 6px 0px 8px;
height: 32px;
cursor:pointer;
user-select:none;
border-radius:5px;
}
/* 星期幾表頭 */
.calendar-weekdays {
display: flex;
}
/* 星期幾格子 */
.calendar-weekday {
width: 100px;
text-align: center;
font-size: 16px;
font-weight: bold;
}
/* 日曆內容 */
.calendar-content {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
}
/* 日期格子 */
.calendar-day {
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
display:flex;
}
.calendar-day .text-day{
margin-left:3px;
}
body {
font-family: Tahoma;
}
.calendar-content, .calendar-weekdays {
display: flex;
flex-wrap: wrap;
}
.calendar-content .calendar-day, .calendar-weekdays .calendar-weekday {
width: calc(100% / 7 - 2px);
}
.calendar-content .calendar-day {
}
.calendar-weekdays .calendar-weekday {
height: 40px;
color: #666;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.calendar-content .calendar-day {
border: 1px solid #eee;
height: 80px;
user-select: none;
margin:1px;
}
/* 每七個 div 換行 */
.calendar-content div:nth-child(7n+1) {
clear: both;
}
</style>
</head>
<body>
<div>
<div id="calendar_gpt" class="calendar-container"></div>
</div>
</body>
</html>
<script>
var initCcalendar = function (calendarContainer,year, month) {
if (month == undefined || year == undefined) {
var date = new Date();
year = date.getFullYear();
month = date.getMonth();
}
var header = $("<div>").addClass("calendar-header");
var calendarHeaderMonth = $('<div>').addClass("calendar-month-name").text(year + '年 ' + (month + 1) + '月' );
var weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var weekdaysAbbr = ['日', '一', '二', '三', '四', '五', '六'];
var weekdaysHeader = $('<div>').addClass('calendar-weekdays');
for (var i = 0; i < weekdays.length; i++) {
var calendarWeekday = $('<div>').addClass('calendar-weekday').text(weekdays[i]);
weekdaysHeader.append(calendarWeekday);
}
// 獲取當月的天數和第一天是星期幾
var firstDay = new Date(year, month, 1).getDay();
var daysInMonth = new Date(year, month + 1, 0).getDate();
// 計算日曆內容的高度
var contentHeight = Math.ceil((daysInMonth + firstDay) / 7) * 40;
// 生成日曆內容
var content = $('<div>').addClass('calendar-content');
for (var i = 0; i < firstDay; i++) {
var dayTemplate = $('<div>').addClass('calendar-day').text('');
content.append(dayTemplate);
}
var dates = [];
for (var i = 1; i <= daysInMonth; i++) {
dates.push(i);
}
dates.forEach(function (d) {
var ds = $("<span>").addClass("text-day").text(d);
var dayTemplate = $('<div>').addClass('calendar-day').off("click").on("click", function (e) {;
var clickDate = year + "-" + (month + 1) + "-" + d;
console.log(clickDate);
}).append(ds);
content.append(dayTemplate);
});
var lastBlinkDay = 7 - (firstDay + daysInMonth) % 7;
for (var i = 0; i < lastBlinkDay; i++) {
var dayTemplate = $("<div>").addClass("calendar-day calendar-blink-day").text("");
content.append(dayTemplate);
}
calendarContainer.empty().append(header).append(weekdaysHeader).append(content);
// 增加切換上下月的功能
var prevMonth = $('<div>').addClass('prev-month btn-change-month').html('<').on("click", function () {
month--;
if (month < 0) {
month = 11;
year--;
}
initCcalendar(calendarContainer,year, month);
});
var nextMonth = $('<div>').addClass('next-month btn-change-month').html('>').on("click", function () {
month++;
if (month > 11) {
month = 0;
year++;
}
initCcalendar(calendarContainer,year, month);
});
// 添加上下月的箭頭
header.prepend(prevMonth);
header.append(calendarHeaderMonth);
header.append(nextMonth);
};
var calendarContainer = $('#calendar_gpt');
initCcalendar(calendarContainer);
</script>
