vue2.0 日历日程表，可进行二次开发.

由于工作业务需求，要写一个日程表，日程表写之前要先生成日历，废话不多说，直接上代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>日程表</title>
    <link rel="stylesheet" href="/selfsupermarketAdmin/views/common/css/common/app.css">
    <!--<link rel="stylesheet" href="/selfsupermarketAdmin/views/common/plugins/MintUI/style.css">-->
    <!--<link rel="stylesheet" href="/selfsupermarketAdmin/views/common/plugins/bootstrap-3.3.7/css/bootstrap.css">-->
    <link rel="stylesheet" href="/selfsupermarketAdmin/views/common/css/style.css">
    <style>
        * {
            box-sizing: border-box;

        }

        .rili {
            float: left;
            padding-left: 20px;
            font-size: 12px;
            overflow: hidden;
            min-width: 1050px;
            width: 100%;
        }

        .calendar {
            float: left;
            width: 23%;
            border: 1px solid #BEBFC1;
            margin-right: 20px;
            margin-top: 20px;
            height: 230px;
        }

        .calendar .calendar_title {
            padding: 0.5em 0 0.5em 0;
            text-align: center;
            border-bottom: 1px solid #BEBFC1;
        }

        .calendar .calendar_week {
            padding: 0.5em 0 0.5em 0;
        }

        .calendar .calendar_week span {
            width: 14.2857%;
            text-align: center;
            display: inline-block;
        }

        .calendar .calendar_dateCon span {
            padding: 0.5em 0 0.5em 0;
            width: 14.2857%;
            text-align: center;
            display: block;
            float: left;
        }

    </style>
</head>
<body class="container-fluid">
<div id="vue" v-cloak>
    <div class="rili">
        <div class="calendar" v-for="(items,index) in rili.datas">
            <div class="calendar_title">{{index+1}}月</div>
            <div class="calendar_week">
                <span>周日</span><span>周一</span><span>周二</span><span>周三</span><span>周四</span><span>周五</span><span>周六</span>
            </div>
            <div class="calendar_dateCon">
                <span v-for="item in items" v-html="changeDate(item.date)"></span>

            </div>
        </div>
    </div>

</div>
<!--<script src="/selfsupermarketAdmin/views/common/plugins/echarts/echarts.min.js"></script>-->
<script src="/selfsupermarketAdmin/views/common/plugins/vue/vue.js"></script>
<script src="/selfsupermarketAdmin/views/common/plugins/jquery/jquery-1.9.1.min.js"></script>
<!--<script src="./plugins/MintUI/index.js"></script>-->
<!--<script src="/selfsupermarketAdmin/views/common/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>-->
<script src="/selfsupermarketAdmin/views/common/js/common.js"></script>

<script>
    function getMonth(year) {
        var year = year || 2018;
        var dayMseconds = 86400000;
        var monthArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        var resultArr = [];

        function isRun() {      //判断是否是闰年
            if ((year % 400 == 0) || (year % 4 == 0) && (year % 100 != 0)) {
                return true;
            } else {
                return false;
            }
        }

        var run = isRun();
        for (var m = 1; m < 13; m++) {
            var arr = [];
            var firstday = new Date(year + "-" + m + "-01").getTime();//拿到时间戳
            var lastday = 30;
            var weekDay = new Date(firstday).getDay();      //根据时间戳，拿到本月第一天的星期
            var weekLastDay = weekDay + 31;   //拿到本月最后一天的星期
            switch (m) {
                case 2:
                    if (run) {
                        lastday = new Date(year + "-" + m + "-29").getTime();
                        weekLastDay = weekDay + 29;
                    } else {
                        lastday = new Date(year + "-" + m + "-28").getTime();
                        weekLastDay = weekDay + 28;
                    }
                    break;
                case 4:
                    lastday = new Date(year + "-" + m + "-30").getTime();
                    weekLastDay = weekDay + 30;
                    break;
                case 6:
                    lastday = new Date(year + "-" + m + "-30").getTime();
                    weekLastDay = weekDay + 30;
                    break;
                case 9:
                    lastday = new Date(year + "-" + m + "-30").getTime();
                    weekLastDay = weekDay + 30;
                    break;
                case 11:
                    lastday = new Date(year + "-" + m + "-30").getTime();
                    weekLastDay = weekDay + 30;
                    break;

                default :
                    lastday = new Date(year + "-" + m + "-31").getTime();//拿到时间戳
                    weekLastDay = weekDay + 31;
                    break;

            }

            var n = 0;
            for (var i = 0; i < 42; i++) {
                var content = {date: '', class: ''};
                if (i < weekDay || i > weekLastDay - 1) {
                    arr.push(content);
                } else {
                    n++
                    arr.push(
                        {
                            day: new Date(firstday + dayMseconds * n - dayMseconds).getDate(),
                            date: firstday + dayMseconds * n - dayMseconds,
                            class: ''
                        }
                    )
                }

            }
            resultArr.push(arr);

        }
        // console.log(resultArr)
        return resultArr
        // document.getElementById('box').innerHTML = JSON.stringify(arr);
    }

    //    var date = getMonth(2018);

    //  [[{date: '', class: ''}, {date: "当天时间戳", class: '类名'},],  //length:42 没有日期的是空]
    var vue = new Vue({
        el: "#vue",
        data: {
            rili: {
                year: 2018,
                datas: getMonth(2018)

            }
        },
        computed: {},
        created: function () {

        },
        mounted: function () {

        },

        methods: {
            changeDate: function (date) {
                if (date) {
                    return new Date(date).getDate()
                } else {
                    return ''
                }

            }
        },
        watch: {}
    })


</script>
</body>

</html>

效果图如下：

需要的朋友可以参考一下

在下面打个小广告：

本人在业余时间，可以帮有需要的朋友解决技术上的问题，和接一些页面定制开发。个人接单，价格实惠，只当是多交些朋友了。

在下面打个小广告：

本人在业余时间，可以帮有需要的朋友解决技术上的问题，和接一些页面定制开发。个人接单，价格实惠，只当是多交些朋友了。

vue2.0 日历日程表 ，可进行二次开发.

猜你喜欢

vue2.0 日历日程表，可进行二次开发.