JSCalendar日历控件下载与使用_calendar.jsp资源-CSDN文库

共89个文件

js：47个

css：13个

gif：12个

4星 · 超过85%的资源需积分: 9 161 浏览量 2008-02-25 09:57:56 上传评论收藏 390KB ZIP 举报

**JSCalendar日历控件**是一款用于网页的JavaScript组件，它允许用户在网页上方便地选择日期。这款控件通常被开发者用于表单输入，尤其是需要用户输入日期的场景，比如预订系统、事件安排或者数据录入等。JSCalendar以简洁的界面和易于集成的特点受到欢迎。 ### 1. JSCalendar的安装与引入你需要下载`jscalendar-1.0`压缩包。这个文件包含了JSCalendar的所有必要资源，包括JavaScript文件、CSS样式表以及可能的图像资源。解压后，将所需的文件复制到你的项目目录中。通常，JavaScript文件（如`calendar.js`）会被放置在`js`目录下，CSS文件（如`calendar.css`）放在`css`目录，而图像文件（如`images`）则在相应的图片目录。 ### 2. HTML结构在HTML文件（例如`xgTest.html`）中，你需要创建一个元素来触发日历控件的显示。这可以是一个文本输入框，或者一个按钮。这里以文本输入框为例： ```html <input type="text" id="myCalendar" /> <button onclick="showCalendar('myCalendar')">选择日期</button> ``` ### 3. JavaScript集成接下来，我们需要在HTML文件中引入`calendar.js`，并编写JavaScript代码来设置和显示日历。在`<head>`或`<body>`底部添加以下代码： ```html <script src="js/calendar.js"></script> <script> function showCalendar(field_name) { Calendar.setup({ inputField : field_name, // 输入框ID ifFormat : "%Y-%m-%d", // 日期格式 button : "myCalendar", // 触发日历的按钮ID align : "Bl", // 对齐方式，B代表底部，l代表左对齐 weekNumbers : true, // 是否显示星期数 singleClick : true // 单击是否可选日期 }); } </script> ``` ### 4. 自定义配置 JSCalendar提供了丰富的配置选项，你可以根据需求调整控件的外观和行为。例如，`ifFormat`决定了日期的显示格式，`align`控制日历弹出位置，`weekNumbers`可开启或关闭星期数显示，`singleClick`则决定用户是双击还是单击选择日期。 ### 5. 交互与响应式设计为了适应不同屏幕大小和设备，可能需要对JSCalendar进行一些调整，确保在手机和平板等移动设备上也能正常工作。这可能涉及到CSS媒体查询和JavaScript的适配代码。 ### 6. 与服务器端交互在实际应用中，用户选定的日期通常需要发送到服务器进行处理。你可以通过JavaScript的`addEventListener`或者`onchange`事件监听用户的日期选择，然后通过AJAX将日期值提交到服务器。 ### 7. 示例代码分析 `xgTest.html`文件很可能是包含上述所有元素的一个示例页面，展示了JSCalendar如何在实际项目中使用。通过查看和学习这个文件，可以更好地理解JSCalendar的配置和用法。总结，JSCalendar是一个实用的JavaScript日历插件，通过简单的设置和调用即可为网页增添日期选择功能。了解其工作原理和配置选项，能帮助开发者快速集成到自己的项目中，提升用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

jscalendar-1.0.zip （89个子文件）

xgTest.html 938B

jscalendar-1.0

dayinfo.html 3KB

simple-2.html 4KB

skins

aqua

active-bg.gif 89B

normal-bg.gif 110B

today-bg.gif 1KB

title-bg.gif 116B

theme.css 5KB

hover-bg.gif 89B

dark-bg.gif 85B

menuarrow.gif 49B

status-bg.gif 116B

rowhover-bg.gif 110B

calendar.php 4KB

calendar-setup_stripped.js 5KB

calendar.js 48KB

img.gif 223B

calendar-tas.css 5KB

calendar-win2k-cold-2.css 6KB

calendar-green.css 5KB

test-position.html 1KB

calendar-blue.css 5KB

calendar-setup.js 9KB

calendar-win2k-2.css 6KB

ChangeLog 25KB

bugtest-hidden-selects.html 4KB

multiple-dates.html 3KB

simple-3.html 4KB

calendar-win2k-1.css 6KB

calendar-brown.css 5KB

simple-1.html 9KB

release-notes.html 18KB

calendar-win2k-cold-1.css 6KB

calendar-system.css 6KB

calendar-blue2.css 5KB

menuarrow2.gif 49B

test.php 3KB

calendar_stripped.js 34KB

README 910B

doc

html

field-button.jpg 2KB

reference-Z-S.css 4KB

reference.html 76KB

reference.css 2KB

reference.pdf 275KB

index.html 12KB

menuarrow.gif 68B

lang

calendar-he-utf8.js 4KB

calendar-nl.js 2KB

calendar-hr.js 3KB

calendar-ko.js 3KB

calendar-du.js 1KB

calendar-pt.js 3KB

calendar-pl-utf8.js 3KB

calendar-hr-utf8.js 2KB

calendar-da.js 3KB

calendar-it.js 4KB

calendar-lt-utf8.js 3KB

calendar-lt.js 3KB

calendar-fr.js 4KB

calendar-cs-win.js 3KB

calendar-sk.js 3KB

calendar-br.js 4KB

calendar-si.js 3KB

calendar-ro.js 2KB

calendar-sv.js 3KB

calendar-de.js 4KB

calendar-zh.js 3KB

calendar-ru.js 4KB

cn_utf8.js 5KB

calendar-en.js 4KB

calendar-cs-utf8.js 3KB

calendar-bg.js 4KB

calendar-el.js 3KB

calendar-lv.js 4KB

calendar-no.js 3KB

calendar-al.js 2KB

calendar-ru_win_.js 4KB

calendar-big5.js 3KB

calendar-es.js 4KB

calendar-pl.js 2KB

calendar-ko-utf8.js 3KB

calendar-jp.js 913B

calendar-big5-utf8.js 3KB

calendar-af.js 1011B

calendar-fi.js 3KB

calendar-ca.js 4KB

calendar-tr.js 2KB

calendar-hu.js 4KB

calendar-sp.js 3KB

DHTML Calendar Widget

Mihai Bazon, <mihai bazon@yahoo.com>

 Dynarch.com 2002–2005, www.dynarch.com

March 7, 2005

calendar version: 1.0 “It is happening again”

$Id: reference.tex,v 1.23 2005/03/05 11:37:14 mishoo Exp $

Contents

1 Overview 2

1.1 How does this thing work? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.2 Project ﬁles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

1.3 License . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Quick startup 3

2.1 Installing a popup calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2.2 Installing a ﬂat calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2.3 Calendar.setup in detail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3 Recipes 6

3.1 Popup calendars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3.1.1 Simple text ﬁeld with calendar attached to a button . . . . . . . . . . 6

3.1.2 Simple ﬁeld with calendar attached to an image . . . . . . . . . . . . . 7

3.1.3 Hidden ﬁeld, plain text triggers . . . . . . . . . . . . . . . . . . . . . . 7

3.1.4 2 Linked ﬁelds, no trigger buttons . . . . . . . . . . . . . . . . . . . . 8

3.2 Flat calendars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.3 Highlight spe cial dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3.4 Select multiple dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

4 The Calendar object overview 11

4.1 Creating a calendar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4.2 Order does matter ;-) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.3 Caching the objec t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4.4 Callback functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

5 The Calendar object API reference 14

5.1 Calendar constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

5.2 Useful member variables (properties) . . . . . . . . . . . . . . . . . . . . . . . 15

5.3 Public me thods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5.3.1 Calendar.create . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5.3.2 Calendar.callHandler . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.3 Calendar.callCloseHandler . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.4 Calendar.hide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.5 Calendar.setDateFormat . . . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.6 Calendar.setTtDateFormat . . . . . . . . . . . . . . . . . . . . . . . 16

5.3.7 Calendar.setDisabledHandler . . . . . . . . . . . . . . . . . . . . . 17

5.3.8 Calendar.setDateStatusHandler . . . . . . . . . . . . . . . . . . . . 17

5.3.9 Calendar.show . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

5.3.10 Calendar.showAt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

5.3.11 Calendar.showAtElement . . . . . . . . . . . . . . . . . . . . . . . . . 18

Dynarch.com LLC, www.dynarch.com

This material is copyright

 Dynarch.com, 2005

5.3.12 Calendar.setDate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

5.3.13 Calendar.setFirstDayOfWeek . . . . . . . . . . . . . . . . . . . . . . 19

5.3.14 Calendar.parseDate . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

5.3.15 Calendar.setRange . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

6 Side eﬀects 20

7 Credits 20

1 Overview

The DHTML Calendar widget

is an (HTML) user interface element that gives end-users

a friendly way to select date and time . It works in a web browser. The ﬁrst versions only

provided support for popup calendars, while starting with version 0.9 it also supports “ﬂat”

display. A “ﬂat” cale ndar is a calendar that stays visible in the page all the time. In this

mode it could be very useful for “blog” pages and other pages that require the calendar to

be always present.

The calendar is compatible with most popular browsers nowadays. While it’s created

using web standards and it should generally work with any compliant browser, the following

browsers were found to work: Mozilla/Firefox (the development platform), Netscape 6.0

or better, all other Gecko-based browsers, Internet Explorer 5.0 or better for Windows

Opera 7

, Konqueror 3.1.2 and Apple Safari for MacOSX.

You can ﬁnd the latest info and ve rsion at the calendar homepage:

www.dynarch.com/projects/calendar

1.1 How does this thing work?

DHTML is not “another kind of HTML”. It’s merely a naming convention. DHTML refers to

the combination of HTML, CSS, JavaScript and DOM. DOM (Document Object Model) is

a set of interfaces that glues the other three together. In other words, DOM allows dynamic

modiﬁcation of an HTML page through a program. JavaScript is our programming language,

since that’s what browsers like. CSS is a way to make it look good ;-). So all this soup is

generically known as DHTML.

Using DOM calls, the program dynamically creates a <table> element that contains a

calendar for the given date and then inserts it in the document body. Then it shows this

table at a speciﬁed position. Usually the position is related to some eleme nt in which the

date needs to be displayed/entered, such as an input ﬁeld.

By assigning a certain CSS class to the table we can control the look of the calendar

through an external CSS ﬁle; therefore, in order to change the colors, backgrounds, rollover

eﬀects and other stuﬀ, you can only change a C SS ﬁle—modiﬁcation of the program itself is

not necessary.

1.2 Project ﬁles

Here’s a description of the project ﬁles, excluding documentation and example ﬁles.

• the main program ﬁle (calendar.js). This deﬁnes all the logic behind the calendar

widget.

• the CSS ﬁles (calendar-*.css). Loading one of them is necessary in order to see the

calendar as intended.

by the term “widget” I understand a single element of user interface. But that’s in Linux world. For

those that did lots of Windows programming the term “control” might be more familiar

people report that the calendar does not work with IE5/Mac. However, this browser was discontinued

and we believe that supporting it doesn’t worth the eﬀorts, given the fact that it has the worst, buggiest

implementation for DOM I’ve ever seen.

under Opera 7 the calendar still lacks some functionality, such as keyboard navigation; al so Opera

doesn’t seem to allow disabling text selection when one drags the mouse on the page; despite all that, the

calendar is still highly functional under Opera 7 and looks as go od as in other supported browsers.

2 / 20

Dynarch.com LLC, www.dynarch.com

This material is copyright

 Dynarch.com, 2005

• the language deﬁnition ﬁles (lang/calendar-*.js). They are plain JavaScript ﬁles

that contain all texts that are displaye d by the calendar. Loading one of them is

necessary.

• helper functions for quick setup of the calendar (calendar-setup.js). You can do

ﬁne without it, but starting with version 0.9.3 this is the rec omme nded way to setup a

calendar.

1.3 License

 Dynarch.com 2002–2005, www.dynarch.com

Author: Mihai Bazon

The calendar is released under the GNU Lesser General Public License.

2 Quick startup

Installing the calendar used to be quite a task until version 0.9.3. Starting with 0.9.3 I have

included the ﬁle calendar-setup.js whose goal is to assist you to setup a popup or ﬂat

calendar in minutes. You are encouraged to modify this ﬁle and not cale ndar.js if you need

extra customization, but you’re on your own.

First you have to include the needed scripts and style-sheet. Make sure you do this in

your do cument’s <head> section, also make sure you put the correct paths to the scripts.

2.1 Installing a popup calendar

Now suppose you have the following HTML:

</form>

You want the button to popup a calendar widget when clicked? Just insert the following

code immediately after the HTML form:

Calendar.setup(

{

inputField : "data", // ID of the input field

ifFormat : "%m %d, %Y", // the date format

button : "trigger" // ID of the button

}

);

</script>

The Calendar.setup function, deﬁned in calendar-setup.js takes care of “patching”

the button to display a calendar when clicked. The calendar is by default in single-click

mode and linked with the given input ﬁeld, so that when the end-user selects a date it will

update the input ﬁeld with the date in the given format and close the calendar. If you are

a long-term user of the calendar you probably remember that for doing this you needed to

write a couple functions and add an “onclick” handler for the button by hand.

By looking at the example above we can see that the function Calendar.setup receives

only one parameter: a JavaScript object. Further, that object can have lots of properties

that tell to the setup function how would we like to have the calendar. For instance, if we

would like a calendar that closes at double-click instead of single-click we would also include

the following: singleClick:false.

For a list of all supported parameters please see the section

2.3.

1.3 License 3 / 20

Dynarch.com LLC, www.dynarch.com

This material is copyright

 Dynarch.com, 2005

2.2 Installing a ﬂat calendar

Here’s how to conﬁgure a ﬂat calendar, using the same Calendar.setup function. First,

you should have an e mpty element with an ID. This element will act as a container for the

calendar. It can be any block-level element, such as DIV, TABLE, etc. We will use a DIV

in this example.

Then there is the JavaScript code that sets up the calendar into the “calendar-container”

DIV. The code can occur anywhere in HTML after the DIV element.

function dateChanged(calendar) {

// Beware that this function is called even if the end-user only

// changed the month/year. In order to determine if a date was

// clicked you can use the dateClicked property of the calendar:

if (calendar.dateClicked) {

// OK, a date was clicked, redirect to /yyyy/mm/dd/index.php

var y = calendar.date.getFullYear();

var m = calendar.date.getMonth(); // integer, 0..11

var d = calendar.date.getDate(); // integer, 1..31

// redirect...

window.location = "/" + y + "/" + m + "/" + d + "/index.php";

}

};

Calendar.setup(

{

flat : "calendar-container", // ID of the parent element

flatCallback : dateChanged // our callback function

}

);

</script>

2.3 Calendar.setup in detail

Following there is the complete list of properties interpreted by Calendar.setup. All of them

have default values, so you can pass only those which you would like to customize. Anyway,

you must pass at least one of inputField, displayArea or button, for a popup calendar,

or flat for a ﬂat calendar. Otherwise you will get a warning mess age saying that there’s

nothing to setup.

property type description default

inputField string The ID of your input ﬁeld. null

displayArea string This is the ID of a <span>, <div>, or any other

element that you would like to use to display the

current date. This is ge nerally useful only if the

input ﬁeld is hidden, as an area to display the

date.

null

button string The ID of the calendar “trigger”. This is an ele-

ment (ordinarily a button or an image) that will

dispatch a certain event (usually “click”) to the

function that creates and displays the calendar.

null

eventName string The name of the event that will trigger the cal-

endar. The name should be without the “on”

preﬁx, such as “click” instead of “onclick”. Vir-

tually all users will want to let this have the de-

fault value (“click”). Anyway, it could be useful

if, say, you want the calendar to appear when the

input ﬁeld is focused and have no trigger button

(in this case use “focus” as the event name).

“click”

4 / 20 2.2 Installing a ﬂat calendar

Dynarch.com LLC, www.dynarch.com

This material is copyright

 Dynarch.com, 2005

property type description default

ifFormat string The format string that will be used to enter the

date in the input ﬁeld. This format w ill be hon-

ored even if the input ﬁeld is hidden.

“%Y/%m/%d”

daFormat string Format of the date displayed in the displayArea

(if speciﬁed).

“%Y/%m/%d”

singleClick boolean Wether the calendar is in “single-click mode” or

“double-click mode”. If true (the default) the

calendar will b e created in single-click mode.

true

disableFunc function A function that receives a JS Date object. It

should return true if that date has to be dis-

abled, false otherwise. DEPRECATED (see

below).

null

dateStatusFunc function A function that receives a JS Date object and

returns a boolean or a string. This function al-

lows one to set a certain CSS class to some date,

therefore making it look diﬀerent. If it returns

true then the date will be disabled. If it returns

false nothing special happens with the given

date. If it returns a string then that will be

taken as a CSS class and appended to the date

element. If this string is “disabled” then the

date is also disabled (therefore is like returning

true). For more information please also refer to

section 5.3.8.

null

firstDay integer Speciﬁes which day is to be displayed as the ﬁrst

day of week. Possible values are 0 to 6; 0 means

Sunday, 1 means Monday, ..., 6 means Satur-

day. The end user can easily change this too, by

clicking on the day name in the calendar header.

weekNumbers boolean If “true” then the calendar will display week

numbers.

true

align string Alignment of the calendar, relative to the refer-

ence element. The reference element is dynami-

cally chosen like this: if a displayArea is speciﬁed

then it will be the reference element. Otherwise,

the input ﬁeld is the reference element. For the

meaning of the alignment characters please sec-

tion 5.3.11.

“Bl”

range array An array having exactly 2 elements, integers. (!)

The ﬁrst [0] element is the minimum year that

is available, and the second [1] element is the

maximum year that the calendar w ill allow.

[1900, 2999]

flat string If you want a ﬂat calendar, pass the ID of the

parent object in this property. If not, pass null

here (or nothing at all as null is the default

value).

null

flatCallback function You should provide this function if the calendar

is ﬂat. It will be called when the date in the

calendar is changed with a reference to the cal-

endar object. See section 2.2 for an example of

how to setup a ﬂat calendar.

null

onSelect function If you provide a function handler here then you

have to manage the “click-on-date” event by

yourself. Look in the calendar-setup.js and take

as an example the onSelect handler that you can

see there.

null

onClose function This handler will be called when the calen-

dar needs to close. You don’t need to provide

one, but if you do it’s your responsibility to

hide/destroy the calendar. You’re on your own.

Check the calendar-setup.js ﬁle for an example.

null

2.3 Calendar.setup in detail 5 / 20

评论收藏

内容反馈

hellonobody

2012-05-23

都是代码，挺全的，正在研究中。。。
O默默Oo

2014-02-11

用来学习不错~谢谢分享~

xuganger

粉丝: 7
资源: 26

JSCalendar 日历控件下载与使用

最新资源

JSCalendar 日历控件下载与使用

JSCalendar 日历控件

JS实现的日历控件

javascript Calendar控件下载

calendar日历控件

日历插件calendar.js

日历控件

js 日历控件 calendar

js 日历控件 calendar 漂亮日历控件

js日历控件-calendar.js

Calendar 日历控件 兼容IE9

html js脚本日历控件

calendar.js日历控件

js_calendar

日历控件--你值得下载

时间控件calendar.js

三款漂亮的js日历控件下载

jscalendar-日历控件；xtree-树型控件

6个JS日历控件个JS日历控件

Calendar(日历控件[完整版])

ext js calendar 日历

WebCalendar网页日历控件（js，javascript）

jscalendar

simplecalendar.js记录事件的日历插件

漂亮的jQuery事件日历插件calendar.js

jscalendar简中，非常好用，功能极多的时间控件

JS Calendar日期控件

js日历控件 js日历控件

Calendar（JS日历控件）

最新资源

Calendar 日历控件兼容IE9