一、实现效果
实现场景:当日期有活动的时候点击日期可以进行链接的跳转
二、实现代码
<body>
<div class="meeting_box">
<div class="meeting_rl">
<div id="calendar" class="calendar"></div>
</div>
<ul class="meeting_list" style="display: none">
<li>
<!-- 直接写入日期js会自动识别获取到日期 -->
<a target="_blank" href="http://www.baidu.com">20231125</a>
</li>
<li>
<a target="_blank" href="http://www.baidu.com">20240406</a>
</li>
</ul>
</div>
</body>
三、css代码
* {
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft Yahei";
font-size: 12px;
color: #888;
}
a,
a:hover {
color: #000000;
text-decoration: none;
}
ul,
li {
list-style: none;
}
.calendar {
display: none;
width: 300px;
/* height: 100%; */
border-radius: 6px;
/* background-color: aqua; */
}
.calendar-title {
position: relative;
height: 50px;
line-height: 30px;
padding: 10px 0;
}
.calendar-title a.title {
display: inline-block;
font-size: 22px;
text-indent: 10px;
font-weight: normal;
}
#backToday {
position: absolute;
left: 46%;
top: 13px;
width: 45px;
height: 26px;
line-height: 26px;
text-align: center;
/* border-radius: 50%; */
margin-left: 10px;
font-size: 16px;
border: 1px solid #fc5531;
color: #fc5531;
}
.calendar-title .arrow {
position: absolute;
top: 10px;
right: 0;
width: 72px;
}
.calendar-title .arrow span {
color: #000000;
font-size: 26px;
cursor: pointer;
width: 26px;
height: 26px;
margin-top: 3px;
user-select: none;
}
.calendar-title .arrow span:hover {
color: #888;
}
.calendar-title .arrow-prev {
float: left;
}
.calendar-title .arrow-next {
float: right;
}
.calendar-week,
.calendar-date {
overflow: hidden;
}
.calendar-week .item,
.calendar-date .item {
float: left;
width: 14.28%;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
}
.calendar-week {
padding-bottom: 6px;
font-weight: bold;
font-size: 16px;
}
.calendar-date {
}
.calendar-date .item {
border-radius: 50%;
cursor: pointer;
font-size: 16px;
}
.calendar-date .item:hover,
.calendar-date .item-curMonth:hover {
background-color: #f0f0f0;
}
.calendar-date .item-curMonth {
color: #333;
font-weight: bold;
}
.calendar-date .hashy {
color: #c61f0c;
}
.calendar-date .item-curDay,
.calendar-date .item-curDay:hover {
color: #fff;
background-color: #fc5531;
}
.calendar-date .item-selected,
.calendar-date .item-selected:hover {
color: #fc5531;
background: #cde9d9;
}
.calendar-today {
display: none;
position: absolute;
right: 20px;
top: 20px;
width: 100px;
height: 56px;
padding: 6px 10px;
background-color: #fc5531;
border-radius: 5px;
}
.calendar-today .triangle {
position: absolute;
top: 50%;
left: -16px;
margin-top: -8px;
border-width: 8px;
border-style: solid;
border-color: transparent #fc5531 transparent transparent;
}
.calendar-today p {
color: #fff;
font-size: 14px;
line-height: 24px;
}
四、js代码
/**
* 完整代码
*/
// 关于月份: 在设置时要-1,使用时要+1
$(function () {
$("#calendar").calendar({
ifSwitch: true, // 是否切换月份
hoverDate: true, // hover是否显示当天信息
backToday: true, // 是否返回当天
});
});
(function ($, window, document, undefined) {
var Calendar = function (elem, options) {
this.$calendar = elem;
this.defaults = {
ifSwitch: true,
hoverDate: false,
backToday: false,
};
this.opts = $.extend({}, this.defaults, options);
};
Calendar.prototype = {
showHoverInfo: function (obj) {
// hover 时显示当天信息
var _dateStr = $(obj).attr("data");
var offset_t = $(obj).offset().top + (this.$calendar_today.height() - $(obj).height()) / 2;
var offset_l = $(obj).offset().left + $(obj).width();
var changeStr = addMark(_dateStr);
var _week = changingStr(changeStr).getDay();
var _weekStr = "";
this.$calendar_today.show();
this.$calendar_today
.css({
left: offset_l + 30,
top: offset_t,
})
.stop()
.animate({
left: offset_l + 16,
top: offset_t,
});
switch (_week) {
case 0:
_weekStr = "星期日";
break;
case 1:
_weekStr = "星期一";
break;
case 2:
_weekStr = "星期二";
break;
case 3:
_weekStr = "星期三";
break;
case 4:
_weekStr = "星期四";
break;
case 5:
_weekStr = "星期五";
break;
case 6:
_weekStr = "星期六";
break;
}
this.$calendarToday_date.text(changeStr);
this.$calendarToday_week.text(_weekStr);
},
showCalendar: function () {
// 输入数据并显示
var self = this;
var year = dateObj.getDate().getFullYear();
var month = dateObj.getDate().getMonth() + 1;
var dateStr = returnDateStr(dateObj.getDate());
var firstDay = new Date(year, month - 1, 1); // 当前月的第一天
this.$calendarTitle_text.text(year + "年" + dateStr.substr(4, 2) + "月");
this.$calendarDate_item.each(function (i) {
// allDay: 得到当前列表显示的所有天数
var allDay = new Date(year, month - 1, i + 1 - firstDay.getDay());
var allDay_str = returnDateStr(allDay);
$(this).text(allDay.getDate()).attr("data", allDay_str);
if (returnDateStr(new Date()) === allDay_str) {
$(this).attr("class", "item item-curDay");
} else if (returnDateStr(firstDay).substr(0, 6) === allDay_str.substr(0, 6)) {
$(this).attr("class", "item item-curMonth");
} else {
$(this).attr("class", "item");
}
});
// 已选择的情况下,切换日期也不会改变
if (self.selected_data) {
var selected_elem = self.$calendar_date.find("[data=" + self.selected_data + "]");
selected_elem.addClass("item-selected");
}
},
renderDOM: function () {
// 渲染DOM
this.$calendar_title = $('<div class="calendar-title"></div>');
this.$calendar_week = $('<ul class="calendar-week"></ul>');
this.$calendar_date = $('<ul class="calendar-date"></ul>');
this.$calendar_today = $('<div class="calendar-today"></div>');
var _titleStr =
'<a href="#" class="title"></a>' +
'<a href="javascript:;" id="backToday">今天 </a>' +
'<div class="arrow">' +
'<span class="arrow-prev"><</span>' +
'<span class="arrow-next">></span>' +
"</div>";
var _weekStr =
'<li class="item">日</li>' +
'<li class="item">一</li>' +
'<li class="item">二</li>' +
'<li class="item">三</li>' +
'<li class="item">四</li>' +
'<li class="item">五</li>' +
'<li class="item">六</li>';
var _dateStr = "";
var _dayStr = '<i class="triangle"></i>' + '<p class="date"></p>' + '<p class="week"></p>';
for (var i = 0; i < 6; i++) {
_dateStr +=
'<li class="item">26</li>' +
'<li class="item">26</li>' +
'<li class="item">26</li>' +
'<li class="item">26</li>' +
'<li class="item">26</li>' +
'<li class="item">26</li>' +
'<li class="item">26</li>';
}
this.$calendar_title.html(_titleStr);
this.$calendar_week.html(_weekStr);
this.$calendar_date.html(_dateStr);
this.$calendar_today.html(_dayStr);
this.$calendar.append(
this.$calendar_title,
this.$calendar_week,
this.$calendar_date,
this.$calendar_today
);
this.$calendar.show();
},
inital: function () {
// 初始化
var self = this;
this.renderDOM();
this.$calendarTitle_text = this.$calendar_title.find(".title");
this.$backToday = $("#backToday");
this.$arrow_prev = this.$calendar_title.find(".arrow-prev");
this.$arrow_next = this.$calendar_title.find(".arrow-next");
this.$calendarDate_item = this.$calendar_date.find(".item");
this.$calendarToday_date = this.$calendar_today.find(".date");
this.$calendarToday_week = this.$calendar_today.find(".week");
this.selected_data = 0;
this.showCalendar();
if (this.opts.ifSwitch) {
this.$arrow_prev.bind("click", function () {
var _date = dateObj.getDate();
dateObj.setDate(new Date(_date.getFullYear(), _date.getMonth() - 1, 1));
self.showCalendar();
});
this.$arrow_next.bind("click", function () {
var _date = dateObj.getDate();
dateObj.setDate(new Date(_date.getFullYear(), _date.getMonth() + 1, 1));
self.showCalendar();
});
}
if (this.opts.backToday) {
var cur_month = dateObj.getDate().getMonth() + 1;
this.$backToday.bind("click", function () {
var item_month = $(".item-curMonth").eq(0).attr("data").substr(4, 2);
var if_lastDay = item_month != cur_month ? true : false;
if (!self.$calendarDate_item.hasClass("item-curDay") || if_lastDay) {
dateObj.setDate(new Date());
self.showCalendar();
}
});
}
this.$calendarDate_item.hover(
function () {
self.showHoverInfo($(this));
},
function () {
self.$calendar_today
.css({
left: 0,
top: 0,
})
.hide();
}
);
this.$calendarDate_item.click(function () {
var _dateStr = $(this).attr("data");
var _date = changingStr(addMark(_dateStr));
var $curClick = null;
self.selected_data = $(this).attr("data");
dateObj.setDate(new Date(_date.getFullYear(), _date.getMonth(), 1));
if (!$(this).hasClass("item-curMonth")) {
self.showCalendar();
}
$curClick = self.$calendar_date.find("[data=" + _dateStr + "]");
$curDay = self.$calendar_date.find(".item-curDay");
if (!$curClick.hasClass("item-selected")) {
self.$calendarDate_item.removeClass("item-selected");
$curClick.addClass("item-selected");
}
});
},
constructor: Calendar,
};
$.fn.calendar = function (options) {
var calendar = new Calendar(this, options);
return calendar.inital();
};
// ========== 使用到的方法 ==========
var dateObj = (function () {
var _date = new Date();
return {
getDate: function () {
return _date;
},
setDate: function (date) {
_date = date;
},
};
})();
function returnDateStr(date) {
// 日期转字符串
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
month = month <= 9 ? "0" + month : "" + month;
day = day <= 9 ? "0" + day : "" + day;
return year + month + day;
}
function changingStr(fDate) {
// 字符串转日期
var fullDate = fDate.split("-");
return new Date(fullDate[0], fullDate[1] - 1, fullDate[2]);
}
function addMark(dateStr) {
return dateStr.substr(0, 4) + "-" + dateStr.substr(4, 2) + "-" + dateStr.substring(6);
}
function isLeapYear(year) {
return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0);
}
})(jQuery, window, document);
$(function () {
hyrl();
$(".arrow span").click(function () {
hyrl();
});
$("#backToday").click(function () {
hyrl();
});
$(".item").click(function () {
if ($(this).attr("data-href")) {
window.open($(this).attr("data-href"));
}
});
function hyrl() {
$(".calendar-date .item").removeAttr("data-href");
$(".meeting_list li").each(function () {
var text_zhi = $(this).find("a").text();
var a_link = $(this).find("a").attr("href");
$(".calendar-date .item").each(function () {
if ($(this).attr("data") == text_zhi) {
$(this).attr("data-href", a_link);
$(this).addClass("hashy");
}
});
});
}
$(".meeting_nr_a").click(function () {
$(".meetingwhite_bg").show();
});
$(".white_close").click(function () {
$(".meetingwhite_bg").hide();
});
});