简单的日历记事本jQuery插件e-calendar(带样式美化)

e-calendar是记录或设置指定日期事件的一款jQuery插件，类似于工作备忘录的功能。

Github主页：https://github.com/jhonis/e-calendar

使用教程：

1、引入e-calendar插件

<script src="js/jquery.min.js"></script> <!--这是jQuery库文件-->
<script src="js/jquery.e-calendar.js"></script> <!--这是e-calendar插件文件-->

2、HTML代码

<div id="calendar"></div>

3、参数配置

weekDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'], /*星期*/
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', /*月份*/
         'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
textArrows: {previous: '<', next: '>'}, /*月份切换箭头*/
eventTitle: 'Eventos', /*事件标题*/
url: '', /*URL*/
events: [
    {title: 'Event Title 1', description: 'Description 1', datetime: new Date(2016, 0, 12, 17)},
    {title: 'Event Title 2', description: 'Description 2', datetime: new Date(2016, 0, 23, 16)}
], /*事件列表*/
firstDayOfWeek: 0 /*每周的第一天*/

events()属性说明：

• title：自定义事件的标题
• description：自定义事件描述
• datetime：该事件发生的日期和时间

3、使用示例

$('#calendar').eCalendar({url: 'loadCalendar'});

$('#calendar').eCalendar({
	events: [
	    {title: 'Event Title 1', description: 'Description 1', datetime: new Date(2016, 0, 12, 17)},
	    {title: 'Event Title 2', description: 'Description 2', datetime: new Date(2016, 0, 23, 16)}
	]
});

$('#calendar').eCalendar({
	url: 'loadCalendar',
	weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
	firstDayOfWeek: 1
}); // calendar starting on monday | (0 - 6: week days format)

//With links on the description
$('#calendar').eCalendar({
    events: [
        {
          title: 'Event Title 1', 
          description: 'Description 1. Without link', 
          datetime: new Date(2016, 9, 20, 17) 
        },
        {
          title: 'Event Title 2', 
          description: 'Description 2. Only with link opening in the same tab', 
          datetime: new Date(2016, 9, 23, 16), 
          url: "https://www.google.com"
        },
        {
          title: 'Event Title 2', 
          description: 'Description 3. With link opening on new tab', 
          datetime: new Date(2016, 9, 23, 16), 
          url: "https://www.google.com", 
          url_blank: true
        },
        {
          title: 'Event Title 2', 
          description: 'Description 4. Only with link opening in the same tab', 
          datetime: new Date(2016, 9, 23, 16), 
          url: "https://www.google.com", 
          url_blank: false
        }
    ]
});

提示：在日期对象实例化中，如下面的代码，月份从0到11开始，生成日期：31/01/2016

new Date(2016, 0, 31)

扩展：代码及样式改造（样式美化、弹窗）

1、e-calendar.js插件代码

/**
 * @license e-Calendar v0.9.3
 * (c) 2014-2016 - Jhonis de Souza
 * License: GNU
 * Modified by neirong.org
 */

(function ($) {

    var eCalendar = function (options, object) {
        // Initializing global variables
        var adDay = new Date().getDate();
        var adMonth = new Date().getMonth();
        var adYear = new Date().getFullYear();
        var dDay = adDay;
        var dMonth = adMonth;
        var dYear = adYear;
        var instance = object;

        var settings = $.extend({}, $.fn.eCalendar.defaults, options);

        function lpad(value, length, pad) {
            if (typeof pad == 'undefined') {
                pad = '0';
            }
            var p;
            for (var i = 0; i < length; i++) {
                p += pad;
            }
            return (p + value).slice(-length);
        }

        var mouseOver = function () {
            $(this).addClass('c-nav-btn-over');
        };
        var mouseLeave = function () {
            $(this).removeClass('c-nav-btn-over');
        };
        var mouseOverEvent = function () {
            $(this).addClass('c-event-over').siblings('.c-event').removeClass('c-event-over');
            var d = $(this).attr('data-event-day');
            $('div.c-event-item[data-event-day="' + d + '"]').addClass('c-event-over').siblings().removeClass('c-event-over');
            $('.c-event-grid').show();
        };
        var mouseLeaveEvent = function () {
            $(this).removeClass('c-event-over')
            var d = $(this).attr('data-event-day');
            $('div.c-event-item[data-event-day="' + d + '"]').removeClass('c-event-over');
        };
        var mouseOverItem = function () {
            $(this).addClass('c-event-over');
            var d = $(this).attr('data-event-day');
            $('div.c-event[data-event-day="' + d + '"]').addClass('c-event-over').siblings().removeClass('c-event-over');
            $('.c-event-grid').show();
        };
        var mouseLeaveItem = function () {
            $(this).removeClass('c-event-over')
            var d = $(this).attr('data-event-day');
            $('div.c-event[data-event-day="' + d + '"]').removeClass('c-event-over');
        };
        var close = function () {
            $('.c-event-grid').hide();
            $('.c-event').removeClass('c-event-over');
            $('.c-event-item').removeClass('c-event-over');
        };
        var nextMonth = function () {
            if (dMonth < 11) {
                dMonth++;
            } else {
                dMonth = 0;
                dYear++;
            }
            print();
            $('.close').on('click',close);
        };
        var previousMonth = function () {
            if (dMonth > 0) {
                dMonth--;
            } else {
                dMonth = 11;
                dYear--;
            }
            print();
            $('.close').on('click',close);
        };

        function loadEvents() {
            if (typeof settings.url != 'undefined' && settings.url != '') {
                $.ajax({url: settings.url,
                    async: false,
                    success: function (result) {
                        settings.events = result;
                    }
                });
            }
        }

        function print() {
            loadEvents();
            var dWeekDayOfMonthStart = new Date(dYear, dMonth, 1).getDay() - settings.firstDayOfWeek;
            if (dWeekDayOfMonthStart < 0) {
                dWeekDayOfMonthStart = 6 - ((dWeekDayOfMonthStart + 1) * -1);
            }
            var dLastDayOfMonth = new Date(dYear, dMonth + 1, 0).getDate();
            var dLastDayOfPreviousMonth = new Date(dYear, dMonth + 1, 0).getDate() - dWeekDayOfMonthStart + 1;

            var cBody = $('<div/>').addClass('c-grid');
            var cEvents = $('<div/>').addClass('c-event-grid');
            var cEventsBody = $('<div/>').addClass('c-event-body');
            cEventsBody.append($('<div/>').addClass('c-event-title c-pad-top').html(settings.eventTitle + '<span class="close">×</span>'));
            cEvents.append(cEventsBody);
            var cNext = $('<div/>').addClass('c-next c-grid-title c-pad-top');
            var cMonth = $('<div/>').addClass('c-month c-grid-title c-pad-top');
            var cPrevious = $('<div/>').addClass('c-previous c-grid-title c-pad-top');
            cPrevious.html(settings.textArrows.previous);
            cMonth.html('<i>'+settings.months[dMonth]+'</i>' + ' ' + dYear);
            cNext.html(settings.textArrows.next);

            //cPrevious.on('mouseover', mouseOver).on('mouseleave', mouseLeave).on('click', previousMonth);
            cPrevious.on('click', previousMonth);
            //cNext.on('mouseover', mouseOver).on('mouseleave', mouseLeave).on('click', nextMonth);
            cNext.on('click', nextMonth);
            

            cBody.append(cPrevious);
            cBody.append(cMonth);
            cBody.append(cNext);
            var dayOfWeek = settings.firstDayOfWeek;
            for (var i = 0; i < 7; i++) {
                if (dayOfWeek > 6) {
                    dayOfWeek = 0;
                }
                var cWeekDay = $('<div/>').addClass('c-week-day c-pad-top');
                cWeekDay.html(settings.weekDays[dayOfWeek]);
                cBody.append(cWeekDay);
                dayOfWeek++;
            }
            var day = 1;
            var dayOfNextMonth = 1;
            for (var i = 0; i < 42; i++) {
                var cDay = $('<div/>');
                if (i < dWeekDayOfMonthStart) {
                    cDay.addClass('c-day-previous-month c-pad-top');
                    cDay.html(dLastDayOfPreviousMonth++);
                } else if (day <= dLastDayOfMonth) {
                    cDay.addClass('c-day c-pad-top');
                    if (day == dDay && adMonth == dMonth && adYear == dYear) {
                        cDay.addClass('c-today');
                    }
                    for (var j = 0; j < settings.events.length; j++) {
                        var d = settings.events[j].datetime;
                        if (d.getDate() == day && d.getMonth() == dMonth && d.getFullYear() == dYear) {
                            cDay.addClass('c-event').attr('data-event-day', d.getDate());
                            //cDay.on('mouseover', mouseOverEvent).on('mouseleave', mouseLeaveEvent);
                            cDay.on('click', mouseOverEvent);
                            
                        }
                    }
                    cDay.html('<span>'+ day++ +'</span>');
                } else {
                    cDay.addClass('c-day-next-month c-pad-top');
                    cDay.html(dayOfNextMonth++);
                }
                cBody.append(cDay);
            }
            var eventList = $('<div/>').addClass('c-event-list');
            for (var i = 0; i < settings.events.length; i++) {
                var d = settings.events[i].datetime;
                if (d.getMonth() == dMonth && d.getFullYear() == dYear) {
                    //var date = lpad(d.getDate(), 2) + '/' + lpad(d.getMonth() + 1, 2) + ' ' + lpad(d.getHours(), 2) + ':' + lpad(d.getMinutes(), 2);
                    var date = lpad(d.getDate(), 2) + '/' + lpad(d.getMonth() + 1, 2);
                    var item = $('<div/>').addClass('c-event-item');
                    var title = $('<div/>').addClass('title').html('<time>' + date +'</time><h2>' + '  ' + settings.events[i].title + '</h2>');
                    var description = $('<div/>').addClass('description').html(settings.events[i].description);
                    item.attr('data-event-day', d.getDate());
                    //item.on('mouseover', mouseOverItem).on('mouseleave', mouseLeaveItem);
                    item.on('click', mouseOverItem);
                   
                    item.append(title).append(description);
                    eventList.append(item);
                }
            }
            $(instance).addClass('calendar');
            cEventsBody.append(eventList);
            $(instance).html(cBody).append(cEvents);
        }
        return print();
    }

    $.fn.eCalendar = function (oInit) {
        return this.each(function () {
            return eCalendar(oInit, $(this));
        });
    };

    // plugin defaults
    $.fn.eCalendar.defaults = {
        weekDays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        textArrows: {previous: '<', next: '>'},
        eventTitle: 'Events',
        url: '',
        events: [
            {title: 'Evento de Abertura', description: 'Abertura das Olimpíadas Rio 2016', datetime: new Date(2016, new Date().getMonth(), 12, 17)},
            {title: 'Tênis de Mesa', description: 'BRA x ARG - Semifinal', datetime: new Date(2016, new Date().getMonth(), 23, 16)},
            {title: 'Ginástica Olímpica', description: 'Classificatórias de equipes', datetime: new Date(2016, new Date().getMonth(), 31, 16)}
        ],
        firstDayOfWeek: 1
    };

}(jQuery));

2、HTML代码：

<!-- neirong.org -->
<div class="setCalendar">
	<div id="calendar"></div>
</div>
<!-- neirong.org -->

3、CSS代码：

/*setCalendar neirong.org*/
.setCalendar {
  width: 500px;
  display: table-cell;
  vertical-align: bottom;
  padding: 0 20px;
}
.setCalendar .calendar {
  background-color: #eef7fd;
  padding: 8.6% 10%;
  border-radius: 20px;
}
.c-grid {
  position: relative;
  font-size: 16px;
  overflow: hidden;
}
.c-grid .c-month {
  font-size: 22px;
  text-align: center;
  color: #333;
  height: 25px;
  line-height: 25px;
  margin-bottom: 20px;
}
.c-grid .c-month i {
  font-style: normal;
  color: #ff0101;
  margin-right: 5px;
}
.c-grid .c-previous,
.c-grid .c-next {
  width: 12px;
  height: 22px;
  position: absolute;
  top: 1.5px;
  background: no-repeat center center;
  background-size: contain;
  font-size: 0;
  cursor: pointer;
}
.c-grid .c-previous {
  left: 8.75%;
  background-image: url(../images/icon_09.png); /*箭头图标，自行替换 neirong.org*/
}
.c-grid .c-next {
  right: 8.75%;
  background-image: url(../images/icon_10.png); /*箭头图标，自行替换 neirong.org*/
}
.c-grid .c-week-day {
  font-size: 16px;
  color: #8a837d;
  text-transform: uppercase;
  width: 14.28%;
  padding: 10px 0;
  float: left;
  text-align: center;
}
.c-grid .c-day-previous-month,
.c-grid .c-day-next-month {
  width: 14.28%;
  height: 29px;
  line-height: 29px;
  padding: 10px 0;
  float: left;
  text-align: center;
  color: #b7aaa1;
}
.c-grid .c-day {
  width: 14.28%;
  height: 29px;
  line-height: 29px;
  float: left;
  text-align: center;
  padding: 10px 0;
}
.c-grid .c-day span {
  display: block;
  border-radius: 50%;
  width: 29px;
  height: 29px;
  margin: 0 auto;
  position: relative;
}
.c-grid .c-today span {
  background-color: #ff0101;
  color: #fff;
}
.c-grid .c-today.c-event span {
  color: #fff;
}
.c-grid .c-event span {
  color: #ff0101;
  cursor: pointer;
}
.c-grid .c-event span:after {
  width: 4px;
  height: 4px;
  background-color: #ff0101;
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
.c-grid .c-event-over span {
  background-color: #ff0101;
  color: #fff;
}
.c-event-grid {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  width: 500px;
  transform: translateY(-50%);
  z-index: 6;
  display: none;
  box-shadow: 0px 0px 10px #ddd;
  border-radius: 20px;
  overflow: hidden;
}
.c-event-grid .c-event-body {
  overflow: hidden;
  background-color: #fff;
}
.c-event-grid .c-event-title {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  background-color: #879bbc;
  color: #fff;
  position: relative;
}
.c-event-grid .close {
  border: 1px solid #fff;
  color: #fff;
  font-size: 22px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-weight: normal;
  line-height: 30px;
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.c-event-grid .c-event-list {
  border: 1px solid #eaeaea;
  overflow: auto;
}
.c-event-grid .c-event-item {
  padding: 20px;
  display: none;
  height: auto;
  max-height: 250px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.c-event-grid .c-event-item .title {
  margin-bottom: 10px;
}
.c-event-grid .c-event-item time {
  display: block;
  color: #999;
  font-size: 14px;
}
.c-event-grid .c-event-item h2 {
  font-size: 18px;
  color: #333;
  line-height: 1.35em;
}
.c-event-grid .c-event-item .description {
  font-size: 14px;
  line-height: 1.75em;
  color: #555;
}
.c-event-grid .c-event-over {
  display: block;
}
/*setCalendar neirong.org*/

3、js代码

/*calendar neirong.org*/
$('#calendar').eCalendar({
	url: 'loadCalendar', 
	events: [
		{title: 'Evento de Abertura', description: 'Abertura das Olimpíadas Rio 2019', datetime: new Date(2019, 5, 12)},
		{title: 'Tênis de Mesa', description: 'BRA x ARG - Semifinal', datetime: new Date(2019, 5, 15)},
		{title: 'Ginástica Olímpica', description: 'Classificatórias de equipes', datetime: new Date(2019, 4, 1)}
	]
});	

$('.c-event-grid .close').click(function(){
	$('.c-event-grid').hide();
	$('.c-event').removeClass('c-event-over');
	$('.c-event-item').removeClass('c-event-over');
});
/*calendar neirong.org*/