采购日历
');
if (isOtherMonth) $cell.addClass('other-month');
if (dateStr === todayStr) $cell.addClass('today');
if (hasEvents) $cell.addClass('has-events');
var $num = $('
').text(dayNum);
$cell.append($num);
if (hasEvents && !isOtherMonth) {
var $dots = $('
');
var maxDots = 3;
for (var d = 0; d < Math.min(dayEvents.length, maxDots); d++) {
$dots.append('
');
}
if (dayEvents.length > maxDots) {
$dots.append('
+' + (dayEvents.length - maxDots) + '');
}
$cell.append($dots);
}
$cell.data('dateStr', dateStr);
$cell.data('isOtherMonth', isOtherMonth);
$grid.append($cell);
}
}
// ========== 悬停提示 ==========
function showTooltip($cell, dateStr, eventsList) {
if ($popup.hasClass('show')) return;
var html = '';
var maxPreview = 3;
for (var i = 0; i < Math.min(eventsList.length, maxPreview); i++) {
var ev = eventsList[i];
html += '
[' + (typeNames[ev.type] || ev.type) + '] ' + ev.title + '
';
}
if (eventsList.length > maxPreview) {
html += '
+ ' + (eventsList.length - maxPreview) + ' 条更多(点击查看全部)
';
}
$('#tooltipContent').html(html);
var cellOffset = $cell.offset();
var widgetOffset = $widget.offset();
var cellLeft = cellOffset.left - widgetOffset.left;
var cellTop = cellOffset.top - widgetOffset.top;
var cellHeight = $cell.outerHeight();
var tooltipTop = cellTop + cellHeight + 4;
var tooltipLeft = cellLeft;
$tooltip.css({ top: '-9999px', left: '-9999px' }).show();
var tooltipWidth = $tooltip.outerWidth();
$tooltip.hide();
if (tooltipLeft + tooltipWidth > $widget.width()) {
tooltipLeft = $widget.width() - tooltipWidth - 5;
}
if (tooltipLeft < 5) tooltipLeft = 5;
var tooltipHeight = 60;
if (tooltipTop + tooltipHeight > $widget.height() - 5) {
tooltipTop = cellTop - tooltipHeight - 5;
}
if (tooltipTop < 5) tooltipTop = 5;
$tooltip.css({ top: tooltipTop + 'px', left: tooltipLeft + 'px' }).show();
}
function hideTooltip() {
$tooltip.hide();
}
// ========== 点击浮层 ==========
function showPopup($cell, dateStr, eventsList) {
hideTooltip();
$('.day-cell').removeClass('clicked');
$cell.addClass('clicked');
activeDateStr = dateStr;
$('#popupDate').text(dateStr);
var $list = $('#popupList');
$list.empty();
$.each(eventsList, function(i, ev) {
var typeName = typeNames[ev.type] || ev.type;
var $item = $('');
$item.html('
[' + typeName + '] ' + ev.title);
$list.append($item);
});
// 计算位置
$popup.css({ visibility: 'hidden', display: 'block', top: '0px', left: '0px' });
var popupWidth = $popup.outerWidth();
var popupHeight = $popup.outerHeight();
$popup.css({ visibility: '', display: '' });
var cellOffset = $cell.offset();
var widgetOffset = $widget.offset();
var cellLeft = cellOffset.left - widgetOffset.left;
var cellTop = cellOffset.top - widgetOffset.top;
var cellHeight = $cell.outerHeight();
var widgetWidth = $widget.width();
var widgetHeight = $widget.height();
var popupLeft = cellLeft;
if (popupLeft + popupWidth > widgetWidth) {
popupLeft = widgetWidth - popupWidth - 5;
}
if (popupLeft < 5) popupLeft = 5;
var popupTop = cellTop + cellHeight + 2;
var spaceBelow = widgetHeight - popupTop - 5;
var spaceAbove = cellTop - popupHeight - 5;
if (spaceBelow < popupHeight) {
if (spaceAbove >= popupHeight) {
popupTop = cellTop - popupHeight - 5;
} else {
if (spaceBelow > spaceAbove) {
popupTop = widgetHeight - popupHeight - 5;
} else {
popupTop = 5;
}
}
}
if (popupTop < 5) popupTop = 5;
$popup.css({ top: popupTop + 'px', left: popupLeft + 'px' });
$popup.addClass('show');
}
function hidePopup() {
$popup.removeClass('show');
$('.day-cell').removeClass('clicked');
activeDateStr = null;
}
// ========== 月份切换(带数据刷新) ==========
function goToMonth(year, month) {
// 更新全局变量
currentYear = year;
currentMonth = month;
hidePopup();
hideTooltip();
// 请求该月数据,加载完成后渲染
fetchMonthData(currentYear, currentMonth + 1, function() {
renderCalendar();
});
}
// ========== 事件绑定 ==========
// 上一月
$widget.on('click', '.prev-btn', function() {
if (currentMonth === 0) {
goToMonth(currentYear - 1, 11);
} else {
goToMonth(currentYear, currentMonth - 1);
}
});
// 下一月
$widget.on('click', '.next-btn', function() {
if (currentMonth === 11) {
goToMonth(currentYear + 1, 0);
} else {
goToMonth(currentYear, currentMonth + 1);
}
});
// 今天
$widget.on('click', '.today-btn', function() {
var ty = today.getFullYear();
var tm = today.getMonth();
goToMonth(ty, tm);
});
// 点击年月标题可以快速跳转年份
$widget.on('click', '.month-year', function() {
var input = prompt('请输入年份(如 2026):', currentYear);
if (input && !isNaN(input) && input >= 1900 && input <= 2100) {
goToMonth(parseInt(input), currentMonth);
}
});
// 日期单元格交互(事件委托)
$grid.on('mouseenter', '.day-cell.has-events:not(.other-month)', function() {
var $cell = $(this);
var dateStr = $cell.data('dateStr');
var eventsList = getEventsForDate(dateStr);
clearTimeout(hoverTimer);
hoverTimer = setTimeout(function() {
showTooltip($cell, dateStr, eventsList);
}, 250);
});
$grid.on('mouseleave', '.day-cell', function() {
clearTimeout(hoverTimer);
hideTooltip();
});
$grid.on('click', '.day-cell', function(e) {
clearTimeout(hoverTimer);
hideTooltip();
var $cell = $(this);
var dateStr = $cell.data('dateStr');
var isOtherMonth = $cell.data('isOtherMonth');
if (isOtherMonth) {
// 点击非当月日期,切换月份
var parts = dateStr.split('-');
goToMonth(parseInt(parts[0]), parseInt(parts[1]) - 1);
return;
}
if (activeDateStr === dateStr && $popup.hasClass('show')) {
hidePopup();
return;
}
var dayEvents = getEventsForDate(dateStr);
if (dayEvents.length > 0) {
showPopup($cell, dateStr, dayEvents);
} else {
hidePopup();
}
e.stopPropagation();
});
// 关闭浮层
$('#popupClose').on('click', function(e) {
hidePopup();
e.stopPropagation();
});
$(document).on('click', function(e) {
if (!$(e.target).closest('#eventPopup').length && !$(e.target).closest('.day-cell').length) {
hidePopup();
}
});
// ========== 初始加载:当前月数据 ==========
goToMonth(currentYear, currentMonth);
});