高度自定义，灵活配置日历控件

基于种种目的，我想实现一种可以根据用户自定义业务需求高度定制日历视图。

控件可以自定义配置视图切换顺序和视图切换包括视图事件控制和样式。

可以自定义注册日历视图。

提供全局默认配置的日历视图，可以任意搭配，你也可以在实现化控件的时候,设置view:['date','year'] 这样不会影响全局，比如:我初始化显示日期，只能选择日期和年份

   'date': ['date', 'month', 'year', 'years'],
   'week': ['week', 'month', 'year', 'years'],
   'month': ['month', 'year', 'years'],
   'year': ['year', 'years']

配置成键值数组，当初化显示date 的时候，页面开始显示的是日，点击头部，选择month ,这个时候当前的视图切换到month 视图，点头部切换到year 以此类推，到最后一个事件被禁用。

初始化显示：

点击头部月部，切换到月份视图

年份视图，点击上面的年份切换到这里

年份范围视图 点击上面的年份切换这里

上面第一行最右边一个按季度选择的日历视图，就是通过下面这段代码注册的一个日历视图。

table:是一个虚拟的tableDom,它会进行日历视图的差异化局部渲染，实例化参数是

rowCount(行数),cellCount(列数),headCount (thead 行有几条)  。你是3行2列，还7行7列布局等等，供你自己选择

table.add 提供了一个添加table数据的方法，rowIndex(),cellIndex,data(对象,{text:"",value:"",className:""}), 

renderDom: 实现内容区渲染，在这个函数里面，你只要把对应的数据通过table.add 添加进去就行了，基类会自动调用renderDom函数进行数据渲染，当函数执行完。会自动执行table.render 进行虚拟DOM演练计算,刷新到页面中

getTitle: 头部显示标题

最终效果：

实例化我们刚刚注册的季度日历视图

        $('#Calendar5').DxCalendar({
                view: ['quarter', 'year']
            });

实例化

// 今天增加了一个双日历视图，可以范围选择

// 实例化代码

  $('#txtDatePicker').DxDatePicker({
                currentDate: [new Date(2017, 10, 12), new Date(2017, 10, 16)],
                view: "daterange"
            });

            $('#txtDatePicker').DxDatePicker({
                currentDate: [new Date(2017, 7, 1), new Date(2017, 7, 16)],
                view: "daterange",
                validate:null, // 函数 增加自定义验证
                disabeldHandler:function(name,d) //自定义，禁用日期
                {
                    return Dx.dates.compare( new Date(),d) == 1;
                }
            });