jquery表格日历写入html代码,简单的日历记事本jQuery插件e-calendar(带样式美化)

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

使用教程：

1、引入e-calendar插件

2、HTML代码

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: ''}, /*月份切换箭头*/

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 = $('

var cEvents = $('

var cEventsBody = $('

cEventsBody.append($('

×'));

cEvents.append(cEventsBody);

var cNext = $('

var cMonth = $('

var cPrevious = $('

cPrevious.html(settings.textArrows.previous);

cMonth.html(''+settings.months[dMonth]+'' + ' ' + 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 = $('

cWeekDay.html(settings.weekDays[dayOfWeek]);

cBody.append(cWeekDay);

dayOfWeek++;

}

var day = 1;

var dayOfNextMonth = 1;

for (var i = 0; i < 42; i++) {

var cDay = $('

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(''+ day++ +'');

} else {

cDay.addClass('c-day-next-month c-pad-top');

cDay.html(dayOfNextMonth++);

}

cBody.append(cDay);

}

var eventList = $('

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 = $('

var title = $('

' + date +'

' + ' ' + settings.events[i].title + '

');

var 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: ''},

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代码：

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*/