jQuery事件日历插件e-calendar,支持针对指定日期自定义日程安排(无条数限制),设置过日程的日期会高亮显示,兼容IE7+主流浏览器。
原版使用方法及演示地址:e-calendar原版 (鼠标移动到天显示当天的日程安排)
升级版介绍:
1.同一天可存在多个事件交集
2.点击天在日历下方出现日程列表
3.点击日程列表可添加其事件 。
4.添加item-grid的显示和隐藏
5.Events中数组集合可添加id,type等元素(区分日程类型:任务类型或日程类型)
6.增加年份选择,月份选择
7.样式调整
8.将ajax加载事件,item点击事件等写在calendar配置中
运行效果图:
主要代码:
index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/jquery.e-calendar.css" /> <script src="/UploadFiles/2021-04-02/jquery-1.11.0.min.js">通过$('#calendar').eCalendar()来配置日历加载
参数
yearRange:年下拉框范围
months:月下拉框
initData:数据初始化调用的函数
clickItem:日历列表点击事件
jquery.e-calendar.js
/** * @license e-Calendar v2.0.0 * (c) 2016- 11 * License: CHN */ (function ($) { var dMonth = new Date().getMonth(); var dYear = new Date().getFullYear(); 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 testFunction=function(){ alert('function active'); } var onItemGridClose = function () { $(".c-event-grid").css("display", "none"); }; //日历天事件 var mouseOverEvent = function () { $(this).addClass('c-event-over'); var d = $(this).attr('data-event-day'); $('div.c-event-item[data-event-day="' + d + '"]').addClass('c-event-over'); }; var mouseClickEvent = function () { $(".c-event-grid").css("display", ""); $('div.c-day').removeClass('c-event-over') $('div.c-event-item').removeClass('c-event-over'); $(this).addClass('c-event-over'); var d = $(this).attr('data-event-day'); $('div.c-event-item[data-event-day="' + d + '"]').addClass('c-event-over'); }; var mouseLeaveEvent = function () { }; var mouseClickItem = settings.clickItem; var mouseOverItem = function () { $(this).addClass('c-event-over-item'); }; var mouseLeaveItem = function () { $(this).removeClass('c-event-over-item') }; var nextMonth = function () { if (dMonth < 11) { dMonth++; } else { dMonth = 0; dYear++; } init_eCalendar(); var ajaxMonth = dYear + "-" + (dMonth - (-1)); loadeCalendarByAjax(settings, ajaxMonth); }; var previousMonth = function () { if (dMonth > 0) { dMonth--; } else { dMonth = 11; dYear--; } init_eCalendar(); var ajaxMonth = dYear + "-" + (dMonth - (-1)); loadeCalendarByAjax(settings, ajaxMonth); }; var selectYear=function(){ dYear=$("#selYears").val(); init_eCalendar(); var ajaxMonth = dYear + "-" + (dMonth - (-1)); loadeCalendarByAjax(settings, ajaxMonth); } var selectMonth=function(){ dMonth=$("#selMonths").val(); init_eCalendar(); var ajaxMonth = dYear + "-" + (dMonth - (-1)); loadeCalendarByAjax(settings, ajaxMonth); } function loadEvents() { if (typeof settings.initData != 'undefined' && settings.initData) { var ajaxMonth = dYear + "-" + (dMonth - (-1)); loadeCalendarByAjax(settings, ajaxMonth);//调前台的方法请求 } } //初始化加载事件 function loadeCalendarByAjax(settings, ajaxMonth) { if (typeof settings.initData != 'undefined') { settings.initData(settings, ajaxMonth); } } function init_eCalendar() { loadEvents(); var dWeekDayOfMonthStart = new Date(dYear, dMonth, 1).getDay(); 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'); cEvents.css("display", "none"); //默认隐藏 var cEventsBody = $('<div/>').addClass('c-event-body'); cEvents.append($('<div/>').addClass('c_title_sj').html(settings.eventTitle)); //标题 //关闭按钮 var itemClose = $('<div/>').on('click', onItemGridClose).attr("href", "javascipt:void(0)"); var itemClose_a = $('<a/>').on('click', onItemGridClose).attr("href", "javascipt:void(0)") .html('<img src="/UploadFiles/2021-04-02/calendar_delete_icon.png">下载地址:e-calendar-v2
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月30日
2024年11月30日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]