calendar插件做日程添加提示小红点、事件日期提醒插件

最新推荐文章于 2024-12-26 15:17:25 发布

豆沙馅包子丶

最新推荐文章于 2024-12-26 15:17:25 发布

阅读量5.1k

点赞数

分类专栏： JS 前端 calendar 事件插件日期插件日程提醒插件

本文链接：https://blog.youkuaiyun.com/code_wins_args/article/details/82463710

版权

前端同时被 3 个专栏收录

3 篇文章

订阅专栏

2 篇文章

订阅专栏

calendar

1 篇文章

订阅专栏

今天遇到个有趣的需求，要做一个类似TIM的日程功能，百度了一圈没有例子，只好自己改了，基于calendar修改的日程提醒插件

目录结构

直接上代码，修改部分主要有两处

CSS中修改如下

* { margin: 0; padding: 0; }
body { font-family: "Microsoft Yahei"; font-size: 12px; color: #888; }
a, a:hover { color: #888; text-decoration: none; }
ul, li { list-style: none; }

.calendar {
display: none;
width: 400px;
background-color: #fafafa;
border: 1px #E5E5E5 solid;
}
.calendar-title {
position: relative;
height: 30px;
line-height: 30px;
padding: 10px 0;
}
.calendar-title a.title {
display: inline-block;
font-size: 26px;
text-indent: 10px;
}
#backToday {
position: absolute;
left: 70%;
top: 8px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
color: #fff;
background-color: #1E90FF;
font-size: 18px;
}
.circle{
width: 7px;
height: 7px;
background-color:red;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin-left:20px;
}
.calendar-title .arrow {
position: absolute;
top: 10px;
right: 10px;
width: 50px;
}
.calendar-title .arrow span {
color: #ddd;
font-size: 26px;
cursor: pointer;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
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: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.calendar-week {
padding-bottom: 6px;
border-bottom: 1px solid #1E90FF;
font-weight: bold;
font-size: 16px;
margin-left: 5%;
}
.calendar-date {
margin-left: 5%;

}
.calendar-date .item {
border-radius: 50%;
cursor: pointer;
font-size: 14px;
margin-bottom:10px;
}
.calendar-date .item:hover,
.calendar-date .item-curMonth:hover {
background-color: #f0f0f0;
}
.calendar-date .item-curMonth {
color: #333;
}
.calendar-date .item-curDay,
.calendar-date .item-curDay:hover {
color: #fff;
background-color: #1E90FF;

}
.calendar-today {
display: none;
opacity: 0;
position: absolute;
right: 20px;
top: 20px;
width: 90px;
height: 48px;
padding: 6px 10px;
background-color: #1E90FF;
border-radius: 5px;
}
.calendar-today .triangle {
position: absolute;
top: 50%;
left: -16px;
margin-top: -8px;
border-width: 8px;
border-style: solid;
border-color: transparent #1E90FF 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);

// console.log(this.opts);
};

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 = _dateStr.substr(0, 4) + '-' + _dateStr.substr(4, 2) + '-' + _dateStr.substring(6);
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, opacity: 1});

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) {
       var childdiv=$('<div class="circle"></div>');
       $(this).attr('class', 'item item-curDay');
       $(this).append(childdiv);
} else if (returnDateStr(firstDay).substr(0, 6) === allDay_str.substr(0, 6)) {
$(this).attr('class', 'item item-curMonth');
} else {
$(this).attr('class', 'item');
}
});
},

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">T</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.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) {
this.$backToday.bind('click', function () {
if (!self.$calendarDate_item.hasClass('item-curDay')) {
dateObj.setDate(new Date());

self.showCalendar();
}
});
}

this.$calendarDate_item.hover(function () {
self.showHoverInfo($(this));
}, function () {
self.$calendar_today.css({left: 0, top: 0}).hide();
});
},

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;
};