日历demo

已于 2022-06-22 16:21:42 修改
阅读量374 收藏
点赞数
分类专栏： js 文章标签： javascript
于 2022-04-08 17:49:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42630688/article/details/124047414
版权

方案一

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      
    }
    .container {
      width: 800px;
      margin: 50px auto;
      
    }
    .week-day {
      display: flex;
    }
    .week {
      flex: 0 0 14%;
      text-align: center;
    }
    .days {
      display: flex;
      flex-wrap: wrap;
    }
    .day {
      flex: 0 0 14%;
      height: 60px;
      /* background-color: cyan; */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .day:hover {
      background-color: #f5f5f5;

    }
    .day.active {
      background-color: cyan;
    }
    .df {
      display: flex;
    }
    .fsb {
      display: flex;
      justify-content: space-between;
    }

    .btn {
      margin-right: 30px;
    }
    .next {
      margin-left: 30px;
    }
  </style>
</head>
<body>
  <div class="container df fsb" style="padding: 0 100px;">
    <div class="btn preview">上个月</div>

    <div class="date"></div>
    <div class="btn next">下个月</div>
  </div>
  <div class="container">
    <div class="week-day">
      <div class="week">星期一</div>
      <div class="week">星期二</div>
      <div class="week">星期三</div>
      <div class="week">星期四</div>
      <div class="week">星期五</div>
      <div class="week">星期六</div>
      <div class="week">星期日</div>
    </div>
    <div class="days">
      
    </div>

  </div>
  <script>
    class Calendar{
      constructor({date:dateStr='',container=null}) {
        this.dateStr = dateStr
        this.date = this.dateStr? new Date(this.dateStr) :new Date() 
        this.container = document.querySelector(container) 
        if(!container) {
          throw new Error('container is required')
        }
        this.init()
      }

      init() {
        this.year = this.date.getFullYear()
        this.month = this.date.getMonth()+1
        this.weekDay = this.date.getDay()
        this.days = this.getMonthDays()
        this.isToday = this.checkIsToday()
        this.render()
      }
      checkIsToday(day) {
        let date = new Date()
        return date.getFullYear()==this.year && this.month==(date.getMonth()+1) &&day==date.getDate()
      }
      getMonthDays() {
        return new Date(this.year, this.month, 0).getDate()
      }
      render() {
        let str = ''
        if (this.weekDay >= 1) {
          str = `<div class="day"></div>`.repeat(this.weekDay - 1)
        }else {
          str = `<div class="day"></div>`.repeat(6)

        }
        for (let i = 1; i <= this.days; i++) {
          str += `<div class="day ${this.checkIsToday(i)?'active':''}" >${i}</div>`
        }
        let total = this.weekDay == 0?this.days+6: this.weekDay-1 + this.days
        if(total<42) {
          str += `<div class="day"></div>`.repeat(42-total)
        }
        this.container.innerHTML= str
      }
      getCurrent() {
        return `${this.year}-${this.month}`
      }
      lastMonth() {
        if(this.month==1) {
          this.month = 12
          this.year = this.year-1
        }else {
          this.month --
        }
        this.date = new Date(`${this.year}-${this.month}-1`)
        this.init()
      }
      nextMonth() {
        if (this.month == 12) {
          this.month = 1
          this.year = this.year + 1
        } else {
          this.month++
        }
        this.date = new Date(`${this.year}-${this.month}-1`)
        this.init()
      }
    }


    $(function() {
      let container = $('.container')
      let calendar  = new Calendar({container:'.days'})
      $('.date').text(calendar.getCurrent())
      $('.preview').click(()=> {
        calendar.lastMonth()
        $('.date').text(calendar.getCurrent())
      })
      $('.next').click(()=> {
        calendar.nextMonth()
        $('.date').text(calendar.getCurrent())
      })
    })
  
  </script>
</body>
</html>

方案2

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .app {
      width: 700px;
    }

    .week {
      display: flex;
      align-items: center;

    }

    .week-item {
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: #f5f5f5;
    }

    .daybox {
      display: flex;
      flex-wrap: wrap;
    }

    .day {
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }

    .day.cur {
      color: red;
    }

    .day.before,
    .day.after {
      color: #ccc;
    }

    .title {
      display: flex;
      align-items: center;
    }

    .pre,
    .next {
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 18px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="title">
    <div class="pre">
      < </div>
        <div class="current"></div>
        <div class="next">></div>
    </div>
    <div class="app">
      <div class="week">
        <div class="week-item">1</div>
        <div class="week-item">2</div>
        <div class="week-item">3</div>
        <div class="week-item">4</div>
        <div class="week-item">5</div>
        <div class="week-item">6</div>
        <div class="week-item">7</div>
      </div>
      <div class="week daybox">

      </div>
    </div>

    <script>

      class Calendar {
        constructor(data) {
          let date = new Date(data)
          this.year = date.getFullYear()
          this.curMonth = date.getMonth() + 1
          this.curDay = date.getDay()
          this.month = []
          this.monthDay = {}
          this.genMonth()
          this.render()
        }
        isLeapYear() {
          return this.year % 4 == 0 && this.year % 100 != 0 || this.year % 400 == 0
        }
        genMonth() {
          this.month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
          if (this.isLeapYear()) {
            this.month[1] = 29
          }
        }
        render() {
          this.monthFirstDay = new Date(`${this.year}-${this.curMonth}-1`).getDay()
          this.first = this.monthFirstDay == 0 ? 7 : this.monthFirstDay
          let day = this.getBefore().concat(this.getMonthArr(), this.getAfter())
          let str = ''
          day.forEach(item => {
            str += `<div class="day ${item.flag}  ${this.isCurrent(item.day) ? 'cur' : ''}">${item.day}</div>`
          })
          let box = document.querySelector('.daybox')
          box.innerHTML = str
          this.renderCurrent()
        }
        renderCurrent() {
          let cur = document.querySelector('.current')
          cur.innerHTML = this.getCurrent()
        }
        getMonthArr() {
          let len = this.month[this.curMonth - 1]
          let arr = []
          for (let i = 1; i <= len; i++) {
            arr.push({ day: i, flag: 'month' })
          }
          return arr
        }
        getBefore() {
          let len = this.first - 1
          let index = this.curMonth == 12? 10: this.curMonth
          let before = this.month[index]
          let arr = []
          while (len > 0) {
            arr.push({ day: before, flag: 'before' })
            before--
            len--
          }
          arr.sort((a, b) => a.day - b.day)
          return arr
        }
        getAfter() {
          let endDay = new Date(`${this.year}-${this.curMonth}-${this.month[this.curMonth - 1]}`).getDay()
          let len = 7 - endDay == 0 ? 0 : 7 - endDay
          let total = this.getMonthArr().length + this.getBefore().length
          if (total < 35) {
            len = len + 7
          }
          let arr = []
          for (let i = 1; i <= len; i++) {
            arr.push({ day: i, flag: 'after' })
          }
          return arr
        }
        isCurrent(day) {
          let date = new Date()
          return date.getFullYear() == this.year && (date.getMonth() + 1) == this.curMonth && date.getDate() == day
        }
        getCurrent() {
          return `${this.year} - ${this.curMonth}`
        }
        pre() {
          let m = this.curMonth - 1
          if (m == 0) {
            this.curMonth = 12
            this.year = this.year - 1
          } else {
            this.curMonth = this.curMonth - 1
          }
          this.render()
        }
        next() {
          let m = this.curMonth + 1
          if (m > 12) {
            this.curMonth = 1
            this.year = this.year + 1
          } else {
            this.curMonth = this.curMonth + 1
          }
          this.render()
        }
      }

      let demo = new Calendar(new Date())
      let pre = document.querySelector('.pre')
      let next = document.querySelector('.next')
      pre.onclick = function (e) {
        demo.pre()
      }
      next.onclick = function (e) {
        demo.next()
      }

    </script>

</body>

</html>
小兔快跑zZ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
日历Demo
weixin_42857002的博客
09-25 258
public static void main(String[] args) { LocalDate localDate = LocalDate.now(); // localDate 2018-09-25 int monthValue = localDate.getMonthValue(); // 得到月份 9 int dayOfMonth...
在iOS上实现一个简单的日历控件
michaelKiven的博客
12-16 662
近期需要写一个交互有点DT的日历控件，具体交互细节这里略过不表。 不过再怎么复杂的控件，也是由基础的零配件组装起来的，这里最基本的就是日历控件。 先上图： 从图中可以看出日历控件就是由一个个小方块组成的，每一行有7个小方块，分别表示一周的星期天到星期六。 给定一个月份，我们首先需要知道这个月有多少周。那么如何确定一个月有多少周呢？ 我是这么想的，在NSDa
CalendarDemo
05-19
日历DEMO。显示公历、农历、节日，标识节日颜色，自定义标识(点击进入详情页)...
（日历）CalendarDemo
Xi's LiuY
03-23 521
package jihe; //Calendar类示例 import java.util.Calendar;class DateDemo{ void set() { Calendar c=Calendar.getInstance(); c.set(2020, 1,1);//设置时间 c.add(Calendar.DAY_OF_MONTH, 2);//偏移
简单日历Demo
chen_feng_123的博客
11-28 484
最近在项目中需要用时间进行查询,所以写了一个简单的日历Demo(OC版),下面是效果图(直接截的图) Demo地址:点击打开链接
iOS 日历demo
05-07
iOS 日历demo
android最全日历demo
11-07
android最全日历demo 基于Eclipse的android工程源码demo
ios-日历Demo.zip
07-11
使用无限轮播封装了一个日历控件,可左右滑动和上下切换模式,可以根据项目需求修改事件显示样式. github地址: https://github.com/Yangxiiii/YXCalendar.git 喜欢的话请给个星星
iOS简单日历Demo
05-20
iOS简单日历Demo
android日历Demo
05-08
使用ViewPager + GridView实现日历布局 添加了滑动效果，日历可以通过滑动收起或展开 添加了农历日期和一部分节日 压缩包里有说明，介绍了一下如何修改一些界面上的字体、颜色等 具体效果请看： ...
日历calendar插件Demo
11-07
日历插件
日历小Demo
11-28
简单的日历demo,可以调节月份 年份;由于是用于时间查询的所以添加了最近时间的按钮。
日历控件calendarViewDemo
08-21
一个自定义的calendarView，可以用来基本学习，很简单，值得学习
简单的万年日历demo
01-12
适合自定义日历，含有农历信息等，大家可以下载的用用！
CalendarDemo日历功能演示
qq_36801457的博客
10-14 201
/当前的年月日时分秒，%tF是年月日，%tT是时分秒，%tA是星期几，%n是换行，c是用法，
用java实现日历demo。
m0_49013902的博客
11-10 160
第一次用java写日历的demo，算是第一次完成作业吧。话不多说，直接看代码： 输出结果： 这是最简单的，我会加油哒~
日历+刷新列表Demo，赞！
让技术为我所用
07-30 725
SmartCalendar Calendar with refresh list 简介 这是一个带下拉刷新列表的日历demo，看下面效果图。 本例子结合了SuperCalendar，SmartRefreshLayout实现。 项目 SmartCalendar 项目更改了SuperCalendar项目中的两个CoordinatorLayout.Behavior，并优化了部分...
使用vue书写一个简单的日历的demo
热门推荐
不忘初心，方得始终！
05-28 1万+
最近在项目中遇到了一个需求，在vue中创建一个组件，这个组件显示的是当前的日期，以及在当前的日需要处理的事项，处理的事项的信息会以后端的接口的形式返回。需求确认后，搭建了一下，在这里记录了一下，现在是简单的实现了这个需求，但是肯定的是后期需要进行修改。vue就不多说了，在vue中使用的是原生JS效果图（~~基本没有样式，很low）现在实现的都是最初级的版本，代码里面的容错，还有一些性能上的处理，并...
日历签到demo 实现记录
孙飞(Java)
12-02 6578
Android日历签到
Android 获取本地默认日历账号demo
最新发布
06-02
好的，这是获取本地默认日历账号的示例代码： ```java private String getCalendarAccount() { String accountName = null; AccountManager accountManager = AccountManager.get(this); Account[] accounts = accountManager.getAccounts(); for (Account account : accounts) { if (account.type.equalsIgnoreCase("com.google")) { accountName = account.name; break; } } return accountName; } ``` 这段代码会返回默认日历账号的名称。如果没有默认账号，那么返回 null。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值