ecalendar日历插件优化版v1

所属分类:输入-日期和时间

 14475  178  查看评论 (0)
分享到微信朋友圈
X
ecalendar日历插件优化版v1 ie兼容11

更新时间:2019-09-22 12:56:13

个人修改说明:

1、修改标注:

  • 修改字体对齐问题以及外观

  • 修改鼠标悬浮时显示对应日期的事项

  • 修改当日日期显示样式

  • 修改鼠标指向日期时事项面板滑出显示

  • 修复前一个月日期显示错误的问题

  • 更改样式为以往、当前、代办、今日

  • 添加样式提醒

2、datetime参数为object,需在前端进行创建:

let datas = res.data;
for (var i = 0; i < datas.length; i++) {
    let data = datas[i];
    data['datetime'] = new Date(data['year'], data['month'], data['day'], data['time']);
}

3、初始化配置后再进行初始化操作

//初始化配置
$.fn.eCalendar.defaults = {
    weekDays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    textArrows: {
        previous: '<',
        next: '>'
    },
    eventTitle: '本月登记事项',
    url: '',
    events: datas,
    firstDayOfWeek: 0
};
//初始化
$(document).ready(function() {
    $('#calendar').eCalendar();
});

4、数据格式

{title: ' - 18:00', description: '小组会议', datetime: new Date(2019, 8, 23, 16)}

插件官方说明:

插件描述:e-calendar是一个jQuery插件,创建一个事件日历它很容易使用。

如何使用

生成一个日历的最简单的方法是创建一个div元素,也可以选择使用jQuery。例如:

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

选项(默认):

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: '',
events: [
   {title: 'Event Title 1', description: 'Description 1', datetime: new Date(2014, 7, 12, 17)},
   {title: 'Event Title 2', description: 'Description 2', datetime: new Date(2014, 7, 17, 16)}
]

事件对象的属性

  • title:标题以粗体显示的事件,

  • description:事件描述

  • datetime:日期和时间的事件

使用例子:

$('#calendar').eCalendar({url: 'loadCalendar'});
$('#calendar').eCalendar({
   events: [
       {title: 'Event Title 1', description: 'Description 1', datetime: new Date(2014, 7, 12, 17)},
       {title: 'Event Title 2', description: 'Description 2', datetime: new Date(2014, 7, 17, 16)}
   ]
});
$('#calendar').eCalendar({url: 'loadCalendar',
weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']});
相关插件-日期和时间

timeago.js自动将时间戳转换为更易读的时间轴

timeago.js是一款基于jQuery的时间处理插件,它可以轻易的将时间戳转换成如:5分钟前,约3小时前这样的更友好易读的时间轴,而且使用timeago.js无需刷新页面即自动更新页面时间的显示。
  日期和时间
 31116  344

js css3扁平化APP图标时钟动画

js css3扁平化APP图标时钟动画
  日期和时间
 25037  327

JQ倒计时代码精确到毫秒

JQ倒计时代码精确到毫秒
  日期和时间
 46141  370

Jquery滑动日期输入控件

Jquery滑动日期输入控件,手机使用效果最佳
  日期和时间
 39103  356

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复