The best way to learn how to use the WebCore is by example. See the documentation for more information.
The requested URL is always shown first; if a page uses one or more WebCore templates, those are shown afterwards.
00 <?php
01 include_once ('software/init.php');
02
03 $Page->title->subject = 'Javascript Calendar';
04
05 $Page->location->append ('Software', '../');
06 $Page->location->append ('Webcore', '../webcore/');
07 $Page->location->append ($Page->title->subject);
08
09 $Page->add_style_sheet ('styles/webcore.css');
10 $Page->start_display ();
11
12 $path = $Page->resolve_path ('{data}software/js_calendar/downloads');
13 ?>
14 <div class="main-box">
15 <div class="columns text-flow">
16 <div>
17 <p>The earthli JavaScript Calendar is a component for getting and setting dates in an
18 easy-to-use, user-friendly way. It's</p>
19 <ul>
20 <li>Purely client-side; uses only JavaScript/CSS/HTML.</li>
21 <li>Fully object-oriented; adapt without rewriting.</li>
22 <li>Fully CSS-driven; customize without recoding.</li>
23 <li>Browser-agnostic; works in IE/Gecko/Opera, tested on Mac/Windows.</li>
24 <li>Fully controllable via properties; integrate into your website in minutes!</li>
25 </ul>
26 <p>
27 earthli JavaScript components are designed from the ground up to be easily integrated
28 into any website: no font tags and colors buried in the code; no obfuscation so you
29 can't figure out what it's doing. Just clean, documented, object-oriented code that
30 lets you set up and customize in just a few easy steps.</p>
31 <h2>How do I use it?</h2>
32 <p>Check out the <a href="demo/"><?php echo $Page->get_icon_with_text('{icons}buttons/ship', Sixteen_px, 'demo'); ?></a>
33 to see it in action. 'View source' in your browser and find comments and helpful hints.
34 There are basically two components:</p>
35 <h3>DATE_TIME_FIELD</h3>
36 <p>Create one of these in the form and attach it to a text input field. It has a
37 method called 'show_calendar' which pops up a calendar in a separate window. Select
38 a new date and/or time and it will automatically be entered in the input field.</p>
39 <h3>HTML_CALENDAR</h3>
40 <p>Create one of these in your popup window file and call 'display' to draw an HTML
41 table-based calendar.</p>
42 <h2>How do I integrate it?</h2>
43 <p>The following customizations apply to the DATE_TIME_FIELD component.</p>
44 <h3>Adjust properties</h3>
45 <p>This is a relatively simple component that uses functions defined in <code>time.js</code>
46 to perform date/time conversions and opens the calendar window. There are a few properties
47 to adjust its behavior. See <a href="#setting_properties">setting properties</a> for more
48 information.</p>
49 <dl>
50 <dt><code>output_format</code></dt>
51 <dd>This is probably the most important one; it controls whether the field displays the date
52 in <code>Date_format_us</code> (mm/dd/YYYY), <code>Date_format_euro</code> (dd.mm.YYYY)
53 or <code>Date_format_iso</code> (YYYY-mm-dd). <code>Date_format_euro</code> is the default.</dd>
54 <dt><code>width/height</code></dt>
55 <dd>Controls the width and height of the popup window. Defaults to 200/200.</dd>
56 <dt><code>page_name</code></dt>
57 <dd>Specify the name of the page containing the calendar. Defaults to <code>date_picker.html</code>.</dd>
58 <dt><code>show_month_selector</code></dt>
59 <dd>The calendar shows a drop-down menu for months, making navigation within a year
60 easier. The calendar looks a bit nicer without it, but isn't as easy to use if you
61 need to scan months. Defaults to <code>True</code></dd>
62 <dt><code>show_time</code></dt>
63 <dd>Controls whether the time is shown in the text field and whether a time selector
64 is shown in the calendar. Defaults to <code>True</code>.</dd>
65 <dt><code>century_break</code></dt>
66 <dd>All two-digit years after this value are considered part of the 20st century. This is
67 only used when translating from a manually-entered user date. The components will always
68 translate to a 4-digit year. Defaults to 30.</dd>
69 </dl>
70 <p>The following customizations apply to the CALENDAR component.</p>
71 <h3>Customize the style sheet</h3>
72 <p>Take a look at the <code>calendar.css</code> style sheet. The 'calendar' styles
73 are used as shown in the diagram below. All of these can be adjusted to match your
74 site's style without touching any code.</p>
75 <div class="cell-non-empty">
76 calendar
77 <div class="cell-non-empty">
78 calendar-banner
79 <div class="cell-non-empty">
80 calendar-title
81 <div class="cell-non-empty">
82 (month selector)
83 </div>
84 </div>
85 </div>
86 <div class="cell-non-empty">
87 calendar-body
88 <div class="cell-non-empty">
89 calendar-today<br>
90 (Selected date)
91 </div>
92 <div class="cell-non-empty">
93 calendar-weekend-day<br>
94 (Saturday or Sunday)
95 </div>
96 <div class="cell-non-empty">
97 calendar-month-day<br>
98 (day in the selected month)
99 </div>
100 <div class="cell-non-empty">
101 calendar-other-day<br>
102 (day not in the selected month)
103 </div>
104 </div>
105 <div class="cell-non-empty">
106 calendar-footer
107 <div class="cell-non-empty">
108 (time selector)
109 </div>
110 </div>
111 </div>
112 <p class="notes">The <code>error</code> style is used to draw an error message if
113 the components are improperly configured.</p>
114 <h3>Customize the pictures</h3>
115 <p>You'll need to set some JavaScript properties to change the pictures used for
116 the month and year buttons. You can set these properties globally, so that all
117 instances are affected or set the properties directly on an instance of the
118 calendar. See <a href="#setting_properties">setting properties</a> for more
119 information.</p>
120 <ul>
121 <li>You can point to the location of your images by adjusting the <code>image_path</code>
122 property. This is done in the demo to point to the 'images' subfolder.</li>
123 <li>You can also change the image names by setting <code>previous_month_image</code>,
124 <code>next_month_image</code>, <code>previous_year_image</code> and
125 <code>next_year_image</code> directly.</li>
126 </ul>
127 <h3>Customize functionality</h3>
128 <p>You can adjust a few other things on a calendar (there are other properties which
129 you control from the DATE_TIME_FIELD component, shown below).</p>
130 <dl>
131 <dt><code>first_day_of_week</code></dt>
132 <dd>Controls the first day displayed in the calendar. It defaults to '1', which
133 shows Monday first. Set it to '0' to show a US-style calendar.</dd>
134 <dt><code>show_year_selector</code></dt>
135 <dd>Controls whether the year-scrolling buttons are shown or not. Defaults to 'true'.</dd>
136 <dt><code>close_on_select</code></dt>
137 <dd>Controls whether the calendar popup window is closed when a date is selected. If
138 this is off, the date is updated in the specified field, but the user must close
139 the window manually. Defaults to 'true'.</dd>
140 </dl>
141 <h3>Redefine the layout</h3>
142 <p>For deeper customization, you can inherit from the CALENDAR or HTML_CALENDAR class
143 and define your own <code>display</code> routine. The CALENDAR contains all of the code
144 which communicates with the DATE_TIME_FIELD component, like <code>change_date</code> and
145 <code>select_date</code>, etc. The <code>register</code> function, which attaches to
146 a DATE_TIME_FIELD, and helper functions for working with dates are also defined here.</p>
147 <p>HTML_CALENDAR also exposes an API, with the table-based layout being the only
148 really fixed aspect of the renderer. Methods like <code>icon_as_html</code> and
149 <code>expand_image_file_name</code> can be redefined. (see WEBCORE_HTML_CALENDAR, also
150 defined in <code>calendar.js</code>, for an example of such a customization; this class
151 integrates a calendar into the <a href="/software/webcore">earthli WebCore</a>.)</p>
152 <h3><a id="setting_properties"></a>Setting properties</h3>
153 <p>All of the properties for DATE_TIME_FIELD or HTML_CALENDAR are set to defaults in the
154 constructor. The constructor initializes all properties to global variables with (almost)
155 the same name, so you can set a value for all objects by setting the global or change a
156 property on a single instance.</p>
157 <p>For example, set <code>Calendar_first_day_of_week</code> before creating any calendars
158 and all instances initialize to that value in their constructors. Set
159 <code>cal.first_day_of_week</code> and you've changed the property for just that object.
160 The same holds true for all of the properties described above.</p>
161 </div>
162 <div class="right-sidebar">
163 <h2>Demo</h2>
164 <?php $Page->start_icon_container('{icons}buttons/ship', Sixteen_px); ?>
165 <p>See the <a href="demo/">demo</a>!</p>
166 <?php $Page->finish_icon_container(); ?>
167 <h2>Download</h2>
168 <?php $Page->start_icon_container('{icons}buttons/download_to_hd', Sixteen_px); ?>
169 <p>
170 <a href="<?php echo $path; ?>earthli_js_calendar_demo.zip">Download</a> it now!
171 </p>
172 <?php $Page->finish_icon_container(); ?>
173 <h2>Source files</h2>
174 <ul class="minimal">
175 <li>
176 <?php echo $Page->get_icon_with_text('{icons}file_types/text_file', Sixteen_px, '<a href="demo/scripts/core.js">core.js</a>'); ?>
177 </li>
178 <li>
179 <?php echo $Page->get_icon_with_text('{icons}file_types/text_file', Sixteen_px, '<a href="demo/scripts/time.js">time.js</a>'); ?>
180 </li>
181 <li>
182 <?php echo $Page->get_icon_with_text('{icons}file_types/text_file', Sixteen_px, '<a href="demo/scripts/calendar.js">calendar.js</a>'); ?>
183 </li>
184 <li>
185 <?php echo $Page->get_icon_with_text('{icons}file_types/text_file', Sixteen_px, '<a href="demo/styles/calendar.css">calendar.css</a>'); ?>
186 </li>
187 </ul>
188 <h2>WebCore</h2>
189 <?php $Page->start_icon_container('{site_icons}products/webcore', Sixteen_px); ?>
190 <p>
191 Part of the <a href="../webcore">earthli WebCore</a>
192 </p>
193 <?php $Page->finish_icon_container(); ?>
194 </div>
195 </div>
196 </div>
197 <?php $Page->finish_display (); ?>
198