<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title
原创 2021-12-28 17:28:44
1574阅读
不用任何第三方库,只基于vue2实现一个日历组件,末尾附上我的代码,单文件,代码没有抽取,有点长。哪位大佬批评指正一下样式是类似于window10日历支持控制周一还是周日在第一列支持鼠标滑动切换支持单选,拖动鼠标多选,范围选择支持年月日选择切换支持传入选中数据支持隐藏非本月日期QCalendar.scss.Q-calendar-change-enter-active,.Q-calendar-cha
原创 2022-10-24 09:43:49
1082阅读
<template> <div class="Calendar"> <Header /> <DateList /> <div style="overflow: hidden;"> nd="touchend" @touchmove="touchmove" ref="w.
原创 2023-02-14 09:09:55
1278阅读
电脑是很多职场人士工作都要用到的,有的人甚至一天到晚对着地电脑不停的忙碌,还有干不完的活。以前事情比较多,都喜欢用笔记录在本子上,以防止自己忘记,这种方式显然效率不高,再说纸上的字又不会主动提醒你做事。如果想要定时提醒的软件,可以在电脑上使用带有提醒功能的便签。电脑日历可以添加提醒事项,不过小编试了一下,提醒方式比较单一,就是在电脑右下角弹出一个提醒框,而且无法结合当月的日历,批量查看当月提醒事项
转载 2023-10-11 06:01:45
175阅读
vue自定义小日历组件一、前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个。最终效果如图所示。二、日历样式我的这个日历组件主要分为导航栏区和主要内容区,导航栏按钮样式什么的都是自定义的,很简单,源码有就不罗嗦。主要讲一下日历内容的样式设计。日历内容都是用<ul>和<li>标签实现的,星期栏和日期栏分别为
前言因项目的需要,而且当前组件库并不支持业务,所以,重新对日历组件进行封装。该篇博客就对实现日历的思路进行存档,方便以后的查阅。先上图:UI小哥哥的原型图。接下来的思路都是根据该图进行解说逻辑1.组件的拆分,分出哪些是业务,哪些是基础组件。 整体来说,这就是在日历的基础上添加业务,所以日历组件应该是基础组件,而业务应该是通过插槽插入进去的。那么,右上方的分入分出合计以及每个日历中的分入,分出都是需
项目:公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求:展示当前日期(服务器时间)前后90天,一共181天的日期。日历可以左右滑动切换月份。当月份的如果不在181天区间的,需要置灰并且不可点击。点击日历绑定的节点的外部,关闭弹窗。涉及内容:获取服务器时间
转载 2024-08-01 08:22:04
497阅读
//根组件<template> <div class="hello"> <Time v-model="value"></Time> </div></template><script>import formate from '../utils/formate'import Time ...
原创 2021-09-03 13:42:00
1303阅读
结构及样式先拆分一下日历, 可将其上下拆分成两部分, 上面的 星期 部分, 和下面的 数据 部分, 一周7天限定了列数为7列, 行数会随当月天数及1号所在位置而有所不同.移动端亦应根据屏幕宽度自适应布局, flex布局就是一个很好的选择, 我们对数据部分进行下模拟, 先造一个长度为40数据都为0的数组如下:const dataArr = Array(40).fill(0, 0, 40)现在, 我们
(1) 简介该日历组件是一个应用于移动端的日历组件采用了rem(文末附有rem.js)(2) template<template> <div class="calendar"> <div class="calendar-year"> <span @click="chooseYear">{{showDate.year}}</span&
转载 2024-03-07 12:38:38
372阅读
有这样一种需求,选择[开始时间]和[结束时间],接待时间自动设置起始时间和终止时间。 使用的日历控件是WeUI官方的Calendar。<!--出差时间--> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">出差时间</la
转载 8月前
47阅读
前言 项目中签到日历尝试过用GridView或者Recyclerview来实现,用ViewFilper或者ViewPager实现切换动画,功能是实现了,但是第一次启动时,因为GridView或者Recyclerview要创建多个布局,导致界面卡顿,后来想到可以用自定义View的方式来实现,就是可能略微麻烦一些,不过还是尽量实现了一下,于是就有了下面的效果及这篇博客,算是对Cale
# jQuery日历签到功能实现 在现代的Web开发中,日历签到功能越来越受到重视。它不仅能够帮助用户记录每日活动,还能制定计划、追踪进度。本文将通过使用jQuery库实现一个简单的日历签到功能,结合代码示例,帮助大家理解如何实现。我们还将展示一个甘特图和序列图,帮助可视化工程进度和功能交互。 ## 一、功能需求 我们希望实现一个简易的日历签到功能,主要有以下功能: 1. 每一天可以签到
原创 2024-10-26 04:04:06
58阅读
# 如何实现 Android 签到日历 实现一个签到日历应用是一个很好的项目,可以帮助你熟悉 Android 开发的基础知识。本文将引导你一步一步地创建一个简单的签到日历应用,并详细解释每一步所需的代码。 ## 整体流程 在开始之前,我们先了解实现签到日历的整体流程。以下是一个简单的步骤表格,展示了我们将要进行的流程。 | 步骤 | 描述
原创 9月前
57阅读
突然发现之前已经有两篇博客了,最近开发了两个新项目,10.1之前上线,所以一直都很忙,新项目用到了几个知识点,所以在此总结一下, 首先做了一个签到返利效果的,在网上找了蛮多的demo,但是没有合适的,主要看了两种 我接触的两种方式 1.通过GridView 去写一个日历 2.通过自定义去画一个日历 最后我选了自定义View 不管哪一种,都需要用到DateUtils,获取年月日(这里因为是
# Android 日历签到功能实现指南 在Android开发中,实现一个日历签到功能是一个非常实用的任务。作为一名新手,你可能会觉得这个过程有些复杂,但只要按部就班地进行,就会发现其实并不难。下面,我将为你详细介绍实现“Android日历签到”的整个流程,并提供必要的代码示例。 ## 整体流程 我们将整个实现过程分为以下几个步骤: | 步骤 | 描述 | |------|------|
原创 8月前
70阅读
# jQuery签到日历 ## 简介 在今天的科普文章中,我们将介绍如何使用jQuery创建一个简单的签到日历签到日历是一种常见的用户交互功能,可以用于记录用户的活动情况,例如每日签到、运动打卡等。通过本文,你将了解如何使用jQuery创建一个基本的签到日历,并在其中添加一些自定义功能。 ## 准备工作 在开始之前,我们需要准备一些必要的工具和资源: - HTML文档 - CSS样式表
原创 2023-08-20 05:27:37
198阅读
vue-calendar-component基于 vue 2.0 开发的轻量,高性能日历组件占用内存小,性能好,样式好看,可扩展性强原生 js 开发,没引入第三方库WhyGithub 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件少部分日历组件的占用内存过于大,对于日历这样简单的功能来说显然不够合理Demo 或者请用浏览器的手机模式查看 效果? 觉得好用给
本来呢,开开心心的写完了这个功能,然后发现elemeng更新了,增加了日历组件这个功能 我的内心机器奔溃,但是,element的日历组件太简单了,我感觉还是手撸一个吧,毕竟也不是很难 实现了显示农历,备注功能,点击某一天为某一天添加备注的功能... 引用的是他人写好的组件: https://gith
原创 2022-01-13 16:26:28
1031阅读
uniapp Vue3 日历签到 跳转
原创 2024-01-20 21:55:21
194阅读
  • 1
  • 2
  • 3
  • 4
  • 5