钉钉E应用(小程序)之日历
唠叨几句:其实钉钉E应用的编写类似支付宝小程序(毕竟是阿里爸爸下的产业),而支付宝小程序又是借鉴微信小程序(只不过人家是wxml / wxss ,他是 axml / acss罢了),这三者可以说是同源了(大概)。只要熟悉微信小程序的,看着文档开发钉钉E应用便木有什么难度!!!
效果:
axml
<view class="page">
<text class="toptip"> 显示可选择的天数:{{booklist_len}}天
</text>
<view class='box1' style='width: {{ sysW * 7 }}rpx'>
<view class='dateBox'>{{ year }} 年 {{ month}} 月
</view>
<view class="weeklist">
<block a:for='{{ weekArr }}'>
<view key="{{item}}" style='width: {{ sysW }}rpx; height: {{ sysW }}rpx; line-height: {{ sysW }}rpx;'>
{{ item }}
</view>
</block>
</view>
<view class="daylist">
</view>
<block a:for='{{ arr }}'>
<view class="isrela" key="{{item}}">
<view
style='{{ index == 0 ? "margin-left:" + sysW * marLet + "rpx;" : "" }}width: {{ sysW }}rpx; height: {{ sysW }}rpx; line-height: {{ sysW }}rpx;'
class='{{ item.isbook?"isbook":"nobook"}}'>{{ item.day }}
</view>
<view class='{{item.day == getDate ? "dateOn" : "" }}'>
</view>
</view>
</block>
</view>
</view>
js
Page({
data: {
arr: [],
sysW: null,
lastDay: null,
firstDay: null,
weekArr: ['日', '一', '二', '三', '四', '五', '六'],
year: null,
//选中的日期,高亮显示
booklist: ["1", "3", "10", "20", "23", "24", "25", "26"],
booklist_len: '',
},
//获取日历相关参数
dataTime: function () {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var months = date.getMonth() + 1; //获取现今年/月/日/几号/星期几
this.data.year = year;
this.data.month = months;
this.data.getDate = date.getDate();
var d = new Date(year, months, 0);
this.data.lastDay = d.getDate();
let firstDay = new Date(year, month, 1);
this.data.firstDay = firstDay.getDay();
}, onShow: function (options) {
this.dataTime(); //先清空数组,根据得到今月的最后一天日期遍历 得到所有日期
if (this.data.arr) {
this.data.arr = [];
}
for (var i = 0; i < this.data.lastDay; i++) {
var obj = {};
obj.day = i + 1;
this.data.arr.push(obj);
for (var j = 0; j < this.data.booklist.length; j++) {
if (this.data.arr[i].day == this.data.booklist[j]) {
this.data.arr[i].isbook = 1
}
}
}
var res = dd.getSystemInfoSync();
this.setData({
sysW: res.windowHeight / 6.5,
marLet: this.data.firstDay,
arr: this.data.arr,
year: this.data.year,
getDate: this.data.getDate,
month: this.data.month,
booklist_len: this.data.booklist.length
});
},
});
acss
.toptip {
font-size: 34rpx;
color: #aaa;
} .box1 .dateBox {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
margin-top: 40rpx;
font-size: 50rpx;
color: #282828;
} .box1 {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
} .box1>view {
text-align: center;
font-size: 34rpx;
} .isrela {
position: relative;
} .weeklist {
display: flex;
justify-content: space-around;
font-weight: bold;
border-bottom: 1rpx solid #d0d0d0;
color: #333;
} .dateOn {
position: absolute;
bottom: 10rpx;
left: 50%;
width: 10rpx;
height: 10rpx;
margin-left: -3rpx;
border-radius: 50%;
background-color: blue;
} .isbook {
box-sizing: border-box;
color: #3777b1;
background-color: #9cbbd1;
border: 1rpx solid #fff;
} .nobook {
color: #555;
}
注:转载请标明出处...
钉钉E应用(小程序)之日历的更多相关文章
- 微信小程序——极点日历使用方法
极点日历github项目地址 添加至自己的小程序方法 极点日历属性接口文档 代码实例: xml: <calendar calendar-style="calendar" he ...
- 微信小程序组件 日历
js文件 'use strict'; let choose_year = null, choose_month = null; const conf = { data: { hasEm ...
- 【微信小程序】日历插件,适用于酒店订房类小程序
本插件在原作者(传送门:http://blog.csdn.net/lengyue1084/article/details/71248778)基础上升级. 增加了点击选择具体日期和数据传输功能. 效果图 ...
- 微信小程序酒店日历超强功能
首先利用date拿到年月日 月记得+1 ,因为是从0开始的 先遍历月份,跨年年+1 ,月归至1: 然后遍历天数, lastDat = new Date(val.year,val.month,0).ge ...
- .NET平台下,钉钉微应用开发之:获取userid
工作需求,开发钉钉微应用和小程序,之前有接触过支付宝小程序和生活号的开发,流程没有很大的差别,这里记录下我用ASP.NET MVC实现钉钉微应用的开发,并实现获取用户的userid.小弟我技术有限,本 ...
- 钉钉、阿里云和PaaS平台的整合开发
钉钉在企业移动办公领域有着很高的占有率,但是可能大家都会觉得,他在企业定制化,数据分析等领域有着很大的短板. 而我们的kintone作为PaaS平台,可以补足这个短板.很多开发者想知道如何利用钉钉还有 ...
- 钉钉/支付宝小程序和微信小程序的区别及转换方案
最近接到一个工作任务,是把钉钉小程序转微信小程序... 对,居然还有这种操作,之前只听过微信小程序转支付宝小程序的,钉钉转微信是什么鬼
- 钉钉小程序----使用阿里的F2图表
在钉钉小程序中使用F2的图表遇见很多问题 不能点击或者点击错乱的问题还没有解决,因为我解决不了........................... ------------------------- ...
- 钉钉小程序不用canvas在后端绘图前端用image标签获取图片的实践
公司的需求要用电子员工卡代替用了N久的工作证,在各种场合刷二维码来代替刷卡.在钉钉小程序里实现.感觉这回又要躺坑里了. 钉钉小程序第一次做.我这个自封的GDI+大神才不要想用钉钉jsapi的方式用ca ...
随机推荐
- Twitter的分布式自增ID算法snowflake(雪花算法) - C#版
概述 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的.有些时候我们希望能使用一种简 ...
- Memory Ordering (注意Cache带来的副作用,每个CPU都有自己的Cache,内存读写不再一定需要真的作内存访问)
Memory Ordering Background 很久很久很久以前,CPU忠厚老实,一条一条指令的执行我们给它的程序,规规矩矩的进行计算和内存的存取. 很久很久以前, CPU学会了Out-Of ...
- vs2010添加TSTCON( ActiveX Control Test Container )工具
vs2010中的TSTCON( ActiveX Control Test Container )工具非自动安装,而是作为一个例程提供.所以应找到该例程,并编译: 如vs2010安装在默认路径则 1, ...
- php一个不错的分页
1.分页源码 <?php class PageView{ /**页码**/ public $pageNo = 1; /**页大小**/ public $pageSize = 20; /**共多少 ...
- Spring之bean生命始末
可以为Bean定制初始化后的生命行为,也可以为Bean定制销毁前的生命行为.举例:ba06包.首先,这些方法需要在Bean类中事先定义好:是方法名随意的public void方法. 其次,在配置文件的 ...
- Netty源码分析--NIO(一)
好久没写博客了,最近打算花些时间把Netty的源码好好读一读,下面是本人在学习的过程中的一些笔记,不能确保自己思考的完全是正确的,如果有错误,欢迎大家指正. 由于本人的语文功底烂的很,通篇使用大白话来 ...
- Linux下Flume的安装部署
一.前置条件 Flume需要依赖JDK 1.8+,JDK安装方式见本仓库: Linux环境下JDK安装 二 .安装步骤 2.1 下载并解压 下载所需版本的Flume,这里我下载的是CDH版本的Flum ...
- 【React】遍历的两种方式
1.foreach(推荐) list.forEach((item)=>{ }); eg: dataSource.forEach((item) => { const est = item.e ...
- PHP和javascript判断用户使用的是手机还是电脑
PHP判断手机还是电脑 <?php $is_mobile = (is_mobile() == true) ? "手机" : "电脑"; echo '< ...
- HTML连载19-子元素选择器&交集选择器
一.子元素选择器 1.定义:找到指定标签中所有特定的直接子元素,然后设置属性 2.格式: 标签名称一>标签名称2{ 属性:值: } 3.释义:先找到叫做“标签名称1”的标签,然后在这个标签中查找 ...