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

随机推荐

SQL注入简单介绍
一.SQL注入概念 1.sql注入是一种将sql代码添加到输入参数中 2.传递到sql服务器解析并执行的一种攻击手法举例:某个网站的用户名为name=‘admin’.执行时为select ...
你不知道的JavaScript--Item22 Date对象全解析
本篇主要介绍 Date 日期和时间对象的操作. 1. 介绍 1.1 说明 Date对象,是操作日期和时间的对象.Date对象对日期和时间的操作只能通过方法. 1.2 属性无: Date对象对日期和时 ...
究竟谁在绑架中国的4G政策?
2009年中国正式发放3G牌照以来,尽管在开始阶段受到了应用不足的困扰,但是随着智能手机的迅速推广,3G移动通信也开始在中国得到了飞速的发展.就在消费者以及市场逐步接受并广泛应用该技术之际,4G通 ...
Java 学习笔记 (三) Java 日期类型
以下内容摘自: https://www.cnblogs.com/crazylqy/p/4172324.html import java.sql.Timestamp; import java.text ...
Go-技篇第二命名规范
优秀的命名优秀的命名应当是一贯的.短小的.精确的.所谓一贯,就是说同一个意义在不同的环境下的命名应当一致,譬如依赖关系,不要在一个方法中命名为depend,另一个方法中命名为rely.所谓短小,不必 ...
authorizations.go
{ return nil, fmt.Errorf("invalid TTL %d (must be >0)", authState.TTL) } ...
MySQL 开发实践 8 问，你能 hold 住几个？
最近研发的项目对DB依赖比较重,梳理了这段时间使用MySQL遇到的8个比较具有代表性的问题,答案也比较偏自己的开发实践,没有DBA专业和深入,有出入的请使劲拍砖!- MySQL读写性能是多少,有哪些性 ...
CountDownLatch简介
CountDownLatch是并发包中提供的一个可用于控制多个线程同时开始某动作的类,可以看做是一个计数器,计数器操作是院子操作,同时只能有一个线程去操作这个计数器.可以向CountDownLatch ...
BZOJ_3879_SvT_后缀数组+单调栈
BZOJ_3879_SvT_后缀数组+单调栈 Description (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个 ...
BZOJ_3996_[TJOI2015]线性代数_最大权闭合子图
BZOJ_3996_[TJOI2015]线性代数_最大权闭合子图 Description 给出一个N*N的矩阵B和一个1*N的矩阵C.求出一个1*N的01矩阵A.使得 D=(A*B-C)*A^T最大. ...

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

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

随机推荐

热门专题

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

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