微信小程序实现日历功能、日历转换插件、calendar

文章目录

  • 演示
  • html
  • JavaScript

演示

效果图

calendar

微信小程序实现交互

X2_2_2_25

html

<view wx:if="{{calendarArr.length}}">
  <view class="height_786 df_fdc_aic">
    <view class="grid_c7_104">
      <view class="font_weight_800 text_align_center {{index===0||index===week.length-1?'color_777':'color_333'}}" wx:for="{{week}}" wx:key="id">{{item.title}}</view>
    </view>

    <view class="grid_c7_104 margin_t_26 grid_row_gap_16">
      <view class="height_104 dis_c_cc radius_6 text_align_center {{item.date===date&&!item.$b?'back_primary color_EEE':''}} {{item.date===newDate?'font_weight_800 font_style_oblique color_FF780A':''}} {{item.$isWeekend}}" wx:for="{{calendarArr}}" wx:key="id" data-item="{{item}}" catchtap="selectCalendar">
        <view>{{item.cDay}}</view>
        <view class="font_size_22 {{item.$festival}}">{{item.$SF}}</view>
      </view>
    </view>
  </view>

  <view class="margin_t_26 dis_r_c">
    <view class="width_95 dis_r_sa padding_tb_8 text_align_center shadow_0_0_6_6_CCC radius_8">
      <view wx:for="{{info.list}}" wx:key="id">
        <view>{{item.cTitle}}</view>
        <view>{{item.lTitle}}</view>
      </view>
    </view>
  </view>

  <view class="margin_t_26">
    <picker-view class="height_300" indicator-class="height_90" value="{{pickerVal}}" bindchange="bindChange">
      <picker-view-column>
        <view class="height_90 text_align_center dis_r_c" wx:for="{{years}}" wx:key="index">
          <text>{{item.title}}</text>
        </view>
      </picker-view-column>
      <picker-view-column>
        <view class="height_90 text_align_center dis_r_c" wx:for="{{months}}" wx:key="index">
          <text>{{item.title}}</text>
        </view>
      </picker-view-column>
    </picker-view>
  </view>
</view>

JavaScript

// 注意这里引入的方式
// 因为不想构建小程序
// 所以直接把下载好的日历转换文件夹放到小程序中引用即可
import calendar from '../../../utils/js-calendar-converter/src/index';

Page({
  /**
   * 页面的初始数据
   */
  data: {
    y: undefined,
    m: undefined,
    d: undefined,
    date: '',
    calendarArr: [],
    week: [{
        id: 'id0',
        title: '日',
        value: 0
      },
      {
        id: 'id1',
        title: '一',
        value: 1
      },
      {
        id: 'id2',
        title: '二',
        value: 2
      },
      {
        id: 'id3',
        title: '三',
        value: 3
      },
      {
        id: 'id4',
        title: '四',
        value: 4
      },
      {
        id: 'id5',
        title: '五',
        value: 5
      },
      {
        id: 'id6',
        title: '六',
        value: 6
      }
    ],
    info: {},
    years: [],
    months: [],
    pickerVal: [0, 0],
    newDate: ''
  },

  /**
   * 选择年份与月份
   * @param {object} obj
   * @return {undefined} undefined
   */
  bindChange({
    detail: {
      value
    }
  }) {
    let self = this,
      selfData = self.data,
      years = selfData.years,
      months = selfData.months,
      y = selfData.y,
      m = selfData.m,
      d = selfData.d,
      year = years[value[0]].value,
      month = months[value[1]].value,
      newDate = '';

	// 当滑动到不是当年当月的时候默认选中当月1号
    newDate = year !== y || month !== m ? `${year}-${month}-1` : `${year}-${month}-${d}`;

    self.setData({
      newDate,
      pickerVal: value
    }, () => self.createCalendar(year, month));
  },

  /**
   * 显示的信息
   * @param {object} obj
   * @return {Array} info
   */
  handleInfo(obj) {
    let list = [{
        id: 'id1',
        cTitle: obj.cYear + '年',
        lTitle: obj.gzYear + obj.Animal + '年'
      },
      {
        id: 'id2',
        cTitle: obj.cMonth + '月',
        lTitle: obj.gzMonth + obj.IMonthCn
      },
      {
        id: 'id3',
        cTitle: obj.cDay + '日',
        lTitle: obj.gzDay + obj.IDayCn
      },
      {
        id: 'id4',
        cTitle: obj.ncWeek,
        lTitle: obj.astro
      }
    ];

    obj.list = list;

    this.setData({
      info: obj
    });
  },

  /**
   * 创建日期
   * @param y 年
   * @return undefined
   */
  selectCalendar({
    currentTarget: {
      dataset: {
        item
      }
    }
  }) {
    this.handleInfo(item);
    this.setData({
      newDate: item.date
    });
  },

  /**
   * 创建日期
   * @param y 年
   * @param m 月
   * @param d 日
   * @return [{}]
   */
  creationDate(y, m, d) {
    let arr = [];

    for (let i = 1; i < d + 1; i++) {
      let obj = calendar.solar2lunar(y, m, i);

      arr.push({
        ...obj
      });
    }

    return arr;
  },

  /**
   * 收集创建日期需要的数据(重要函数)
   * @param {Number} y 年
   * @param {number} m 月
   * @return [{}]
   */
  createCalendar(y, m) {
    let self = this,
      selfData = self.data,
      newDate = selfData.newDate,
      y1 = y,
      y2 = y,
      y3 = y,
      m1 = m - 1,
      m2 = m,
      m3 = m + 1,
      d1 = undefined,
      d2 = undefined,
      d3 = undefined,
      arr1 = [],
      arr2 = [],
      arr3 = [],
      len2 = 0,
      nWeek1 = undefined,
      nWeek3 = undefined,
      info = {};

    if (m === 1)(y1 = y - 1, m1 = 12);
    if (m === 12)(y3 = y + 1, m3 = 1);

    d1 = calendar.solarDays(y, m1);
    d2 = calendar.solarDays(y, m2);
    d3 = calendar.solarDays(y, m3);

    arr1 = self.creationDate(y1, m1, d1);
    arr2 = self.creationDate(y2, m2, d2);
    arr3 = self.creationDate(y3, m3, d3);
    len2 = arr2.length;
    nWeek1 = arr2[0].nWeek;
    nWeek3 = arr2[len2 - 1].nWeek;

    nWeek1 = nWeek1 === 7 ? 0 : arr2[0].nWeek;
    nWeek3 = nWeek3 === 6 ? 0 : nWeek3 === 7 ? nWeek3 - 1 : 6 - nWeek3;

    // 前部分补全一个星期
    for (let i = arr1.length - 1; nWeek1 > 0; i--) {
      let item = arr1[i];

      item.$b = true;
      arr2.unshift(item);
      nWeek1--;
    }

    // 后部分补全一个星期
    for (let i = 0; i < nWeek3; i++) {
      let item = arr3[i];

      item.$b = true;
      arr2.push(item);
    }

    arr2 = arr2.map((item, i) => {
      if (item.IDayCn === '初一' && !item.festival && !item.Term && !item.lunarFestival) {
        item.$festival = '';
        item.$SF = item.IMonthCn;
      } else if (item.festival) {
        item.$festival = 'color_primary';
        item.$SF = item.festival;
      } else if (item.Term) {
        item.$festival = 'color_primary';
        item.$SF = item.Term;
      } else if (item.lunarFestival) {
        item.$festival = 'color_primary';
        item.$SF = item.lunarFestival;
      } else {
        item.$festival = '';
        item.$SF = item.IDayCn;
      }

      if (['星期六', '星期日'].includes(item.ncWeek) && item.cMonth === m) {
        item.$isWeekend = 'color_777';
      } else if (item.$b) {
        item.$isWeekend = 'color_CCC';
      } else {
        item.$isWeekend = 'color_333';
      }
      item.$id = `id${i+1}`;

      if (item.date === newDate) info = item;

      return item;
    });

    self.handleInfo(info);

    self.setData({
      calendarArr: arr2
    });
  },

  /**
   * 初始化
   */
  init() {
    let self = this,
      y = undefined,
      m = undefined,
      d = undefined,
      years = [],
      months = [],
      pickerVal = [],
      date = new Date();

    y = date.getFullYear();
    m = date.getMonth() + 1;
    d = date.getDate();

	// 获取100年时间的日历
    for (let i = y - 95; i <= y + 5; i++) years.push({
      id: `id${i}`,
      title: i + '年',
      value: i
    });

    for (let i = 0; i < 12; i++) months.push({
      id: `id${i}`,
      title: i + 1 + '月',
      value: i + 1
    });

    pickerVal = [
      years.findIndex(item => item.value === y),
      months.findIndex(item => item.value === m)
    ];

    self.setData({
        y,
        m,
        d,
        date: `${y}-${m}-${d}`,
        newDate: `${y}-${m}-${d}`,
        years,
        months
      },
      () => (self.createCalendar(y, m), self.setData({
        pickerVal
      })));
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.init();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/51515.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Debezium日常分享系列之：定制Debezium 信号发送和通知

Debezium日常分享系列之：定制Debezium 信号发送和通知

Debezium日常分享系列之&#xff1a;定制Debezium 信号发送和通知 一、自定义信号和通知通道二、结论 Debezium 2.3 在信号和通知功能方面引入了新的改进。除了 Debezium 提供的预定义信号和通知通道之外&#xff0c;您还可以设置新的信号和通知通道。此功能使用户能够自定义系…
阅读更多...
微服务——服务异步通讯RabbitMQ

微服务——服务异步通讯RabbitMQ

前置文章 消息队列——RabbitMQ基本概念容器化部署和简单工作模式程序_北岭山脚鼠鼠的博客-CSDN博客 消息队列——rabbitmq的不同工作模式_北岭山脚鼠鼠的博客-CSDN博客 消息队列——spring和springboot整合rabbitmq_北岭山脚鼠鼠的博客-CSDN博客 目录 Work queues 工作队列…
阅读更多...
JS——输入输出语法数组的操作

JS——输入输出语法数组的操作

JavaScript输入输出语法 目标&#xff1a;能写出常见的JavaScript输入输出语法 输出语法 语法1&#xff1a; document.write(要输出的内容)作用&#xff1a; 向body内输出内容 注意&#xff1a; 如果输出的内容写的是标签&#xff0c;也会被解析成网页元素 语法2&#xff1a…
阅读更多...
Verilog语法学习——LV9_使用子模块实现三输入数的大小比较

Verilog语法学习——LV9_使用子模块实现三输入数的大小比较

LV9_使用子模块实现三输入数的大小比较 题目来源于牛客网 [牛客网在线编程_Verilog篇_Verilog快速入门 (nowcoder.com)](https://www.nowcoder.com/exam/oj?page1&tabVerilog篇&topicId301) 题目 描述 在数字芯片设计中&#xff0c;通常把完成特定功能且相对独立的…
阅读更多...
特殊矩阵的压缩存储

特殊矩阵的压缩存储

1 数组的存储结构 1.1 一维数组 各数组元素大小相同&#xff0c;且物理上连续存放。第i个元素的地址位置是&#xff1a;a[i] LOC i*sizeof(ElemType) (LOC为起始地址) 1.2 二维数组 对于多维数组有行优先、列优先的存储方法 行优先&#xff1a;先行后列&#xff0c;先存储…
阅读更多...
无涯教程-jQuery - Select menu组件函数

无涯教程-jQuery - Select menu组件函数

小部件选择菜单功能可与JqueryUI中的小部件一起使用&#xff0c;它提供了可替换样式的选择元素。一个简单的选择菜单如下所示。 Select menu - 语法 $( "#menu" ).selectmenu(); Select menu - 示例 以下是显示选择菜单用法的简单示例- <!doctype html> &…
阅读更多...
自动驾驶感知系统-全球卫星定位系统

自动驾驶感知系统-全球卫星定位系统

卫星定位系统 车辆定位是让无人驾驶汽车获取自身确切位置的技术&#xff0c;在自动驾驶技术中定位担负着相当重要的职责。车辆自身定位信息获取的方式多样&#xff0c;涉及多种传感器类型与相关技术。自动驾驶汽车能够持续安全可靠运行的一个关键前提是车辆的定位系统必须实时…
阅读更多...
Go语言进阶 + 依赖管理

Go语言进阶 + 依赖管理

依赖配置 - version开始&#xff0c;就开始很难听懂了&#xff0c;需要结合很多课后配套资料查阅很多文档和网站....然而好像没有那么多时间&#xff0c;一天给3小时学Go真的顶天了.....还有算法和Linux的Mysql... 这几天学Go已经把算法给挤掉了.....下步要权衡一下&#xff0c…
阅读更多...
Centos7中实现脚本使用mysqldump实现分库分表备份

Centos7中实现脚本使用mysqldump实现分库分表备份

脚本 #!/bash/bin userroot #用户名 password123456 #密码 back_path/backup/db databases_file/backup/databases.list [ -f $databases_file ] || touch /backup/databases.list if [[ ! -s ${databases_file} ]] then while read line do[ -d ${back_path}/$line ] …
阅读更多...
ERROR in unable to locate ‘***/public/**/*‘ glob

ERROR in unable to locate ‘***/public/**/*‘ glob

前提 自己搭了一个react项目的脚手架&#xff0c;npm包下载一切都很正常&#xff0c;启动的时候突然就报ERROR in unable to locate ***/public/**/* glob这个错误&#xff0c;根据百度分析了一下产生的原因&#xff1a;webpack配置文件中的CopyWebpackPlugin导致的 网上给出的…
阅读更多...
C语言指针应该这么学？

C语言指针应该这么学？

数组名的意义&#xff1a; 1. sizeof(数组名)&#xff0c;这里的数组名表示整个数组&#xff0c;计算的是整个数组的大小。 2. &数组名&#xff0c;这里的数组名表示整个数组&#xff0c;取出的是整个数组的地址。 3. 除此之外所有的数组名都表示首元素的地址。 根据以上数…
阅读更多...
用asp.net开发h5网页版视频播放网站,类似优酷,jellyfin,emby

用asp.net开发h5网页版视频播放网站,类似优酷,jellyfin,emby

之前用jellyfin开源软件搞了一个视频播放服务器,用来共享给家里人看电影和电视剧,jellyfin虽然各方面功能都很强大,但是界面和使用习惯都很不适合,于是就想着利用下班休息时间做一套自己喜欢的视频网站出来. 本来是打算直接用jellyfin的源码进行修改,源码是用C# netcore 写的服…
阅读更多...
【C++进阶：哈希--unordered系列的容器及封装】

【C++进阶：哈希--unordered系列的容器及封装】

本课涉及到的所有代码都见以下链接&#xff0c;欢迎参考指正&#xff01; practice: 课程代码练习 - Gitee.comhttps://gitee.com/ace-zhe/practice/tree/master/Hash unordered系列关联式容器 在C98中&#xff0c;STL提供了底层为红黑树结构的一系列关联式容器&#xff0c;在…
阅读更多...
使用Pytest生成HTML测试报告

使用Pytest生成HTML测试报告

背景 最近开发有关业务场景的功能时&#xff0c;涉及的API接口比较多&#xff0c;需要自己模拟多个业务场景的自动化测试&#xff08;暂时不涉及性能测试&#xff09;&#xff0c;并且在每次测试完后能够生成一份测试报告。 考虑到日常使用Python自带的UnitTest&#xff0c;所…
阅读更多...
观察者模式与观察者模式实例EventBus

观察者模式与观察者模式实例EventBus

什么是观察者模式 顾名思义&#xff0c;观察者模式就是在多个对象之间&#xff0c;定义一个一对多的依赖&#xff0c;当一个对象状态改变时&#xff0c;所有依赖这个对象的对象都会自动收到通知。 观察者模式也称为发布订阅模式(Publish-Subscribe Design Pattern)&#xff0…
阅读更多...
ViT-vision transformer

ViT-vision transformer

ViT-vision transformer 介绍 Transformer最早是在NLP领域提出的&#xff0c;受此启发&#xff0c;Google将其用于图像&#xff0c;并对分类流程作尽量少的修改。 起源&#xff1a;从机器翻译的角度来看&#xff0c;一个句子想要翻译好&#xff0c;必须考虑上下文的信息&…
阅读更多...
【Linux后端服务器开发】MAC地址与其他重要协议

【Linux后端服务器开发】MAC地址与其他重要协议

目录 一、以太网 二、MAC地址 三、MTU 四、ARP协议 五、DNS系统 六、ICMP协议 七、NAT技术 八、代理服务器 一、以太网 “以太网”不是一种具体的网路&#xff0c;而是一种技术标准&#xff1a;既包含了数据链路层的内容&#xff0c;也包含了一些物理层的内容&#xf…
阅读更多...
k8s容器日志收集方案

k8s容器日志收集方案

背景 由于以下容器本身特性和现有日志采集工具的缺陷&#xff0c;开发者在收集Kubernetes分布式集群日志时常常遇到困扰&#xff1a; 容器本身特性&#xff1a; 采集目标多&#xff1a;容器本身的特性导致采集目标多&#xff0c;需要采集容器内日志、容器stdout。对于容器…
阅读更多...
实验六 调度器-实验部分

实验六 调度器-实验部分

目录 一、知识点 1.进程调度器设计的目标 1.1.进程的生命周期 1.2.用户进程创建与内核进程创建 1.3.进程调度器的设计目标 2.ucore 调度器框架 2.1.调度初始化 2.2.调度过程 2.2.1.调度整体流程 2.2.2.设计考虑要点 2.2.3.数据结构 2.2.4.调度框架应与调度算法无关…
阅读更多...
Zabbix分布式监控快速入门

Zabbix分布式监控快速入门

目录 1 Zabbix简介1.1 软件架构1.2 版本选择1.3 功能特性 2 安装与部署2.1 时间同步需求2.2 下载仓库官方源2.3 Zabbix-Server服务端的安装2.3.1 安装MySQL2.3.1.1 创建Zabbix数据库2.3.1.2 导入Zabbix库的数据文件 2.3.2 配置zabbix_server.conf2.3.3 开启Zabbix-Server服务2.…
阅读更多...
最新文章

Copyright @ 2022~2023