唠叨几句:其实钉钉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应用(小程序)之日历的更多相关文章

  1. 微信小程序——极点日历使用方法

    极点日历github项目地址 添加至自己的小程序方法 极点日历属性接口文档 代码实例: xml: <calendar calendar-style="calendar" he ...

  2. 微信小程序组件 日历

    js文件 'use strict'; let choose_year = null,   choose_month = null; const conf = {   data: {     hasEm ...

  3. 【微信小程序】日历插件,适用于酒店订房类小程序

    本插件在原作者(传送门:http://blog.csdn.net/lengyue1084/article/details/71248778)基础上升级. 增加了点击选择具体日期和数据传输功能. 效果图 ...

  4. 微信小程序酒店日历超强功能

    首先利用date拿到年月日 月记得+1 ,因为是从0开始的 先遍历月份,跨年年+1 ,月归至1: 然后遍历天数, lastDat = new Date(val.year,val.month,0).ge ...

  5. .NET平台下,钉钉微应用开发之:获取userid

    工作需求,开发钉钉微应用和小程序,之前有接触过支付宝小程序和生活号的开发,流程没有很大的差别,这里记录下我用ASP.NET MVC实现钉钉微应用的开发,并实现获取用户的userid.小弟我技术有限,本 ...

  6. 钉钉、阿里云和PaaS平台的整合开发

    钉钉在企业移动办公领域有着很高的占有率,但是可能大家都会觉得,他在企业定制化,数据分析等领域有着很大的短板. 而我们的kintone作为PaaS平台,可以补足这个短板.很多开发者想知道如何利用钉钉还有 ...

  7. 钉钉/支付宝小程序和微信小程序的区别及转换方案

    最近接到一个工作任务,是把钉钉小程序转微信小程序... 对,居然还有这种操作,之前只听过微信小程序转支付宝小程序的,钉钉转微信是什么鬼

  8. 钉钉小程序----使用阿里的F2图表

    在钉钉小程序中使用F2的图表遇见很多问题 不能点击或者点击错乱的问题还没有解决,因为我解决不了........................... ------------------------- ...

  9. 钉钉小程序不用canvas在后端绘图前端用image标签获取图片的实践

    公司的需求要用电子员工卡代替用了N久的工作证,在各种场合刷二维码来代替刷卡.在钉钉小程序里实现.感觉这回又要躺坑里了. 钉钉小程序第一次做.我这个自封的GDI+大神才不要想用钉钉jsapi的方式用ca ...

随机推荐

  1. delphi 在多线程中使用 CreateOleObject 导致失败(一定要使用CoInitialize和CoUninitialize,举例查询WMI)

    原帖地址 http://bbs.csdn.net/topics/390481350 解决办法 procedure DisplayVideoInfo; var wmi, objs, obj : OleV ...

  2. 搜索栏+collectionView实现

      效果图如下:   1.h文件声明方法:   @interface IDSGameRoomSearchPage : UIView @property (nonatomic,weak) BaseVie ...

  3. 在Mac OSX下使用ssh建立隧道(在Windows下建立隧道可以使用putty,其间会用到ppk文件)

    在Windows下建立隧道可以使用putty,其间会用到ppk文件.在Mac OSX下,同样的功能可以用ssh命令实现.具体是: ssh -D 8088 -Nf user@ip -i myppk.ss ...

  4. F4帮助

    在INITIALIZATION之后添加 AT SELECTION-SCREEN ON VALUE-REQUEST FOR s_month-low 事件,s_month-low为要添加的搜索帮助. 下面 ...

  5. Spring Boot2(二):使用Spring Boot2集成Mybatis缓存机制

    前言 学习SpringBoot集成Mybatis的第二章,了解到Mybatis自带的缓存机制,在部署的时候踩过了一些坑.在此记录和分享一下Mybatis的缓存作用. 本文章的源码再文章末尾 什么是查询 ...

  6. 设计模式之装饰器模式(decorator pattern)

    装饰器模式主要对现有的类对象进行包裹和封装,以期望在不改变类对象及其类定义的情况下,为对象添加额外功能.是一种对象结构型模式.需要注意的是,该过程是通过调用被包裹之后的对象完成功能添加的,而不是直接修 ...

  7. Hive 学习之路(四)—— Hive 常用DDL操作

    一.Database 1.1 查看数据列表 show databases; 1.2 使用数据库 USE database_name; 1.3 新建数据库 语法: CREATE (DATABASE|SC ...

  8. Hive 学习之路(三)—— Hive CLI和Beeline命令行的基本使用

    一.Hive CLI 1.1 Help 使用hive -H或者 hive --help命令可以查看所有命令的帮助,显示如下: usage: hive -d,--define <key=value ...

  9. node中websocket的使用

    web Socket和Socket.IO框架 http协议是无状态的,就是说客户端可以给服务器提交请求,但是服务器不能向客户端提交请求,但是我们实际项目中会要求客户和服务器双方是类似电话那种关系, 一 ...

  10. C# Invoke

    最近在看一个项目,其中用到异步进程——控件Invoke,这里将具体用法介绍如下: 以进度条为例: //声明委托 delegate void SetProgressBarEnabledDelegate( ...