钉钉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 ...
随机推荐
- 可视化文件消息收发一体化Socket实现V0.1
http://blog.csdn.net/laoyang360/article/details/8681918
- Delphi中Menu设置Images属性后快捷按键下划线被隐藏解决方法
现象:MainMenu设置Images属性后,看不到快捷按键的下划线,如:新建(&N) 分析:VCL中Menus.pas单元的代码,看到如下语句procedure TMenuItem.Adva ...
- 项目集成dubbo
dubbo 用户指南: http://dubbo.io/User+Guide-zh.htm 开发指南:http://dubbo.io/Developer+Guide-zh.htm#DeveloperG ...
- IIS 站点和应用池命令启动和停止
在CMD下执行如下命令: IIS站点: 停止站点: C:\Windows\System32\inetsrv\appcmd.exe stop site “XXXX” 启动站点: C:\Windows\S ...
- Application生命周期(一)
1.Application是什么? Application和Activity,Service一样,是android框架的一个系统组件,当android程序启动时系统会创建一个 application对 ...
- 曹工说Tomcat1:从XML解析说起
一.前言 第一次被人喊曹工,我相当诧异,那是有点久的事情了,楼主13年校招进华为,14年在东莞出差,给东莞移动的通信设备进行版本更新.他们那边的一个小伙子来接我的时候,这么叫我的,刚听到的时候,心里一 ...
- 【Webkit Blog翻译】深入研究WebRTC | 内有福利
本文译自 A Closer Look Into WebRTC” 我们在最近的一篇 WebKit博客中宣布了对High Sierra平台和iOS中Safari的WebRTC支持.现在,我们希望能够带领大 ...
- HTML行内元素、块级元素、行内块级元素的特点与区别
元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 元素分类方式 HTML 可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者可以通过设 ...
- Java学习笔记——MySQL创建表结构
一.创建/删除数据库. create database t14; drop database t14; use t14; 二.创建若干表用于测试 这里预留了几个坑,下面要填坑的.. /*创建学生表*/ ...
- Oracle 数据库表中已有重复数据添加唯一键(唯一约束)
Oracle 数据库表中已有重复数据添加唯一键(唯一约束) 问题描述 以 demo 举例,模拟真实场景. 表 TEST_TABLE 有如下字段和数据:id 是主键,code 没有设置键和索引 ID C ...