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

VB6.0环境下的CATIA二次开发简介
CATIA作为CAD/CAE/CAM/PDM一体化的软件,广泛用于航空航天.汽车.船舶及电子工业,尤其在航空航天业,有八成以上厂商使用CATIA的市场[11].然而由于使用习惯和使用的侧重点不用,功能 ...
从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较，DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤
效果演示地址, github地址: demo演示: 1.About 此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统,所有的数据都是从 ...
项目vue2.0仿外卖APP（二）
vue-cli开启vue.js项目 github地址:https://github.com/vuejs/vue-cli Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工 ...
推荐一个基于Vue2.0的的一款移动端开发的UI框架，特别好用。。。
一丶YDUI 一只注重审美,且性能高效的移动端&微信UI. 下面为地址自己研究去吧! 我的项目正在用,以前用的Mint-ui但是现在感觉还是这个好一点,官方给出的解释很清楚,很实用. 官方地址 ...
magento二次开发的基本步骤分享
Magento后台添加新模块的体会确定命名空间(Namespace)和模块(Modulename)的命名: 在app/etc/modules/ 路径下,创建 Namespace_Modulename ...
vue2.0项目 calendar.js(日历组件封装)
最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单
前言哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染（个人博客二）
缘起时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

随机推荐

ZooKeeper的使用---命令端
一.进入命令行 ./bin/zkCli.sh 二.常用命令命令作用范例备注 connect host:port 连接其他zookeeper客户端 connect hadoop2:21 ...
RPC详解
RPC(Remote Procedure Call),即远程过程调用,是一个分布式系统间通信的必备技术,本文体系性地介绍了 RPC 包含的核心概念和技术,希望读者读完文章,一提到 RPC,脑中不是零碎 ...
Hexo的更新主题的更换
1:HEXO更新 ①hexo generate ②hexo deploy 2: HEXO主题的更换,①找到主题的github地址后进入自己的HEXO文件夹然后 git clone xxxx(地址) ...
DDD实战进阶第一波(十一)：开发一般业务的大健康行业直销系统（实现经销商代注册用例与登录令牌分发）
前两篇文章主要实现了经销商代注册的仓储与领域逻辑.经销商登录的仓储与相关逻辑,这篇文章主要讲述经销商代注册的用例与经销商登录的查询功能. 一.经销商代注册用例在经销商代注册用例中,我们需要传递经销商 ...
Python 时间模块
模块分类标准库 python解释器自带的, sys, os等开源模块比如selenium中的测试框架自定义模块比如自己封装的测试框架时间格式时间戳当前时间减去1970年1月1日00:0 ...
Java中能否利用函数参数来返回值
转自https://blog.csdn.net/da_da_xiong/article/details/70039532 我们在写代码时通常会遇到一种情况,就是我们可能希望在一个函数操作完成后返回两个 ...
mime.go
package manager import ( "mime" "path" ) //初始化数据 func init() { if mi ...
bzoj5248 [2018多省省队联测]一双木棋
直接hash+爆搜即可. #include <cstdio> #include <cstring> #include <iostream> #include < ...
微服务架构 - 基于Harbor构建本地镜像仓库
之前写过<搭建docker本地镜像仓库并提供权限校验及UI界面>文章,然后有同仁评论道这样做太复杂了,如果Harbor来搭建会更简单同时功能也更强大.于是抽时间研究了基于Harbor构建本 ...
供应链金融&区块链应用
现代管理教育对供应链的定义为“供应链是围绕核心企业,通过对商流,信息流,物流,资金流的控制,从采购原材料开始,制成中间产品以及最终产品,最后由销售网络把产品送到消费者手中的将供应商,制造商,分销商,零 ...

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

vue2.0 日历日程表 ，可进行二次开发.的更多相关文章

随机推荐

热门专题

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

vue2.0 日历日程表，可进行二次开发.的更多相关文章