整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

小熊进阶之用javascript实现日历的算法

近有用到日历可需要编辑文本的日历,为了绑定数据的方便,所以用js写了一套日历,其实思想也是很简单。

实现步骤如下:

1:首先取得处理月的总天数

JS不提供此参数,我们需要计算。考虑到闰年问题会影响二月份的天数,我们先编写一个判断闰年的自编函数:

function is_leap(year) {

return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));

}

2:接着定义一个包含十二个月在内的月份总天数的数组:

m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);

3:m_days这个数组里,二月份的天数已经加入闰年的信息:28+is_leap(ynow)。数组元素从0开始,正好对应于JS提供的Date函数提供的getMonth返回值,即0表示一月,1表示二月,2表示三月,依此类推。

这样,各月总数可以这样取得:m_days[x]。其中,x为0至11的自然数。

4:计算处理月第一天是星期几

可以使用Date函数的getDay取得,返回的值从0到6,0表示星期一,1表示星期二,2表示星期三,其余依此类推。代码如下(假设要处理的时间为2008年3月):

n1str=new Date(2008,3,1);

firstday=n1str.getDay();

有了月总天数和该月第一天是星期几这两个已知条件,就可以解决表格所需行数问题:(当前月天数+第一天是星期几的数值)除以七。表格函数需要整数,因此,我们使用Math.ceil来处理:

tr_str=Math.ceil((m_days[mnow] + firstday)/7);

表格中的tr标签实际上代表表格的行,因此变量tr_str是我们往下写表格的重要依据。

5:打印日历表格

可以使用两个for语句嵌套起来实现:外层for语句写行,内层for语句写单元格。

for(i=0;i<tr_str;i++) { //表格的行

for(k=0;k<7;k++) { //表格每行的单元格

idx=i*7+k; //单元格自然序列号

date_str=idx-firstday+1; //计算日期

(date_str<=0 || date_str>m_days[mnow]) ? date_str="&nbsp;" : date_str=idx-firstday+1; //过滤无效日期(小于等于零的、大于月总天数的)

$(".date-info .date").last().append("<td class='day'>" + date_str + "</td>");

}

}

单元格的自然序号是否代表有效日期非常关键,为此必须加入一个过滤机制:仅打印有效的日期。有效的日期大于0小于小于等于处理月的总天数。

6:上一个月与下一个月

if(mnow<=0){

mnow=11;

ynow=ynow-1;

}else{

mnow--;

}

if(mnow>=11){

mnow=0;

ynow=ynow+1;

}else{

mnow++;

}

获取上一个月时,到1月份需注意;获取下一个月时,到12月份时要注意。

渲染时,需要先移除旧的日历,再添加新的日历。

开源日记],分享10k+Star的优质开源项目

软件介绍

TOAST UI Calendar 是一个多功能的日历组件,它支持纯 JavaScript、React 和 Vue 组件。它不仅提供了基本的日历功能,还包含了许多高级特性,如拖拽调整日程、默认弹出窗口等,使得用户可以轻松管理自己的日程安排。

功能特点

  • 可定制性:支持自定义主题、视图以及事件显示方式,使用户能够根据需求调整日历外观和功能。
  • 多种视图:提供了月、周、天等多种视图模式,用户可以根据自己的喜好和使用场景选择合适的视图。
  • 事件管理:支持添加、编辑、删除事件,以及拖放事件到不同时间或日期。
  • 功能丰富:包括快速添加事件、批量编辑、重复事件设置等功能,方便用户快速处理日程安排。

使用步骤

  • 1.安装:可以通过 npm 或 yarn 来安装 TOAST UI Calendar,例如使用 npm 安装的命令为 npm install tui-calendar
  • 2.引入:在项目中引入 TOAST UI Calendar 的 CSS 和 JavaScript 文件。
  • 3.初始化:创建一个 HTML 容器,并使用 JavaScript 初始化日历实例。
  • 4.配置:根据需要配置日历的各种选项,如视图类型、开始日期等。
  • 5.事件处理:添加事件监听器来处理用户与日历的交互,如点击、拖拽等。

使用场景

TOAST UI Calendar 适用于需要日程管理功能的各种 web 应用,包括但不限于:

  • 个人日程管理:帮助用户管理自己的日常活动和提醒。
  • 团队协作工具:在团队项目中共享和协调日程,提高团队效率。
  • 在线预订系统:用于预订资源或服务的在线平台。
  • 教育和培训机构:用于安排课程和活动的时间表。
  • 商务和会议安排:用于企业内部或与客户之间的会议安排。
开源地址:https://github.com/nhn/tui.calendar

[开源日记],分享10k+Star的优质开源项目

创作不易分享,,在看,三连支持一波,感谢。↓↓↓


unar



Lunar 是一个支持阳历、阴历、佛历以及道历的日历工具库,开源且免费, 有多种开发语言的版本,并且不依赖第三方,支持了阳历、阴历、佛历、道历、儒略日的相互转换。

另外还支持星座、干支、生肖、节气、节日、彭祖百忌、吉神宜趋、凶煞宜忌、冲煞、纳音、星宿、八字、五行、十神、建除十二值星、青龙名堂等十二神、黄道日及吉凶等。

快速使用



HTML页面 lunar兼容UMD (Universal Module Definition),同时在IE7上也能正常工作,在页面中直接引入 lunar.js 文件即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyTitle</title>
</head>
<body>
<!-- 使用CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lunar-javascript/1.6.4/lunar.min.js"></script>
<script>
console.log(Lunar.fromDate(new Date()).toFullString());
console.log(Solar.fromYmd(2016, 1, 1).toFullString());

console.log(HolidayUtil.getHoliday(2020, 5, 2) + '');
</script>
</body>
</html>

Java

// https://search.maven.org/artifact/cn.6tail/lunar

// maven
<dependency>
<groupId>cn.6tail</groupId>
<artifactId>lunar</artifactId>
<version>1.3.6</version>
</dependency>

// gradle
implementation 'cn.6tail:lunar:1.3.6'

import com.nlf.calendar.Lunar;
import com.nlf.calendar.Solar;
import com.nlf.calendar.util.HolidayUtil;

System.out.println(Lunar.fromDate(new Date()).toFullString());
System.out.println(Solar.fromYmd(2016, 1, 1).toFullString());
System.out.println(HolidayUtil.getHoliday(2020, 5, 2));

c#.net

// https://www.nuget.org/packages/lunar-csharp

using Lunar;
using Lunar.Util;

Console.WriteLine(Lunar.Lunar.FromDate(DateTime.Now).FullString);
Console.WriteLine(Solar.FromYmd(2016, 1, 1).FullString);
Console.WriteLine(HolidayUtil.GetHoliday(2020, 5, 2));
示例截图



仿百度搜索月历

月历

周历

老黄历


项目地址



https://6tail.cn/calendar