EasyUI 日历实现日程提醒

文档内容

此处可跳过直接看第二部分内容或参看官方文档：开发文档(calendar日历)及组件演示

日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置’firstDay’属性的值来更改设置。

1.用法

1）使用标签创建日历。

<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>

2）使用Javascript创建日历。

<div id="cc" style="width:180px;height:180px;"></div>
$('#cc').calendar({
    current:new Date()
});

2.属性

属性名	属性值类型	描述	默认值
width	number	日历控件宽度。	180
height	number	日历控件高度。	180
fit	boolean	当设置为true的，将设置日历控件大小自适应父容器。	FALSE
border	boolean	定义是否显示边框。	TRUE
showWeek	boolean	当设置为true时，将显示周数。（该属性自1.5版开始可用）	FALSE
weekNumberHeader	string	周数的标签显示在头部。（该属性自1.5版开始可用）
getWeekNumber	function(date)	该函数用于返回周数值。（该属性自1.5版开始可用）
firstDay	number	定义一周的第一天是星期几。0=星期日、1=星期一 等。	0
weeks	array	显示的周列表内容。	[‘S’,‘M’,‘T’,‘W’,‘T’,‘F’,‘S’]
months	array	显示的月列表内容。	[‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’,‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]
year	number	年日历。	当前年份（4位数）
month	number	月日历。	当前月份（从1开始）
current	Date	当前日期。	当前日期
formatter	function(date)	日期格式化函数，返回日期值。（该属性自1.3.6版开始可用）
styler	function(date)	日历天的样式函数，返回行内样式或CSS样式表的Class名称。（该属性自1.3.6版开始可用）
validator	function(date)	验证器函数用于确定是否可以选择日历上的某一天，返回false将阻止选择当前天。（该属性自1.3.6版开始可用）

3.事件

事件名	事件参数	描述
onSelect	date	在用户选择一天的时候触发。
onChange	newDate, oldDate	在用户更改日期的时候触发。（该事件自1.3.6版开始可用）

4.方法

方法名	方法参数	描述
options	none	返回参数对象。
resize	none	调整日历大小。
moveTo	date	移动日历到指定日期。

日程提醒功能

此功能主要应用easyUI中calendar的formatter属性和onChange事件实现类似手机中日程提醒的功能，easyUI需要1.3.6及以上版本。最终效果如下图，在有日程的日期下面加点提示，选中日期显示出该日期的日程。

代码

html

    <div class="col-md-4">
        <blockquote class="layui-elem-quote title">日程<i class="iconfont icon-new1"></i>
            <span class="fr" onclick="settingSchedule();">设置日程>></span>
        </blockquote>
        <div id="schedule" class="easyui-calendar" style="width:350px;height:250px;border-radius:20px;"
             data-options="weeks:['日','一','二','三','四','五','六'],months:[1,2,3,4,5,6,7,8,9,10,11,12]"></div>
        <div class="detail-table">
            <table id="schedule_info_list" style="width: 350px"></table>
        </div>
    </div>

js

<script>
    var dateList=[] ;		//用于存放全部有日程的日期数组
    $(function(){
        initDateList();
        setTimeout(initCalendar,100);
    });

    function initDateList(){
        $.ajax({
            url: '${ctx}/getAllDate',		//后端地址，返回全部有日程的日期,数据示例在下边
            success: function(result){
                dateList = result;
            }
        })
    }
    
	/**初始化calendar*/
    function initCalendar() {
        $('#schedule').calendar({
            formatter: function(date){
                var d = date.getDate();
                var dateStr = dateFormat(date);
                if(dateList.indexOf(dateStr) >=0){	//当数组中包含该日期时修改日期样式
                    return '<div class="date-box"><div class="md">' + d + '</div><div class="date-bottom-dot"></div>';
                }
                return d;
            },
            onChange: function (newDate, oldDate) {		//当选中日期发生改变时获取当天日程信息
                selectedDate(newDate)
            }
        })
        selectedDate(new Date());
    }

    function selectedDate(newDate) {
        var selectDate = dateFormat(newDate);
        $.ajax({
            url: '${ctx}/getScheduleByDate',    //后端地址，返回该日期的日程,数据示例在下边
            data:{date:selectDate},
            success: function(result){
                var info_list = result;
                var tableHtml = '';
                if (null!=info_list && info_list.length>0){
                    info_list.forEach(info=>{
                        tableHtml += '<tr class="datagrid-row"><td class="col-md-4">'+info.schedule_name+'</td><td class="col-md-8">'+info.remarks+'</td></tr>'
                    })
                }
                $("#schedule_info_list").html(tableHtml);
            }
        });
    }
    
	/**日期格式转化(Long转日期格式)*/
	function dateFormat(t){
		if(t == undefined || t=='')
			return null;
		var date = new Date(t);
		var pattern = "yyyy-MM-dd";
		return date.format(pattern);
	}
</script>

css

	.date-box{
        position:relative;
    }

    .md{
        display:flex;
        flex-direction: column;
        height:16px;
        line-height:16px;
        background-position:2px center;
        padding:0 2px;
    }

    .date-bottom-dot{	
        height: 4px;
        width: 4px;
        background-color: grey;
        border-radius: 50%;
        position:absolute;
        left:0;
        right:0;
        bottom:-6px;
        margin:auto;
    }
    
	.detail-table table ,.detail-table table tr th,.detail-table table tr td { 
		border:1px solid #666;
		cellspacing:0;
		border-collapse: collapse;/**合并边框*/ 
	}

后端接口数据示例

/getAllDate 为后端地址，返回全部有日程的日期,数据示例如下：

[
	"2020-11-18", 
	"2020-11-25", 
	"2020-12-02", 
	"2020-12-09", 
	"2020-12-16", 
	"2020-12-23", 
	"2020-12-30", 
]

/getScheduleByDate 为后端地址，返回该日期的日程,数据示例如下：

[
    {
        "schedule_name":"学英语",
        "remarks":"杨亮全民英语背诵营"
    },
    {
        "schedule_name":"月报",
        "remarks":"每月20日写工作月报"
    }
]

设置日程

本篇设置日程是仿照自己手机里这个功能做的，设置的时候填写日程名称，开始日期，结束日期，以及重复周期，根据自己的业务逻辑把相应的日期存到数据库里。此处根据自己的业务逻辑而定,就不写后端代码了。