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

<!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 日历日程表 ，可进行二次开发.的更多相关文章

  1. VB6.0环境下的CATIA二次开发简介

    CATIA作为CAD/CAE/CAM/PDM一体化的软件,广泛用于航空航天.汽车.船舶及电子工业,尤其在航空航天业,有八成以上厂商使用CATIA的市场[11].然而由于使用习惯和使用的侧重点不用,功能 ...

  2. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较，DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  3. 基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤

    效果演示地址, github地址: demo演示:         1.About 此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统,所有的数据都是从 ...

  4. 项目vue2.0仿外卖APP（二）

    vue-cli开启vue.js项目 github地址:https://github.com/vuejs/vue-cli Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工 ...

  5. 推荐一个基于Vue2.0的的一款移动端开发的UI框架，特别好用。。。

    一丶YDUI 一只注重审美,且性能高效的移动端&微信UI. 下面为地址自己研究去吧! 我的项目正在用,以前用的Mint-ui但是现在感觉还是这个好一点,官方给出的解释很清楚,很实用. 官方地址 ...

  6. magento二次开发的基本步骤分享

    Magento后台添加新模块的体会 确定命名空间(Namespace)和模块(Modulename)的命名: 在app/etc/modules/ 路径下,创建 Namespace_Modulename ...

  7. vue2.0项目 calendar.js(日历组件封装)

    最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多 ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染（个人博客二）

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

随机推荐

  1. 闪回工具flashback

    Ⅰ.背景 早先操作数据误操作后,我们一般通过全量备份+binlog的方式来实现恢复(前滚) 有时只想撤销一个几分钟前的操作,采用这种方式就会显得很笨重 大家都知道Oracle有个叫做flashback ...

  2. ReactNative（三）——WebStorm的基本配置

    设置.js文件默认以jsx的语法打开 在没有进行设置的情况下,每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示: 当然我们点击转换后就可以了,但是每次都会提示,所以还是来一个 ...

  3. JavaScript 异步开发全攻略(转)

    写了一本介绍 JavaScript 异步开发的小书: https://meathill.gitbooks.io/javascript-async-tutorial/content/ 除了比较详细的介绍 ...

  4. yii2.0 集成/引入第三方sdk

    首先下载自己要使用的sdk包放到vendor文件夹下面:我以接入ping++为例子如下: 然后在入口文件出引入文件的配置文件: 下面就是在控制器使用了: 下面就可以根据自己要使用的的文件以及方法正常调 ...

  5. 内连接查询 (select * from a join b on a.id = b.id) 与 关联查询 (select * from a , b where a.id = b.id)的区别

    转自https://blog.csdn.net/l690781365/article/details/76261093 1.首先了解 on .where 的执行顺序以及效率? from a join ...

  6. java编程思想-第五章-某些练习题

    参考https://blog.csdn.net/caroline_wendy/article/details/46844651 10&11 finalize()被调用的条件 Java1.6以下 ...

  7. JAXBContextAPI详解

    javax.xml.bind类 JAXBContext java.lang.Object javax.xml.bind.JAXBContext public abstract class JAXBCo ...

  8. 安卓---RedioButton(单选按钮)、CheckBox（复选按钮）

    <RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_content ...

  9. BZOJ_3238_[Ahoi2013]差异_后缀数组+单调栈

    BZOJ_3238_[Ahoi2013]差异_后缀数组+单调栈 Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao ...

  10. bootstrap 选项卡的使用

    1.页面中的tab 在做项目的时候用到了切换选项卡显示不同图表页面的 需求,如下图 就直接使用了bootstrapd的选项卡 学习源头: http://www.runoob.com/bootstrap ...