Collide
0%

Fullcalendar

发表于 更新于 分类于

要做一个值班管理页面，能查询人员岗位信息。

页面是在AmazeUI框架的基础上做的，于是在网上找了个demo，在demo的基础上将其与公司系统连接起来。

本文记录用到的插件方法和一些传值过程。

  • 前置

    fullcalendar js、css文件

    左上角的input，select，查询和重置按钮，以及右上角的颜色块

  • fullcalendar导入和使用

    在body间插入id为calendar的空div 

    1
    <div id="calendar" class="duty-row" style="margin-top:4%;"></div>

    在js文件中进行放插件操作

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    $('#calendar').fullCalendar({
    		header: {
    			left: 'prev,next today',
    			center: 'title',
    			right: 'month,agendaWeek,agendaDay'
    		},
    		monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    		monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    		dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
    		dayNamesShort: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
    		today: ["今天"],
    		firstDay: 1,
    		buttonText: {
    			today: '今天',
    			month: '月',
    			week: '周',
    			day: '日',
    			prev: '🞀',
    			next: '🞂'
    		},//以上为基础设置，看着改
    		defaultDate: DutyModel.getNowDate(),   //设置页面默认进入的时间，本文写了个获取当前格式日期的方法 yyyy-mm-dd
    		lang: 'zh-cn',
    		navLinks: true, 
    		selectable: true,
    		selectHelper: true,
    		//eventStartEditable: false,
    		select: function(start, end) {  //选中后将触发这个select方法，自动传入选中的开始和结束日期
    			addBox.modal();  //此处弹出你想弹出的框，在页面中设置，modal是AmazeUI自带的弹窗方法，addBox绑定到弹框
    			var targetForm = $("#create-form");  //此处把选中的起始时间的值存在hidden属性的input中，增添提交时读取即可
    			targetForm.find("input[name='startTime']").val(start);
    			targetForm.find("input[name='endTime']").val(end);
    			$('#calendar').fullCalendar('unselect');   //未点击提交时取消选中
    		},
    		editable: true,
    		eventLimit: true, 
    		eventClick: function(event, jsEvent, view) {  //点击已存在对象时触发事件
    			DutyModel.getStaffselect(event.id); //调用方法，传入点击对象的id
    			editBox.modal(); //弹出编辑框
    		}
    	});

    在calendar中显示所有传入对象（放在data中，从库里查出来）的方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function CalendarEvents(data){
      		 $('#calendar').fullCalendar('removeEvents');
      		 for (var i = 0; i < data.length; i++) {
      		        var obj = new Object();
      		        obj.id = data[i].Id;  
      		        obj.title = data[i].CrewName+" "+data[i].DutyPosition+" "+data[i].CrewType;  //将显示的标题
      		        obj.start = getUploadDate(data[i].StartTime);  //此处datetime时间格式转换
      		        obj.end = getUploadDate(data[i].EndTime);
      				if(data[i].CrewType=="值班人员"){
      					obj.color='#7FB3D5';
      				}else if(data[i].CrewType=="服务人员"){
      					obj.color='#76D7C4';	
      				}else{
      					obj.color='#AEB6BF';
      				}
      		        $("#calendar").fullCalendar('renderEvent', obj, true); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示 
      		}
      	}

    有个挺有意思的问题，当数据过多时，不能将其全存在data里吧，会发生什么事emm？毕竟页面显示的就只有一个月的值班信息，于是往数据库里搜索时加了当前页面的开始时间和结束时间，获取calendar当前页面起始时间的方法如下

    1
    2
    3
    var view = $('#calendar').fullCalendar('getView');
      var viewStart=moment(view.start).format('YYYY-MM-DD HH:mm:ss');  
      var viewEnd=moment(view.end).format('YYYY-MM-DD HH:mm:ss');

    前至后的时间格式转换比较值得注意，顺便放下后至前的（在之前代码块里用到过）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function getUploadDate(dateTimeStr) {
      	    try {
      	        var dateTime = "";
      	        if (dateTimeStr) {
      	            dateTimeStr = dateTimeStr.split("/");
      	            dateTimeStr = dateTimeStr[1].substring(dateTimeStr[1].indexOf("(") + 1, dateTimeStr[1].indexOf(")"));
      	            dateTime = DateUtil.LongToStr(parseInt(dateTimeStr));
      	        }
      	        return dateTime;
      	    } catch (e) {
      	
      	    }
      	    return null;
      	}

    以上基本上就实现了calendar与后端的交互，查询和重置根据条件调方法查数据库，除了一些值得注意的点记录下，其它的就跟本文没太大关系了

  • 后端方法

    数据库查询条件，此处用了sqlsugar

    1
    var items = db.CrewDutyManages.Where(s => (s.ShipName == duter.ShipName)&&(s.StartTime>=duter.viewStart) &&(s.EndTime<duter.viewEnd));

    查出来往前传即可，修改根据id和前端编辑框信息修改，删除根据点击事件传回来的id修改，增添根据增添框获取到的信息往库里添数据。

    因为查询全部值班信息时用了get方法，数据信息放在请求头中传递，后端方法获取时要加上[FromUri]，不然会获取不到值

    前：

    1
    Utils.getJSON("api/CrewDutyManage/GetCrewDutyManageList",mydata, function (data) {}

    后：

    1
    public IHttpActionResult GetCrewDutyManageList([FromUri] DutyManageDto duter)

明天又是充满希望的一天