这是一款经典的国外Web日历控件,非常好用.资源-CSDN文库

共88个文件

js：47个

css：13个

gif：12个

需积分: 50 54 浏览量 2008-11-07 09:47:50 上传评论收藏 389KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

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

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

评论收藏

内容反馈

ITZYF

粉丝: 25
资源: 1

这是一款经典的国外Web日历控件,非常好用.

基于HTML5的web版日历

Web Calendar ver 3.0 网页日历控件！

WebCalendar

090504-Vista风格日历控件C#源码.rar090504-Vista风格日历控件C#源码.rar090504-Vista风格日历控件C#源码.rar

日历控件.rar 日历控件.rar

WebCalendar日历控件

pb日历控件源代码.............................................

一款非常好用的日历控件

一款好用的日历控件

web开发非常经典的日历控件

一款非常好用的js日历控件

最牛日历控件.最牛日历控件.

日历控件 Click Calendar.7z

介绍一个ActiveX日历控件.ocx

日历控件dateWidget.js

JS写的日历控件..

js日历控件.txt js日历控件.txt

很好用的日历控件，日历、控件

基于Java的日历控件 Click Calendar.zip

基于java的日历控件 Click Calendar.zip

使用js实现日历控件

web日历控件

java源码：日历控件 Click Calendar.rar

微信小程序源码-合集6.rar

微信小程序源码-合集5.rar

微信小程序源码-合集4.rar

微信小程序源码-合集3.rar

微信小程序源码-合集2.rar

浏览器插件 Auto Refresh Plus 7.4.4 ctx

品优购项目 素材及代码

最新资源

品优购项目素材及代码