小程序日历

————————————————html——————————————————

</view>

</view>

<view class='continuity'>历史最高连续坚持了8天</view>

<view class='current'>当前已连续打卡5天</view>

</view>

</block>

</view>

</view>

<view class='comeon'>您今天打卡目标还有<text> 9 </text>分钟未完成，加油！</view>

</view>

</block>

</view>

</view>

<view class='dateBox'>{{ year }}年{{ month}}月</view>

</view>

<view class='header_view' wx:for='{{ weekArr }}' wx:key=""

wx:for-item="item">

</view>

</view>

已打卡

</view>

未打卡

</view>

当前日期

</view>

————————————————css——————————————————

.box{

width: 100%;

font-size: 28rpx;

background: #fafafa;

border-top: 1px solid #ebebeb;

}

.top_block{

height: 382rpx;

width: 88%;

margin: 26rpx 6%;

background: #fff;

border-radius: 12rpx;

}

.bigfont_box{

display: flex;

justify-content: space-between;

text-align: center;

line-height: 1;

}

.bigfont{

font-size: 82rpx;

}

.color_43{

color: #425360;

}

.top_block .color_orange{

margin-left:82rpx;

}

.top_block .color_43{

margin-right:82rpx;

}

.bigfont{

margin:30rpx 0 10rpx 0;

}

.somfont{

font-size: 24rpx;

}

.top_block_footer{

display: flex;

flex-direction: column;

align-items: center;

}

.top_block_footer > view{

line-height: 1;

}

.continuity{

font-size: 26rpx;

color: #9ea0a7;

margin-top: 28rpx;

}

.current{

margin-top: 20rpx;

}

.share_day{

width: 243rpx;

margin-top: 22rpx;

font-size: 28rpx;

padding: 23rpx 0;

background: #f7f2ef;

border-radius: 45rpx;

color: #fe562f;

text-align: center;

}

.comeon{

color: #9ea0a7;

margin-top: 108rpx;

}

.comeon text{

font-size: 32rpx;

color: #fe562f;

}

/* 下半部分 */

.bottom_blcok_bg{

background: #fffefb;

}

.bottom_blcok{

background: #fff;

padding-bottom: 60rpx;

}

.day_width{

width: 86%;

margin-left: 7%;

}

.day_titles{

display: flex;

justify-content:space-between;

font-size: 30rpx;

height: 94rpx;

line-height: 94rpx;

}

.day_header{

display: flex;

align-items: center;

padding: 20rpx 0;

}

.header_view{

width: 56rpx;

height: 56rpx;

text-align: center;

line-height: 56rpx;

font-size: 28rpx;

margin-left: 43rpx;

}

.day_titles_icon{

padding: 0 30rpx;

}

.day_titles_icon image{

width: 14rpx;

height: 22rpx;

}

.day_header :first-child{

margin-left: 0;

}

.day_content{

display:flex;

flex-wrap:wrap;

}

.content_view{

width: 56rpx;

height: 56rpx;

text-align: center;

line-height: 56rpx;

font-size: 26rpx;

margin-left: 43rpx;

margin-top: 34rpx;

border-radius: 50rpx;

}

.day_content :first-child{

margin-left: 0;

}

.day_content :nth-child(8){

margin-left: 0;

}

.day_content :nth-child(15){

margin-left: 0;

}

.day_content :nth-child(22){

margin-left: 0;

}

.day_content :nth-child(29){

margin-left: 0;

}

.day_content :nth-child(36){

margin-left: 0;

}

.footer{

height: 102rpx;

background: #fff;

display: flex;

align-items: center;

justify-content:flex-end;

font-size: 24rpx;

color: #a2a7a8;

background: #f8f5f2;

}

.footer_today{

margin-right:32rpx;

}

.footer text{

display: block;

width: 10rpx;

height: 10rpx;

border-radius: 50%;

}

.footer_today text{

border: 1px solid #ff6e36;

margin:0 5rpx 0 40rpx;

}

.footer_no text{

background: #dbdee0;

margin:0 5rpx 0 40rpx;

}

.footer_yes text{

background: #ff6e36;

margin-right: 5rpx;

}

.com_footer_flex{

display: flex;

align-items: center;

}

.bg_o{

background: #ff6e36;

color: #fff;

}

.bg_g{

background: #dbdee0;

color: #fff;

}

.bg_b{

background: #fff;

border:1px solid #ff6e36;

height:53rpx;

width: 53rpx;

line-height: 53rpx;

color: #ff6e36;

}

.bg_f{

background: #fff;

color: #fff;

}

————————————————js——————————————————

var app = getApp();

Page({

data: {

arr: [],

sysW: null,

lastDay: null,

firstDay: null,

weekArr: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],

year: null

//获取日历相关参数

dataTime: function () {

// 当前日期

var date = new Date();

//获取现今年份

var year = date.getFullYear();

//获取现今月份

var month = date.getMonth();

var months = date.getMonth() + 1;

// console.log("获取月份:" + month);

// console.log("正常月份:" + months)

//获取今日日期

let today = date.getDate();

//最后一天是几号

var d = new Date(year, months, 0);

let lastDay = d.getDate();

//第一天星期几

let firstDay = new Date(year, month, 1);

// console.log("星期:" + firstDay.getDay())

let dayArr = [];

//根据得到今月的最后一天日期遍历得到所有日期

for (var i = 1; i < lastDay + 1; i++) {

let obj = {}

obj.font = i;

obj.id = "1";

dayArr.push(obj);

}

for (var j = 0; j < firstDay.getDay();j++ ){

let obj = {}

obj.font = "idx";

dayArr.unshift(obj)

}

this.setData({

year: year,

month: months,

marLet: firstDay.getDay(),

arr: dayArr,

getDate: today,

});

onLoad: function (options) {

var that = this;

that.dataTime();

// app.wxRequest("coreapi/core/v1/queryUserSignDetailInfo",

// {}, "POST", function (res) {

// let data = res.data.data;

// if (res.data.code == 0) {

// that.setData({

// })

// console.log(res.data)

// } else {

// app.showLoading(res.data.msg, "none");

// }

// })

app.wxRequest("coreapi/core/v1/queryUserForMonthSignList",

{ year: 2019, month:1 }, "POST", function (res) {

let data = res.data.data;

if (res.data.code == 0) {

that.setData({

})

console.log(res.data)

} else {

app.showLoading(res.data.msg, "none");

}

})

// 上月

_next: function () {

var that = this;

let cuntMonth = that.data.month - 1;

let year = that.data.year;

// 当前日期

var date = new Date();

if (cuntMonth == 0) {

let newYear = year - 1;

//获取现今月份

let month = 0;

let months = 12;

console.log("获取月份:" + month);

console.log("正常月份:" + months)

//最后一天是几号

var d = new Date(newYear, month, 0);

let lastDay = d.getDate();

//第一天星期几

let firstDay = new Date(newYear, 11);

let dayArr = [];

console.log("星期:" + firstDay.getDay())

//根据得到今月的最后一天日期遍历得到所有日期

for (var i = 1; i < lastDay + 1; i++) {

let obj = {}

obj.font = i;

obj.id = "1";

dayArr.push(obj);

}

for (var j = 0; j < firstDay.getDay(); j++) {

let obj = {}

obj.font = "idx";

dayArr.unshift(obj)

}

that.setData({

year: newYear,

marLet: firstDay.getDay(),

month: 12,

arr: dayArr,

})

} else {

let newYear = that.data.year;

let months = date.getMonth() + 1;

//最后一天是几号

var d = new Date(newYear, cuntMonth, 0);

let lastDay = d.getDate();

//第一天星期几

console.log(cuntMonth)

let firstDay = new Date(newYear, cuntMonth - 1);

let dayArr = [];

//根据得到今月的最后一天日期遍历得到所有日期

for (var i = 1; i < lastDay + 1; i++) {

let obj = {}

obj.font = i;

obj.id = "1";

dayArr.push(obj);

}

for (var j = 0; j < firstDay.getDay(); j++) {

let obj = {}

obj.font = "idx";

dayArr.unshift(obj)

}

that.setData({

year: newYear,

marLet: firstDay.getDay(),

month: cuntMonth,

arr: dayArr,

})

}

_last: function () {

var that = this;

let cuntMonth = that.data.month + 1;

let year = that.data.year;

// 当前日期

var date = new Date();

if (cuntMonth == 13) {

let newYear = year + 1;

//获取现今月份

var month = 0;

let months = 1;

console.log("获取月份:" + month);

console.log("正常月份:" + months)

//最后一天是几号

var d = new Date(newYear, month, 0);

let lastDay = d.getDate();

//第一天星期几

let firstDay = new Date(newYear, month);

let dayArr = [];

console.log("星期:" + firstDay.getDay())

//根据得到今月的最后一天日期遍历得到所有日期

for (var i = 1; i < lastDay + 1; i++) {

let obj = {}

obj.font = i;

obj.id = "1";

dayArr.push(obj);

}

for (var j = 0; j < firstDay.getDay(); j++) {

let obj = {}

obj.font = "idx";

dayArr.unshift(obj)

}

that.setData({

year: newYear,

marLet: firstDay.getDay(),

month: 1,

arr: dayArr,

})

} else {

let newYear = that.data.year;

let months = date.getMonth() + 1;

//最后一天是几号

var d = new Date(newYear, cuntMonth, 0);

let lastDay = d.getDate();

//第一天星期几

console.log(cuntMonth)

let firstDay = new Date(newYear, cuntMonth - 1);

let dayArr = [];

//根据得到今月的最后一天日期遍历得到所有日期

for (var i = 1; i < lastDay + 1; i++) {

let obj = {}

obj.font = i;

obj.id = "1";

dayArr.push(obj);

}

for (var j = 0; j < firstDay.getDay(); j++) {

let obj = {}

obj.font = "idx";

dayArr.unshift(obj)

}

that.setData({

year: newYear,

marLet: firstDay.getDay(),

month: cuntMonth,

arr: dayArr,

})

}

// 分享

onShareAppMessage: function (res) {

let that = this;

if (res.from === 'button') {

console.log(res.target)

}

return {

title: '我是理财师APP,让理财师更专业',

path: '/pages/school/school',

}

})

最后编辑于：2019.01.24 13:02:38

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342

小程序日历

推荐阅读更多精彩内容