easyui1.3.2中使用1.3.6或1.4.x的calendar / 憋错料

首先在1.3.2中calendar控件不支持日历某天的颜色进行改变，和自定义回调函数

Name	Type	Description	Default
width	number	The width of calendar component.	180
height	number	The height of calendar component.	180
fit	boolean	When true to set the calendar size fit it‘s parent container.	false
border	boolean	Defines if to show the border.	true
firstDay	number	Defines the first day of week. Sunday is 0, Monday is 1, ...	0
weeks	array	The list of week to be showed.	[‘S‘,‘M‘,‘T‘,‘W‘,‘T‘,‘F‘,‘S‘]
months	array	The list of month to be showed.	[‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
year	number	The year of calendar. The example below shows how to create a calendar using the specified year and month. <div class="easyui-calendar" data-options="year:2012,month:6" />	current year(four digits)
month	number	The month of calendar.	current month, start with 1
current	Date	The current date.	current date
formatter	function(date)	The day formatter function, return the day value. This property is available since version 1.3.6. Code example: $(‘#cc‘).calendar({ formatter: function(date){ return date.getDate(); } })
styler	function(date)	The styler function for calendar days, return the inline style or CSS class. This property is available since version 1.3.6. Code example: $(‘#cc‘).calendar({ styler: function(date){ if (date.getDay() == 1){ return ‘background-color:#ccc‘; // the function can return predefined css class and inline style // return {class:‘r1‘, style:{‘color:#fff‘}}; } else { return ‘‘; } } })
validator	function(date)	The validator function that is used to determine if a calendar day can be selected, return false to prevent from selecting a day. This property is available since version 1.3.6. Code example: $(‘#cc‘).calendar({ validator: function(date){ if (date.getDay() == 1){return true;} else {return false;} } })

以上看出上面的有些方法和属性注明在1.3.6中使用那我们使用以前的老版本怎么办？

因为页面上还有其它使用1.3.2的方法和属性。所以只有自己从easyui官方最新的插件包中查找了，经过整理了一下代码如下：

$.fn.calendar.parseOptions = function (_51c) {
        var t = $(_51c);
        return $.extend({}, $.parser.parseOptions(_51c, [{ firstDay: "number", fit: "boolean", border: "boolean" }]));
    };
    $.fn.calendar.defaults = {
        width: 180, height: 180, fit: false, border: true, firstDay: 0, weeks: ["S", "M", "T", "W", "T", "F", "S"], months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], year: new Date().getFullYear(), month: new Date().getMonth() + 1, current: (function () {
            var d = new Date();
            return new Date(d.getFullYear(), d.getMonth(), d.getDate());
        })(), formatter: function (date) {
            return date.getDate();
        }, styler: function (date) {
            return "";
        }, validator: function (date) {
            return true;
        }, onSelect: function (date) {
        }, onChange: function (_51d, _51e) {
        }
    };

$.fn._propAttr = $.fn.prop || $.fn.attr;
    $.fn._size = function (_14, _15) {
        if (typeof _14 == "string") {
            if (_14 == "clear") {
                return this.each(function () {
                    $(this).css({ width: "", minWidth: "", maxWidth: "", height: "", minHeight: "", maxHeight: "" });
                });
            } else {
                if (_14 == "unfit") {
                    return this.each(function () {
                        _16(this, $(this).parent(), false);
                    });
                } else {
                    if (_15 == undefined) {
                        return _17(this[0], _14);
                    } else {
                        return this.each(function () {
                            _17(this, _14, _15);
                        });
                    }
                }
            }
        } else {
            return this.each(function () {
                _15 = _15 || $(this).parent();
                $.extend(_14, _16(this, _15, _14.fit) || {});
                var r1 = _18(this, "width", _15, _14);
                var r2 = _18(this, "height", _15, _14);
                if (r1 || r2) {
                    $(this).addClass("easyui-fluid");
                } else {
                    $(this).removeClass("easyui-fluid");
                }
            });
        }
    }

})(jQuery);

把以上javascript代码保存一个文件页面直接引用即可，别忘了再引入中文包之前不然日历还有其它控件都是英文的了。

一下是我整理的一个日历排班效果，看着还不错，上一张图片吧！

通过点击的方式可以改变日历某一天的颜色。

以上代码希望能帮助到大家

时间： 2024-07-31 11:05:19

easyui1.3.2中使用1.3.6或1.4.x的calendar

easyui1.3.2中使用1.3.6或1.4.x的calendar的相关文章

Java中常见设计模式面试

5在JSP中使用数据库

Android中关于日期时间与时区的使用总结

Swift3.0中关于日期类的使用指引

夏令时 DST (Daylight Saving Time) java中的夏令时【转】

EasyUI的使用步骤

Java日期时间实用工具类

小米手机调用系统截图挂掉问题

利用JAVA设计一个可视化日历