jquery日历插件SimpleCalendar

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

 100034  461  查看评论 (159)
分享到微信朋友圈
X
jquery日历插件SimpleCalendar ie兼容10

更新时间:2019-07-30 16:36:32

更新说明:修复显示undefined


Simple-Calendar作用方法

引入资源

使用日历插件前首先要引用资源:JS CSS

<link rel="stylesheet" type="text/css" href="css/simple-calendar.css">
<script type="text/jacascrip" src="js/simple-calendar.js"></script>

初始化一个日历

首先为calendar准备一个容器,可以设置大小,也可以在options中设置,不设置的话自动设为默认

<div id='container'></div>
<script>
    var myCalendar = new SimpleCalendar('#container');
</script>

这样一个日历就诞生了 ^-^

配置项说明

var options = {
      width: '500px',
      height: '500px',
      language: 'CH', //语言
      showLunarCalendar: true, //阴历
      showHoliday: true, //休假
      showFestival: true, //节日
      showLunarFestival: true, //农历节日
      showSolarTerm: true, //节气
      showMark: true, //标记
      timeRange: {
        startYear: 1900,
        endYear: 2049
      },
      mark: {
        '2016-5-5': '上学'
      },
      theme: {
        changeAble: false,
        weeks: {
          backgroundColor: '#FBEC9C',
          fontColor: '#4A4A4A',
          fontSize: '20px',
        },
        days: {
          backgroundColor: '#ffffff',
          fontColor: '#565555',
          fontSize: '24px'
        },
        todaycolor: 'orange',
        activeSelectColor: 'orange',
      }
    }

国际化

language: 语言的话目前只支持中文和英文,分别对应'CH','EN'

如果想要加更多的语言或者更改现在的显示,可以直接更改languageData内容

节日显示配置

showLunarCalendar: true, //是否显示阴历日期
showHoliday: true,       //是否显示休假休假
showFestival: true,      //是否显示国际节日
showLunarFestival: true, //是否显示农历节日
showSolarTerm: true,     //是否显示节气
showMark: true,          //是否显示标记日期

时间范围

这个时间范围设置的是下拉框中的年数范围

timeRange: {
    startYear: 1900,
    endYear: 2049
}

标记日期

标记日期配置只有在 showMark 为 true 时才会生效

mark: {
        '2016-5-5': '上学'
    }

这样就会在日历的对应日期上面添加标记,当鼠标停留时显示输入的信息

主题配置

theme: {
    changeAble: false,
    weeks: {
        backgroundColor: '#FBEC9C',
        fontColor: '#4A4A4A',
        fontSize: '20px',
    },
    days: {
        backgroundColor: '#ffffff',
        fontColor: '#565555',
        fontSize: '24px'
    },
    todaycolor: 'orange',
    activeSelectColor: 'orange',
   
}

主题配置只有在changeAble 为 true 时才会生效 weeks 设置的是星期一栏的主题,分别对应背景颜色,字体颜色,字体大小 days 设置的是日期的主题,参数同上 todaycolor 设置的是当天的日期背景颜色 activeSelectColor 设置的是鼠标滑过事件对应日期的边框颜色

事件接口说明

myCalendar.updateSize('500px', '500px');
myCalendar.addMark('2016-3-7', 'test');
myCalendar.setLanguage('EN')
myCalendar.showFestival(false);
myCalendar.showLunarCalendar(false);
myCalendar.showHoliday(false);
myCalendar.showSolarTerm(false);
myCalendar.showLunarFestival(false);
myCalendar.showMark(false);
updateSize(width,height)

调整日历大小,会自动根据大小调整对应的样式

addMark(day, info)

day 是一个可以确定一个日期的字符串 info 是要显示的信息

setLenguage(languageStr)

设置语言,目前支持的语言有'CH','EN' 如果想要增加语言,请在languageData中修改

其他

//关闭或者显示国际节日
showFestival(false); 
//关闭或者显示阴历日期
showLunarCalendar(false);
//关闭或者显示假期
showHoliday(false);
//关闭或者显示二十四节气
showSolarTerm(false);
//关闭或者显示阴历节日
showLunarFestival(false);
//关闭或者显示标记
showMark(false)
相关插件-日期和时间

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

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

基于bootstrap按年、季度、年月、年月日的日历插件(原创)

基于bootstrap按年、季度、年月、年月日的日历插件,作为bootstrapdatetimepicker的扩展
  日期和时间
 11489  95

jQuery移动端时间插件

手机上选择机票的时间插件
  日期和时间
 39061  280

移动端日期选择插件mdater

移动端日期选择插件mdater,日历控件
  日期和时间
 48786  292

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

    全网--程伟恒 0
    2020/8/25 11:42:38
    我想问一下怎么在前台获取点击的日期
    回复
    猫。 0
    2020/2/21 11:24:15
    发现一个问题。2020年农历四月之后往后的月份都是四月,无法进入五月。谁知道为什么?
        Sone丶宇0
        2020/4/9 13:38:22
        请问找到什么原因了吗? 我这边IE也是这个问题
        aimisilinm1
        2020/5/25 16:38:03
        //闰月
        if (leap > 0 && i == leap + 1 && this.isLeap == false) {
            --i;
            this.isLeap = true; //加上这句
            temp = this.leapDays(this.year);
        }
    回复
    牧之 0
    2020/1/7 16:35:55
    怎么把星期天放在星期一的前边,有哪位道友知道该怎么改吗 回复
    溪柳沙清 0
    2019/11/16 15:01:44
    想再上面加一个 每个日期都有指定的内容 在里边显示 怎么去拓展 回复
    大蛋糕 0
    2019/11/6 14:54:56
    为什么 getSelectedDay() 获得当前日期这个方法 始终是当天,而不是选中的 回复
    小怪兽 ?? 2
    2019/11/4 15:28:18

    日历显示应为6行,现在只显示了5行,这样会导致有些日期没了。例如2019年9月份和12月份只有29天。
    原代码:

    for (var i = 0; i < 35; i++) {
        ......
    }
    //对每一个格子遍历
    for (var i = 0; i < 35; i++) {
        ......
    }
    修改为:
    for (var i = 0; i < 42; i++) {
        ......
    }
    //对每一个格子遍历
    for (var i = 0; i < 42; i++) {
        ......
    }

    将对日历格子的遍历次数改成42就可以了。

        稻草lemon1
        2019/11/13 9:31:36

        同样 css样式也要跟着改下才能显示出来

        .sc-days {
            height: 90%;
        }
        .sc-item {
            height: 16%;
        }
        萍子20190
        2020/3/31 17:17:24
        改了之后,没有问题的月份变成有两个今天的样式
    回复
    枫书诸邪 1
    2019/9/29 15:44:54

    点击获取日期中,如果是非当前月份的天数可能会有问题,我把源码改了如下:

    {
        key: 'getSelectedDay',
        value: function getSelectedDay() {
            var selectYear = this.container.querySelector('.sc-select-year').value;
            var selectMonth = this.container.querySelector('.sc-select-month').value;
            var selectDay = this.selectDay.querySelector('.day').innerHTML;
            var cq = this.container.querySelector(".sc-selected.sc-othermenth");
            if (cq) {
                //点击的日期是其他月份的
                if (selectDay > 15) {
                    //上个月
                    return new Date(selectYear, selectMonth - 2, selectDay);
                } else {
                    //下个月
                    return new Date(selectYear, selectMonth, selectDay);
                }
            }
            return new Date(selectYear, selectMonth - 1, selectDay);
        }
        枫书诸邪0
        2019/9/29 15:57:17
        simple-calendar.js 第697行附近或者
        simple-calendar-es6.js 第662行附近,看你用哪个
    回复
    猫。 1
    2019/9/4 10:53:58

    别的问题我看大家都有解决,我再说一个小小bug。
    设置起止年份:

    timeRange: {
        startYear: 1900,
        endYear: 2049
    },

    设置到想要的年份,比如:

    timeRange: {
        startYear: 1900,
        endYear: 2200
    },

    一定要在js中的第27行处,更改循环条件,否则大于条件的年份农历都为undefined

    for (i = 1900; i < 2200 && offset - this.lYearDays(i) > 0; i++) {}

    刚刚又发现了个bug,就是我更改了循环条件后,从2195年开始到2200年,农历日期依然为undefined,暂时没发现什么问题。我暂时只好,循环条件不变,将截止年份更改为2194年。那个哥们儿发现怎么回事了,说一声。

    回复
    华瑞天启 0
    2019/8/20 10:07:57
    节气显示不对,在simple-calendar.js文件的最后将数据都写死了。 回复
    Animals 0
    2019/8/16 16:26:18
    9月和12月只有29天,有大佬知道怎么解决吗?
        枫书诸邪0
        2019/9/29 16:00:07
        前面有大佬解决了,我就不多说了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复