layui日历和tui.calendar日程表联动

效果演示

引用的layui.all.js有所改动,所以需另外下载
layui日历和tui.calendar日程表联动资源链接

页面源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历日程表联动</title>


    <link rel="stylesheet" href="tui.calendar/tui-calendar.css">
    <link rel="stylesheet" href="tui.calendar/tui-date-picker.css">
    <link rel="stylesheet" href="tui.calendar/tui-time-picker.css">
    <link rel="stylesheet" href="layui/css/layui.css">

    <script src="jquery-3.3.1.min.js"></script>
    <script src="moment.js"></script>
    <script src="layui/layui.all.js"></script>


    <script src="tui.calendar/tui-code-snippet.min.js"></script>
    <script src="tui.calendar/tui-date-picker.min.js"></script>
    <script src="tui.calendar/tui-time-picker.min.js"></script>
    <script src="tui.calendar/tui-calendar.js"></script>
</head>
<body>

<style>
    * {outline: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
    html {font: normal 14px "Microsoft YaHei";-webkit-text-size-adjust: 100%;}
    body {padding: 0;margin: 0 auto;font-size: 14px; color: #333;background-color: #fff;font-family: "Arial","Microsoft YaHei";min-width: 320px;
        -webkit-text-size-adjust: none;
        /*取出点击出现半透明的灰色背景*/
        -webkit-tap-highlight: rgba(0,0,0,0);
        /*控制内容的可选择性*/
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {-webkit-appearance: none;}
    ul,
    li,
    form,
    dl,
    dt,
    dd,
    div,
    ol,
    figure,
    aside{padding: 0;margin: 0;}
    .ul,
    .ul li {list-style: none;}
    table {border-collapse: collapse;border-spacing: 0;table-layout: fixed;}
    table td {border-collapse: collapse;font-size: 1px;}
    select, input, textarea {font-size: 14px;color: #333;border-radius: 0;-webkit-border-radius: 0;font-family: "Microsoft YaHei";}
    img{border: none;max-width: 100%;vertical-align: middle;}
    a {color: #333;text-decoration: none; -webkit-tap-highlight-color:rgba(0,0,0,0);/* 去掉链接触摸高亮 */}
    a:hover {color: #0091ff;text-decoration: none;}
    a:focus {color: #333;outline: none;-moz-outline: none;}
    a:active {color: #333;}
    pre{
        white-space:pre-wrap;
        white-space:-moz-pre-wrap;
        white-space:-o-pre-wrap;
        word-wrap:break-word;
        margin:0;
        font-family: "Microsoft YaHei";
        text-align:justify;
        text-justify:inter-ideograph;
    }
    img, object {
        border: none;
        max-width: 100%;
        border: 0;
        overflow: hidden;
        vertical-align: middle;
    }

    .clear {clear: both;height: 0px;overflow: hidden;zoom: 0;}
    .clearfix {*zoom:1;}/*IE/7/6*/
    .clearfix:after { content:"\200B"; display:block; height:0; clear:both; }

    .dot{display: block;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;}
    /*2行文本省略号*/
    .dot2 {display: -webkit-box;display: box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
    /*3行文本省略号*/
    .dot3 {display: -webkit-box;display: box;overflow: hidden;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}

    .ytable{ display:table; width:100%;table-layout: fixed;}
    .ytable-cell{ display:table-cell; vertical-align:middle;}

    .bg_cover{background-size: cover;background-position: center center;background-repeat: no-repeat;}
    .bg_contain{background-size: contain;background-position: center center;background-repeat: no-repeat;}
    a {
        color: #585858;
        text-decoration: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* 去掉链接触摸高亮 */
    a:focus {
        outline: none;
        -moz-outline: none;
    }


    .container{max-width: 1200px;margin: auto}

    .schedule-detail{
        background: #fff;
        clear: both;
    }
    .schedule-left{
        width: 304px;
        float: left;
        border-right: 1px solid #ddd;
        padding: 15px;
    }
    .schedule-left .layui-laydate{
        box-shadow: none;
    }
    .schedule-left .laydate-theme-molv .layui-laydate-content{
        border: none;
    }



    .schedule-right{
        margin-left: 304px;
        padding: 15px 0;
    }
    .schedule-right-header{
        line-height: 45px;
        padding: 0 15px;
    }
    .schedule-right-header::after{
        content:"";
        display: block;
        clear: right;
    }
    .schedule-right-tab{
        float: right;
    }

    .schedule-right-tab .schedule-tab-item{
        background: #f2f2f2;
        color: #333;
        padding: 0 20px;
        cursor: pointer;
        float: left;
    }
    .schedule-right-tab .schedule-tab-item:hover,
    .schedule-right-tab .schedule-tab-item.active{
        background: #309bb6;
        color: #fff;
    }
    .schedule-day-header{
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
        display: none;
    }
    .schedule-day-header span{
        display: inline-block;
        vertical-align: bottom;
        /*margin-right: 10px;*/
    }
    .schedule-day-header .time-type{
        color: #999;
        width: 80px;
        text-align: center;
    }

    .schedule-day-content{

    }
    .schedule-day-item{
        position: relative;
        height: 50px;
        padding-left: 80px;

    }
    .schedule-day-item .time{
        position: absolute;
        display: inline-block;
        width: 80px;
        bottom: 100%;
        left: 0;
        text-align: center;
        transform: translateY(50%);
    }
    .schedule-day-item .content{
        height: 100%;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        position: relative;
        box-sizing: content-box;
    }
    .schedule-day-info{
        position: absolute;
        width: 100%;
        box-shadow: 0 0 5px 1px #ccc;
        background: #fff;
        padding: 5px;
        z-index: 5;
        border-left: 2px solid #309bb6;
    }
    .schedule-right-arrow{
        display: inline-block;
    }
    .schedule-right-arrow .schedule-time-info{
        margin-right: 20px;
    }
    .schedule-right-arrow .schedule-prev,
    .schedule-right-arrow .schedule-next{
        border-radius: 50%;
        border: 1px solid #ccc;
        height: 34px;
        width: 34px;
        margin: 8px 0;
        vertical-align: middle;
        color: transparent;
        overflow: hidden;
        position: relative;
        background: transparent;
    }
    .schedule-right-arrow .schedule-prev:after,
    .schedule-right-arrow .schedule-next:after{
        content:"";
        display: block;
        width: 10px;
        height: 10px;
        border-left: 2px solid #ccc;
        border-bottom:2px solid #ccc;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
    .schedule-right-arrow .schedule-prev:after{
        right: -2.5px;
        transform: rotate(45deg);
    }
    .schedule-right-arrow .schedule-next:after{
        left: -2.5px;
        transform: rotate(-135deg);
    }
    .schedule-right-arrow .schedule-prev:hover,
    .schedule-right-arrow .schedule-next:hover{
        background: #309bb6;
        border-color: #309bb6;
    }
    .schedule-right-arrow .schedule-prev:hover::after,
    .schedule-right-arrow .schedule-next:hover::after{
        border-color: #fff;
    }
</style>


<div class="container schedule-detail">

    <div class="schedule-left">
        <div id="left-schedule-calendar"></div>


    </div>
    <div class="schedule-right">

        <div class="schedule-right-header">
            <div class="schedule-right-arrow">
                <span class="schedule-time-info"></span>
                <button class="schedule-prev">上一页</button>
                <button class="schedule-next">xiayixie</button>
            </div>
            <div class="schedule-right-tab">
                <span class="schedule-tab-item" date-type="today" style="margin-right: 15px;">今天</span>
                <span class="schedule-tab-item schedule-type-btn" date-type="day"></span>
                <span class="schedule-tab-item schedule-type-btn" date-type="week"></span>
                <span class="schedule-tab-item schedule-type-btn active" date-type="month"></span>
            </div>

        </div>

        <div class="schedule-right-content" data-type="day">
            <div class="schedule-day-header">
                <span class="time-type">GMT+08</span>
                <span class="time-info">
                            38日,周二<br>
                            二月初六
                        </span>
            </div>

            <div class="schedule-day-content">
                <div id="calendar"></div>

                <!--                        <div class="schedule-day-item">-->
                <!--                            <span class="time">01:00</span>-->
                <!--                            <div class="content"></div>-->
                <!--                        </div>-->
                <!--                        <div class="schedule-day-item">-->
                <!--                            <span class="time">02:00</span>-->
                <!--                            <div class="content"></div>-->
                <!--                        </div>-->

            </div>


        </div>






    </div>
    <div class="clear"></div>






</div>




    <script>
        var scheduleSelectDate = null; //当前选中日期
        var Calendar = tui.Calendar;
        var calendar = null; //右侧日历对象
        var laydate = null;
        var layCalendar = null; //左侧日历对象

        var calendarViewType = 'month'; //日历视图类型

        layui.use('laydate', function(){
            laydate = layui.laydate;
            layCalendar = laydate.render({
                elem: '#left-schedule-calendar',                     //绑定日历控件
                position: 'static',
                theme: '#309bb6',                              //主题颜色
                showBottom: false,
                btns: ['clear', 'now', 'confirm','refresh'],//['clear', 'now', 'confirm'],
                //range: true,//去掉日历下面的一行按钮
                // calendar: true,
                // mark: {
                //     '0-03-04': '生日'
                // },
                ready: function(date){
                    //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    scheduleSelectDate = date;
                    refreshDaySchedule(scheduleSelectDate);
                },
                change:function (value,date) {
                    console.log('change')
                    scheduleSelectDate = date;
                    refreshDaySchedule(scheduleSelectDate);

                    calendar.setDate(new Date(scheduleSelectDate.year+'/'+scheduleSelectDate.month+'/'+scheduleSelectDate.date));
                    calendar.changeView(calendar.getViewName(), true);
                }


            });

            $(".schedule-left-arrow").click(function () {

            })


            // 日历视图类型切换
            $(".schedule-right-tab .schedule-tab-item").click(function () {
                if($(this).hasClass("schedule-type-btn")){
                    $(this).addClass('active').siblings().removeClass('active');
                    switch ($(this).attr('date-type')) {
                        case 'day':
                            calendar.changeView('day', true);
                            calendarViewType = 'day';
                            break;
                        case 'week':
                            calendar.changeView('week', true);
                            calendarViewType = 'week'
                            break;
                        case 'month':
                            calendar.changeView('month', true);
                            calendarViewType = 'month'
                            break
                    }
                }else{
                    // layCalendar.config.mark= {
                    //     '0-03-04': '生日'
                    // }
                    // 今天
                    // calendar.changeView('day', true);
                    calendar.today();
                    layCalendar.config.value= moment().format("YYYY-MM-DD");
                    layCalendar.refresh()

                }
            })
            // 日历翻页
            $(".schedule-prev").click(function () {
                calendar.prev();

                switch(calendarViewType){
                    case 'day':
                        layCalendar.config.value = moment(scheduleSelectDate.year+'/'+scheduleSelectDate.month+'/'+scheduleSelectDate.date).add(-1, 'days').format("YYYY-MM-DD")
                        layCalendar.refresh()
                        break;
                    case 'week':
                        layCalendar.config.value = moment(scheduleSelectDate.year+'/'+scheduleSelectDate.month+'/'+scheduleSelectDate.date).add(-1, 'weeks').format("YYYY-MM-DD")
                        layCalendar.refresh()
                        break;
                    case 'month':
                        layCalendar.prevMonth();
                        break;
                }



            })
            $(".schedule-next").click(function () {
                calendar.next();
                switch(calendarViewType){
                    case 'day':
                        layCalendar.config.value = moment(scheduleSelectDate.year+'/'+scheduleSelectDate.month+'/'+scheduleSelectDate.date).add(1, 'days').format("YYYY-MM-DD")
                        layCalendar.refresh()
                        break;
                    case 'week':
                        layCalendar.config.value = moment(scheduleSelectDate.year+'/'+scheduleSelectDate.month+'/'+scheduleSelectDate.date).add(1, 'weeks').format("YYYY-MM-DD")
                        layCalendar.refresh()
                        break;
                    case 'month':
                        layCalendar.nextMonth();
                        break;
                }
            })



            // 更新日历数据
            function refreshDaySchedule(date) {
                $(".schedule-day-header .time-info,.schedule-time-info").text(date.year+'年'+date.month+'月'+date.date+'日,'+getWeekDate(new Date(date.year+'/'+date.month+'/'+date.date)))
            }
            /**
             *获取当前星期几
             */
            function getWeekDate(date) {
                var now = date || new Date();

                var day = now.getDay();
                var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
                var week = weeks[day];
                return week;
            }
            buildDaySchedule();
            // 创建日历
            function buildDaySchedule() {

                calendar = new Calendar('#calendar', {

                    // 'day', 'week', 'month'
                    defaultView: 'month',

                    // shows the milestone and task in weekly, daily view
                    taskView: false,

                    // shows the all day and time grid in weekly, daily view
                    scheduleView: ['time'],

                    theme:{
                        'common.border': '1px solid #e5e5e5',
                        'common.backgroundColor': 'white',
                        'common.holiday.color': '#ff4040',
                        'common.saturday.color': '#333',
                        'common.dayname.color': '#333',
                        'common.today.color': '#333',
                    },

                    // template options
                    template: {
                        milestone: function(schedule) {
                            return ' ' + schedule.title + '';
                        },
                        milestoneTitle: function() {
                            return 'Milestone';
                        },
                        task: function(schedule) {
                            return '  #' + schedule.title;
                        },
                        taskTitle: function() {
                            return '';
                        },
                        allday: function(schedule) {
                            return schedule.title + ' ';
                        },
                        alldayTitle: function() {
                            return 'All Day';
                        },
                        time: function(schedule) {
                            return schedule.title + ' ' + schedule.start;
                        },
                        // popupDetailDate: function(isAllDay, start, end) {
                        // },
                        popupDetailLocation: function(schedule) {
                            return 'Location : ' + schedule.location;
                        },
                        popupDetailUser: function(schedule) {
                            return 'User : ' + (schedule.attendees || []).join(', ');
                        },
                        popupDetailState: function(schedule) {
                            return 'State : ' + schedule.state || 'Busy';
                        },
                        popupDetailRepeat: function(schedule) {
                            return 'Repeat : ' + schedule.recurrenceRule;
                        },
                        popupDetailBody: function(schedule) {
                            return 'Body : ' + schedule.body;
                        },
                    },
                    week: {
                        daynames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        startDayOfWeek: 1,
                        narrowWeekend: false,
                    },
                    month: {
                        daynames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        startDayOfWeek: 1,
                        narrowWeekend: false
                    },
                    timezone: {
                        zones: [
                            {
                                timezoneName: 'Asia/Shanghai',
                                displayLabel: 'GMT+08:00',
                                tooltip: 'BeiJing'
                            },
                        ],
                    },

                    // list of Calendars that can be used to add new schedule
                    calendars: [],


                    // whether use default creation popup or not
                    useCreationPopup: false,

                    // whether use default detail popup or not
                    useDetailPopup: true,

                });
                calendar.createSchedules([
                    {
                        id: '1',
                        calendarId: '1',
                        title: '新的日程啊',
                        category: 'time',
                        dueDateClass: '',
                        start: '2022-03-09 16:20:00',
                        end: '2022-03-09 17:30:00',
                        color: '#ffffff',
                        bgColor: '#309bb6',
                        dragBgColor: '#309bb6',
                        borderColor: '#309bb6',
                        isReadOnly: true    // schedule is read-only
                    },

                ]);
                calendar.on('clickSchedule', function(event) {
                    var schedule = event.schedule;


                });




            }



        })


    </script>

</body>
</html>

你可能感兴趣的:(web,layui,javascript,css3)