农历版的FullCalendar插件

分享一个农历版的FullCalendar插件:

精简版如下图:

 

 代码同样适用ajax异步,带有order排序:

$(function(){
        var dayDate = new Date();
        var d = $.fullCalendar.formatDate(dayDate,"dddd");
        var m = $.fullCalendar.formatDate(dayDate,"yyyy年MM月dd日");
        var lunarDate = lunar(dayDate);
        $(".alm_date").html(m + " " + d);
        $(".today_date").html(dayDate.getDate())
        $("#alm_cnD").html("农历"+ lunarDate.lMonth + "月" + lunarDate.lDate);
        $("#alm_cnY").html(lunarDate.gzYear+"年 "+lunarDate.gzMonth+"月 "+lunarDate.gzDate+"日");
        $("#alm_cnA").html("【"+lunarDate.animal+"年】");
        var fes = lunarDate.festival();
        if(fes.length>0){
            $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
            $(".alm_lunar_date").show();
        }else{
            $(".alm_lunar_date").hide();
        }
        
    });
    /** calendar配置 **/
    $(document).ready(
    function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $('#calendar2').fullCalendar({
        events: [{
            title: '当日事件',
            order: 1,
            start: new Date(y, m, 1),
            backgroundColor: "#f56954", //red
            borderColor: "#f56954" //red
        },{
            title: '全天事件',
            order: 2,
            start: new Date(y, m, 1),
            backgroundColor: "#f56954", //red
            borderColor: "#f56954" //red
        },
        {
            title: '长事件',
            order: 3,
            start: new Date(y, m, d - 5),
            end: new Date(y, m, d - 2),
            backgroundColor: "#f39c12", //yellow
            borderColor: "#f39c12" //yellow
        }],
        eventOrder: 'order',strictMode:true
});
更多配置和事件见源码。下载地址

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
FullCalendar 是一个非常流行的日历插件,可以用来显示日程安排、事件等。它支持各种不同的视图(月视图、周视图、日视图等),并且可以自定义事件的颜色、标签等。 使用 FullCalendar 插件,你需要先在页面中引入 FullCalendarJavaScript 和 CSS 文件。然后,你需要在页面中创建一个空的 `div` 元素,并给它一个唯一的 ID。接下来,你可以在 JavaScript 中初始化 FullCalendar,并指定要显示的数据源(比如一个 JSON 数据文件或一个 AJAX 调用)。 以下是一个简单的 FullCalendar 示例代码: HTML 代码: ```html <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' rel='stylesheet' /> <link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.print.min.css' rel='stylesheet' media='print' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script> </head> <body> <div id='calendar'></div> <script> $(document).ready(function() { // page is now ready, initialize the calendar... $('#calendar').fullCalendar({ // put your options and callbacks here }) }); </script> </body> </html> ``` JavaScript 代码: ```javascript $('#calendar').fullCalendar({ events: [ { title: 'My Event', start: '2021-09-01' } ] }); ``` 这个例子中,我们首先在 HTML 中引入了 FullCalendarJavaScript 和 CSS 文件。然后,我们在页面中创建了一个空的 `div` 元素,并给它一个唯一的 ID(这里是 `calendar`)。接下来,在 JavaScript 中,我们使用 jQuery 的 `$(document).ready()` 方法来确保页面已经加载完毕后再初始化 FullCalendar。最后,我们指定了一个事件数据源,这个数据源只包含一个事件,它的标题是 `My Event`,开始时间是 2021 年 9 月 1 日。 当你打开这个页面时,你应该能看到一个简单的日历,上面显示着一个事件。你可以尝试添加更多的事件,或者尝试使用 FullCalendar 的其他功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lanhai96

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值