Ext-日历面板

使用JS创建年视图的日历面板

方法：

1. 项目引入jquery.calendar.js 和jquery.calendar.css文件
2. 页面使用js方法创建控件
3. 自定义接口实现数据存储（略）

效果：

 

 关键代码：

 //页面
 Ext.define('BindingGrid.view.Pms.HolidayManagement.HolidayManMain', {
    extend: 'Ext.panel.Panel',
    xtype: 'HolidayManMain',
    requires: [
         "BindingGrid.view.Pms.HolidayManagement.HolidayManMainController",
    ],
    controller: 'HolidayManagement.HolidayManMainController',
    margin:'10 0 0 25' ,
    autoScroll:true,//Extjs滚动条
	html:`
	<div class="selyear"><span>选择年：</span>
		<select>
		</select>
	</div>
	<div id="container">
	<div id='div1'></div>
	<div id="detaillist"></div>
	</div>
	`,
    title: 'myCalendar',
    listeners: {
       afterrender:"initCanler"
     }
});

//节假日维护控制器
Ext.define("BindingGrid.view.Pms.HolidayManagement.HolidayManMainController", {
    extend: "Ext.app.ViewController",
    alias: "controller.HolidayManagement.HolidayManMainController",
       //初始化当前年数据；
    getYearCanlendar: function (years) {
        var home = Ext.ComponentQuery.query("HolidayManMain")[0];    
        Bus.ActionFunc("OAPMS_GetInfoByYear", {year:years}, function (res) {
            if (res.Data) {
                window.OAPMS_GetInfoByYear=res.Data;
            }
        }, home,true);
    },
    //清除对象里的属性值为空的属性
    removeProperty:function(o){
        var obj=o;
         Object.keys(obj).forEach(item => {
            if (obj[item] === '' || obj[item] === undefined || 
obj[item] === null || obj[item] === 'null'){
                delete obj[item]
            } 
          });
          return obj
    },
    /*
    操作假期
    Update = 0,
    Create = 1,
    Delete = 2
    */
    operHoliday: function (d,o) {
         var me=this;
         var data=d;
         var ope=o;
         var list={
             "OA_HOLIDAYSID":data.OA_HOLIDAYSID,
             "OA_HOLIDAYSDATE":data.OA_HOLIDAYSDATE,
             "OA_REMARK":data.OA_REMARK,
             "OA_FLAG":data.OA_FLAG,
         }
         var result=me.removeProperty(list);
         
         Bus.ActionFunc("OAPMS_OpeHoliday", {
            "holiday":result,
            "ope":ope
         }, function (res) {
            if (res.Data) {
                if(ope==2){//删除状态
                    //删除window对应的假期
                    window.OAPMS_GetInfoByYear=window.OAPMS_GetInfoByYear.filter((item)=>{
			            return item.OA_HOLIDAYSID!=result.OA_HOLIDAYSID
		            });
                    //移除日期样式
                    $("[date='" + result.OA_HOLIDAYSDATE + "']").removeClass('selected');
	                $("[date='" + result.OA_HOLIDAYSDATE + "']").find('div').remove();
                }
                if(ope==1){//新增状态
                    //新增window对应的假期
                    window.OAPMS_GetInfoByYear.push(result);
                    //添加日期样式
                    $('#div1').selectsinDates(result);
                }
                if(ope==0){//编辑状态
                    //删除window对应的假期
                    window.OAPMS_GetInfoByYear=window.OAPMS_GetInfoByYear.filter((item)=>{
			            return item.OA_HOLIDAYSID!=result.OA_HOLIDAYSID
		            });
                    //移除日期样式
                    $("[date='" + result.OA_HOLIDAYSDATE + "']").removeClass('selected');
	                $("[date='" + result.OA_HOLIDAYSDATE + "']").find('div').remove();
                    //添加对应假期
                    window.OAPMS_GetInfoByYear.push(result);
                    $('#div1').selectsinDates(result);
                }   
            }
         });
		
    },
    //假期操作窗体
    createWin: function(data){
        var that=this;
        var win = Ext.create("Ext.window.Window", {
			modal: true,//设置一个模拟窗口遮罩背景
			autoShow: true,
			title: "提示",
			width: 400,
			height: 300,
			layout: {
				type: "vbox",
				align: "stretch"
			},  
			items: [
				{
					xtype: "form",
					bodyPadding: 15,
					fieldDefaults: {
						labelAlign: "right",
						labelWidth: 95,
						flex: 1,
						style: {
							marginBottom: "5px",                   
						}
					},
					defaults: {
						layout: {
							type: "hbox",
							align: "stretch",
							flex: 1
						},
					},
					items: [
						{
							xtype: "datefield",
							format: "Y-m-d",
							fieldLabel: "日期",
							name:"OA_HOLIDAYSDATE",
							renderer: function (value) {
							if (value == "0001/01/01 00:00:00") {
								return null;
							} else {
								var date = Ext.util.Format.date(value, "Y-m-d");
								return date;
							}
							}	
						},
						{xtype: "textfield", fieldLabel: "备注",name:"OA_REMARK",allowBlank: false},
						{xtype: "textfield", fieldLabel: "操作类型",name:"oper",hidden:true,value:"1"},
                        {xtype: "textfield", fieldLabel: "ID",name:"OA_HOLIDAYSID",hidden:true},
						{
							xtype: "combobox", fieldLabel: "类型",name:"OA_FLAG",
							forceSelection: true, // 必须选择一个选项
							allowBlank: false,
							displayField: "text",
							valueField: "value",
							store: new Ext.data.Store({
								data: [
									{ value: "0", text: "法定节假日" },
									{ value: "1", text: "休息日" }
								]
							}),
						}
					],
					buttons:[
						{xtype:'button',name:"btnDel", text:'删除',disabled: true,handler:function(btn){	
                            var form=btn.ownerCt.ownerCt;
                            var formdata=form.getValues();		
                                that.operHoliday(formdata,2);
							    btn.up().up().reset();
							    win.close();
						}},
						{xtype:'button', text:'确定',
							handler:function(btn){ 
							    var t=this;
							    var form=btn.ownerCt.ownerCt;
							    if(!form.isValid()){
								    Bus.toast('请完善相关数据');
								    return false;
							    }
                                var form=btn.ownerCt.ownerCt;
                                
                                var formdata=form.getValues();
                                that.operHoliday(formdata,formdata.oper);
							    btn.up().up().reset();//置空表单
							    win.close();
						    }
						},
						{   
                            xtype:'button', text:'取消',handler:function(btn){ 
							    btn.up().up().reset();
							    win.close();
						    }
                        }
					]
					}
			]},
		);
        return win;
    },
    //初始化日历面板
    initCanler:function(t,opt){  
        var me=this;
        var d = new Date();
        var currentYear = d.getFullYear();
        
        var create =me.initYear(currentYear);
        $(".selyear select").append(create);
        $(".selyear select").change(function(t){
            
            var year=$(".selyear select").val();
            me.getYearCanlendar(year);//获取年数据源
            me.initSelected(window.OAPMS_GetInfoByYear);//第一次刷新页面
            me.initYearCompont(year);
        });
        //初始加载
        me.getYearCanlendar(currentYear);//当年
        me.initSelected(window.OAPMS_GetInfoByYear);//第一次刷新页面
        me.initYearCompont(currentYear);
		
    },
    //生成日历板
    initYearCompont:function(currentYear){
        var me=this;
        $('#div1').fullYearPicker({
			        disable:false,//只读
			        year:currentYear,//指定年份
			        initDate:window.OAPMS_GetInfoByYear,//初始化选中日期
			        yearScale: { min: 1949, max: 2100 },//初始化日历范围
			        format:"YYYY-M-D",//日期格式化  YYYY-MM-DD  YYYY-M-D
			        cellClick: function (dateStr, isDisabled) {//当前选中日期回调函数	
					    var that=this;
						var arr=dateStr.split("-");
						var newdate=arr[0] + "-" +
										       (arr[1]> 9 ? arr[1] : "0" + arr[1]) + "-" +
										       (arr[2] > 9 ? arr[2] : ("0" + arr[2]));
                        var win=me.createWin();
                        
                        
						var note,type,id;      
                        var el=$("[date="+newdate+"]").attr('class');
                        if(el){
                            if(el.includes('selected')){//有值，说明添加了selected样式，即加了备注
							    //编辑状态
							    note=$("[date="+newdate+"]").find('.note').text();
							    type=$("[date="+newdate+"]").find('.type').text();
                                id=$("[date="+newdate+"]").find('.id').text();
							    win.down("textfield[name=oper]").setValue("0");//0 编辑状态；1新增状态
                                win.down("button[name=btnDel]").setDisabled(false);
						    }
                        }                  
						win.down("datefield[name=OA_HOLIDAYSDATE]").setValue( new Date(newdate));
						win.down("textfield[name=OA_REMARK]").setValue(note);
						win.down("combobox[name=OA_FLAG]").setValue(type);
                        win.down("textfield[name=OA_HOLIDAYSID]").setValue(id);
                        
                        
			        }
			    });
		me.initSelected(window.OAPMS_GetInfoByYear);//第一次刷新页面
    },
    //生成年选项
    initYear:function(n){
        var start=2014;
        var end=parseInt(n)+5;
        var html='';
        for(var i=start;i<end;i++){
            var temp='<option>'+i+'</option>';
            if(i==parseInt(n)){
                temp='<option selected>'+i+'</option>';
            }
            html=html+temp;
        }
        return html;
    },
    //初始选择样式
    initSelected:function(dateArr){
        $('#div1').selectDates(dateArr);
    }

});

注：截取工作部分代码，自用，方便以后回顾；