生成日历

最新推荐文章于 2024-08-29 08:46:26 发布
转载 最新推荐文章于 2024-08-29 08:46:26 发布 · 950 阅读 · 0
文章标签：

#日历 #function #javascript #date #border #table

该博客提供了使用JavaScript实现日历功能的代码。详细说明了将代码分别加入<head>和<body>区域的步骤，包含日期获取、颜色切换、日期选择等多个函数，可实现日历的绘制、更新等功能，帮助开发者利用JavaScript创建日历。

来自:zltostem (尘寞)

脚本说明：
第一步:把如下代码加入<head>区域中:
  <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var dDate = new Date();
var dCurMonth = dDate.getMonth();
var dCurDayOfMonth = dDate.getDate();
var dCurYear = dDate.getFullYear();
var objPrevElement = new Object();

function fToggleColor(myElement) {
var toggleColor = "#ff0000";
if (myElement.id == "calDateText") {
if (myElement.color == toggleColor) {
myElement.color = "";
} else {
myElement.color = toggleColor;
   }
} else if (myElement.id == "calCell") {
for (var i in myElement.children) {
if (myElement.children[i].id == "calDateText") {
if (myElement.children[i].color == toggleColor) {
myElement.children[i].color = "";
} else {
myElement.children[i].color = toggleColor;
            }
         }
      }
   }
}
function fSetSelectedDay(myElement){
if (myElement.id == "calCell") {
if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {
myElement.bgColor = "#c0c0c0";
objPrevElement.bgColor = "";
document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);
objPrevElement = myElement;
      }
   }
}
function fGetDaysInMonth(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}
function fBuildCal(iYear, iMonth, iDayStyle) {
var aMonth = new Array();
aMonth[0] = new Array(7);
aMonth[1] = new Array(7);
aMonth[2] = new Array(7);
aMonth[3] = new Array(7);
aMonth[4] = new Array(7);
aMonth[5] = new Array(7);
aMonth[6] = new Array(7);
var dCalDate = new Date(iYear, iMonth-1, 1);
var iDayOfFirst = dCalDate.getDay();
var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);
var iVarDate = 1;
var i, d, w;
if (iDayStyle == 2) {
aMonth[0][0] = "Sunday";
aMonth[0][1] = "Monday";
aMonth[0][2] = "Tuesday";
aMonth[0][3] = "Wednesday";
aMonth[0][4] = "Thursday";
aMonth[0][5] = "Friday";
aMonth[0][6] = "Saturday";
} else if (iDayStyle == 1) {
aMonth[0][0] = "Sun";
aMonth[0][1] = "Mon";
aMonth[0][2] = "Tue";
aMonth[0][3] = "Wed";
aMonth[0][4] = "Thu";
aMonth[0][5] = "Fri";
aMonth[0][6] = "Sat";
} else {
aMonth[0][0] = "Su";
aMonth[0][1] = "Mo";
aMonth[0][2] = "Tu";
aMonth[0][3] = "We";
aMonth[0][4] = "Th";
aMonth[0][5] = "Fr";
aMonth[0][6] = "Sa";
}
for (d = iDayOfFirst; d < 7; d++) {
aMonth[1][d] = iVarDate;
iVarDate++;
}
for (w = 2; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (iVarDate <= iDaysInMonth) {
aMonth[w][d] = iVarDate;
iVarDate++;
      }
   }
}
return aMonth;
}
function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {
var myMonth;
myMonth = fBuildCal(iYear, iMonth, iDayStyle);
document.write("<table border='1'>")
document.write("<tr>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");
document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");
document.write("</tr>");
for (w = 1; w < 7; w++) {
document.write("<tr>")
for (d = 0; d < 7; d++) {
document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");
if (!isNaN(myMonth[w][d])) {
document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");
} else {
document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>&nbsp;</font>");
}
document.write("</td>")
}
document.write("</tr>");
}
document.write("</table>")
}
function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth);
objPrevElement.bgColor = "";
document.all.calSelectedDate.value = "";
for (w = 1; w < 7; w++) {
for (d = 0; d < 7; d++) {
if (!isNaN(myMonth[w][d])) {
calDateText[((7*w)+d)-7].innerText = myMonth[w][d];
} else {
calDateText[((7*w)+d)-7].innerText = " ";
         }
      }
   }
}
// End -->
</script>

第二步:把如下代码加入<body>区域中:
<script language="JavaScript" for=window event=onload>
<!-- Begin
var dCurDate = new Date();
frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;
for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)
if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())
frmCalendarSample.tbSelYear.options[i].selected = true;
//  End -->
</script>

<form name="frmCalendarSample" method="post" action="">
<input type="hidden" name="calSelectedDate" value="">

<table border="1">
<tr>
<td>
<select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
 
<select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
</select>
</td>
</tr>
<tr>
<td>
<script language="JavaScript">
var dCurDate = new Date();
fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);
</script>
</td>
</tr>
</table>
</form>

日历 生成器 （含周历）
01-30
excel版本的日历生成工具,方便快捷的办公设置
日历生成js
08-22
自己写的一个自动生成当前月历的js，大小自适应，显示当前日期，可以切换月份 。
【亲测免费】 探索日历之美：calendarize——轻量级日历生成工具
gitblog_00296的博客
08-29 669
探索日历之美：calendarize——轻量级日历生成工具 在数字时代，日历的呈现方式多种多样，但能掌握在开发者手中的灵活日历生成器却是难得一见。今天，我们要向大家推荐一个名为calendarize的小巧而强大的工具，它将为你的应用增添一抹独特的日历风采。 项目介绍 calendarize是一个极简主义的日历生成库，体积仅为202字节，却能高效地为你提供任意月份的日历视图。与其他日历生成工具不同，...
输入年份生成全年的日历.xls
08-06
该脚本可以根据输入的年份自动生成全年的日历，每个月一个sheet，可以根据日历设置重要日程，纯VBA实现。
日历生成程序
wangzhicheng2013的专栏
12-07 315
使用C语言代码生成某年某月日历
生成日历的操作
Surpass-oneself的博客
04-18 341
这个效果的难点是星期的操作，我们把它封装在一个数组里面，通过索引动态的田间到我们的结构中来。
精选资源
hive生成日历表.sql
09-18
hive生成日历表.sql
python生成日历实例解析
12-25
本文实例展示了Python生成日历的实现方法。该实例可实现一个月的日历生成5×7的列表，列表里的没个日期为datetime类型，采用python自带的 calendar 模块实现。 程序运行结果如下： python test.py 2014 09 2014-08-...
精选资源
python生成日历_chestou4_temperaturev5w_Python生成日历_
10-03
在Python编程语言中，生成日历是一项常见的任务，尤其对于数据分析、时间管理或者日程规划等应用场景。"Python生成日历_chestou4_temperaturev5w_Python生成日历_"这个标题表明，我们可能是在一个名为`chestou4_...
ASP生成日历
11-03
在本场景中，"ASP生成日历"是指利用ASP技术来构建一个交互式的日历组件，通常这个组件会表现为一个下拉菜单，用户可以选择日期，常用于表单中的日期输入。 ASP日历组件的主要功能包括： 1. **日期选择**：用户可以...
js制作简易年历完整实例
10-24
主要介绍了js制作简易年历的方法,包括实现的思路以及js、css与html各个部分的实现技巧,需要的朋友可以参考下
任意年份的日历
06-11
任意年份的日历
精选资源
zcalendar:用于生成日历视图的 jq 插件
06-19
本篇文章将深入探讨“zcalendar”这个基于jQuery的插件，它专门用于生成日历视图，帮助开发者轻松地在网页上实现日期选择和日程管理功能。 首先，我们来理解jQuery。jQuery是一个轻量级的JavaScript库，它简化了DOM...
怎么利用这个程序来生成日历
weixin_34174105的博客
02-01 154
 http://www.ma.utexas.edu/users/caffarel  主页上UT seminar calendar 有这个链接.  点击进去发现http://www.ma.utexas.edu/cgi-pub/seminar/calendar  点个日期就能看到已经发生或要发生的 seminar. More info on this program. 这里又给出了源码Click or...
日历生成
weixin_43803985的博客
01-09 188
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace ConsoleApp1 { class Program { static void Main(string[] ...
自动生成日历（python实现）
子邦的博客
09-08 646
import calendar #输入指定年月 y = int(input("输入年份：")) if y < 0: print("请输入一个整数") m = int(input("输入月份: ")) if m<=1 or m>=12: print("请输入1-12之间的数") #显示日历 print(calendar.month(y,m)) ...
Java_日历生成（Lab 4_Exercise 5）
NERanger的博客
10-27 681
题目： 解答： import java.util.Scanner; public class Exercise_5 { static int left_day=0; public static boolean year_judge(int year) { if(year%100==0) { if(year%400==0) return true; el
【HTML+CSS+JavaScript】日历生成器
weixin_30323631的博客
08-13 1116
需求：实现日历生成器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>同志交友</title> <style> input { widt...
python快速生成日历
最新发布
06-20
<think>我们被要求生成相关问题，并且参考给定的引用内容。用户的问题是关于使用Python快速生成日历的方法或代码示例。根据引用[1]，我们知道Python的calendar模块提供了丰富的日历处理功能，包括生成月历和年历等。引用[2]提到了使用pandas的date_range函数生成日期范围，但用户的问题明确是关于生成日历，而calendar模块更直接。引用[3]和[4]似乎没有直接相关的内容。因此，我们可以使用calendar模块来生成日历。下面我们将提供几种生成日历的常见方法：1.生成整个月的日历（以文本形式）2.生成全年的日历（以文本形式）3.生成HTML格式的日历（适用于Web应用）4.获取某个月的天数及星期分布（以列表形式）同时，我们将按照要求，在回答末尾生成相关问题。注意：所有代码示例使用Python的calendar模块。</think>### 如何使用Python生成日历 Python中生成日历主要使用内置的`calendar`模块，它提供了多种日历生成方式。以下是常用方法和代码示例： #### 1. 生成单月日历（文本格式） ```python import calendar # 生成2023年7月文本月历 cal_text = calendar.month(2023, 7) print(cal_text) ``` 输出： ``` July 2023 Mo Tu We Th Fr Sa Su 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ``` #### 2. 生成全年日历 ```python # 生成2023年全年日历 cal_year = calendar.calendar(2023) print(cal_year) # 打印完整年历 ``` #### 3. 获取月份矩阵（编程处理） ```python # 获取2023年8月的日期矩阵（0表示非当月日期） month_matrix = calendar.monthcalendar(2023, 8) print(month_matrix) ``` 示例输出： ``` [[0, 1, 2, 3, 4, 5, 6], [7, 8, 9, 10, 11, 12, 13], [14, 15, 16, 17, 18, 19, 20], [21, 22, 23, 24, 25, 26, 27], [28, 29, 30, 31, 0, 0, 0]] ``` #### 4. 生成HTML日历（Web应用） ```python # 生成HTML格式的2023年9月日历 cal_html = calendar.HTMLCalendar().formatmonth(2023, 9) print(cal_html) # 输出HTML表格代码 ``` #### 5. 日期范围生成（结合pandas） ```python import pandas as pd # 生成2023年10月所有工作日日期 work_days = pd.date_range('2023-10-01', '2023-10-31', freq='B') print(work_days) ``` ### 关键函数说明 - `month(year, month)`：返回指定月份的格式化文本日历 - `calendar(year)`：返回整年文本日历 - `monthcalendar(year, month)`：返回日期矩阵（二维列表） - `HTMLCalendar()`：生成HTML格式日历对象 - `isleap(year)`：判断闰年（如`calendar.isleap(2024)`返回`True`） 更多功能可参考[Python官方文档 - calendar模块][^1] --- ### 相关问题 1. 如何用Python判断某年是否为闰年？ 2. 怎样获取指定月份的工作日天数？ 3. 如何将生成的日历保存为HTML文件？ 4. Python能否生成农历日历？有哪些第三方库支持？ 5. 怎样在日历中高亮显示特定日期（如节假日）？ [^1]: Python 官方文档 - calendar 模块：https://docs.python.org/3/library/calendar.html [^2]: Python中用于date_range函数的参数freq的偏移别名
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值