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

傷城~ 2022-05-14 10:28 486阅读 0赞

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

目录结构

![70][]

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

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

function changingStr(fDate) \{ // 字符串转日期  
    var fullDate = fDate.split("-");  
      
    return new Date(fullDate\[0\], fullDate\[1\] - 1, fullDate\[2\]);   
  \};

\})(jQuery, window, document);

HTML页面

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>DEMO</title>  
<link rel="stylesheet" href="css/calendar.css">  
</head>  
<body>

</body>  
</html>

注：标红部分为新添加的，文字示例会在当前日期下显示一个小红点。大家可根据业务需求自信判断在哪个位置显示。

[70]: /images/20220514/744b40ba2cc4461394ad337d72fa8b42.png