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 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

随机推荐

数据结构之二叉堆（Heap）
注:本节主要讨论最大堆(最小堆同理). 一.堆的概念堆,又称二叉堆.同二叉查找树一样,堆也有两个性质,即结构性和堆序性. 1.结构性质: 堆是一棵被完全填满的二叉树,有可能的 ...
maven入门（二）_私服安装与上传下载
本篇文章主要介绍maven的私服安装和 jar包的上传与下载.毕竟大家还是在公司需要上传jar包到自己公司私服的. 1.安装私服下载链接: https://pan.baidu.com/s/17dbQ ...
关于new date（）获取服务器时间与linux系统时间不一致的解决办法 2017.12.6
在catalina.sh 第一行添加一下脚本JAVA_OPTS="$JAVA_OPTS -Dfile.encoding=UTF8 -Duser.timezone=GMT+08"
oracle+mybatis 使用动态Sql在要insert的字段不确定的情况下实现批量insert
最近做项目遇到一个挺操蛋的问题,由于业务的关系,DB的数据表无法确定,在使用过程中字段可能会增加,这样在insert时给我造成了很大的困扰. 先来看一下最终我是怎么实现的: <insert id ...
github 用git bash上传项目　最后提示　Everything up-to-date　但没传上去
今天为了把本地的项目远程到githup远程仓库,把好久不用的githup命令重新用了起来,不用怀疑,很正常的出错了. 为了长点记性,总结错误与解决办法如下: 1.我犯得第一个简单错误,是忘了git c ...
postgres 数据库的安装
环境:Linux version 2.6.32-642.el6.x86_64 软件版本:postgresql-9.6.8.tar.gz 新项目要上线测试,要求安装一个PG 的数据库我们进行的是源 ...
Grafana简单使用
下载安装 Grafana也是用GO语言写的,无任何依赖,安装非常简单. 启动 sudo service grafana-server start 运行直接访问:http://your_ip:3000 ...
在C++中怎么输入反斜杠“ \ ”
在C++编程中有时就会遇到有些符号不能直接输入,像反斜杠“ \ ",如果直接输入会出现:错误的终止了宏调用的错误. 这时,我们就需要把这些符号转义一下, 例如: CString str = ...
【莫比乌斯反演】BZOJ3309 DZY Loves Math
Description 对于正整数n,定义f(n)为n所含质因子的最大幂指数.例如f(1960)=f(2^3 * 5^1 * 7^2)=3, f(10007)=1, f(1)=0. 给定正整数a,b, ...
BZOJ_4530_[Bjoi2014]大融合_LCT
BZOJ_4530_[Bjoi2014]大融合_LCT Description 小强要在N个孤立的星球上建立起一套通信系统.这套通信系统就是连接N个点的一个树. 这个树的边是一条一条添加上去的.在某个 ...

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

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

随机推荐

热门专题

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

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