📄 setupagendas.htm
字号:
<html>
<head>
<title>Agenda and Holiday</title>
<link href="style-1.0/css/tigris.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {color: #FF0000}
.style3 {color: #FF0000; font-weight: bold; }
-->
</style>
</head>
<body>
<div class="app">
<h3>Setting up agenda events & holidays</h3>
<p>We've already known that the 3rd parameter in the name & id of the calendar
tag denotes a file named <code>agenda.js</code>. This parameter is <strong>optional</strong>.
The calendar can work without it, only that there will be no holidays or events
showing. Once this parameter is defined, you'll have to have a <code>agenda.js</code> file in place, which provides all agenda events
as well as the holidays for the calendar engine. If this file is missing and the parameter is defined, you will get errors and the calendar may not work properly. </p>
<p>Before we go further with the agenda, let's take another look at the calendar
tag, as following.</p>
<blockquote>
<div class="dottedBox"><code><iframe name="gToday:normal:agenda.js"
id="gToday:normal:agenda.js"
src="iflateng.htm" scrolling="no" frameborder="0"><br>
... <br>
</iframe><br>
...<br>
<LAYER name="gToday:normal:agenda.js"<code> src="nflateng.htm"</code><code> background="nflateng.htm"</code>>
</LAYER> </code></div>
</blockquote>
<p>One thing need to be pointed out earlier is that the file doesn't have to
be named as <code>agenda.js</code>. You may actually use any cgi program to
generate this file on-the-fly, e.g. ASP, JSP or PHP, so that you can take
advantage of it and retrieve whatever events from your backend server or database.
We'll discuss about it later in this tutorial.</p>
<p>Now let's go through the <code>agenda.js</code> file in the HelloWorld demo directory and explain parts of it in detail.</p>
<h4>What is an agenda event?</h4>
<p>An agenda event is just a special day that you want to render it differently in
the calendar, like appointments, meetings and/or other daily events. You may
give them specific font colors, background colors, text tooltips, or even
images and customized html code. All you need to do is to append a line in
the <code>agenda.js</code> for each daily event you got. e.g.</p>
<blockquote>
<div class="dottedBox"><code>fAddEvent(year, month, day, message, action, bgcolor, fgcolor, bgimg,
boxit, html, etc);</code>
</div>
</blockquote>
<p>The parameters are detailed as following:</p>
<ul>
<li> <strong>year,month,day</strong> indicates the date of the agenda.</li>
<li><strong>message</strong> is the text that will be shown as a tooltip,
as well as in the statusbar.</li>
<li><strong>action</strong> is the script to be executed when the agenda date
gets selected. Specifically, if you set the action to <code>null</code> or "null",
the agenda date will be visually disabled(line-crossed). Of course you may
in addition use other properties to create a customized disabled-looking.
If you set it to "", i.e. empty string, there will be no action
performed when the date is selected.</li>
<li><strong>bgcolor</strong> is the background color of the agenda date.</li>
<li><strong>fgcolor</strong> is the font color of the agenda date. Setting it to ""(empty string) will make the fonts invisible and the date unselectable. This actually gives you another way to disable a day. </li>
<li><strong>bgimg</strong> is the URL pointing to the image tiled in the cell
background of the agenda date.</li>
<li><strong>boxit</strong> if boxit is set other than <code>false</code> or <code>null</code> value, the date will be drawn in a box using boxit value as the color, or bgcolor if boxit is <code>true</code>.</li>
<li><strong>html</strong> is the HTML code to be injected into the cell of
the agenda date. It's very useful if you want to pack more stuff in a cell, e.g. more events in the same day. </li>
<li><strong>etc</strong> is an additional param that can be used to store any value, object or even array with the specific date. Note that you have to be cautious to use object or array here because of the object reference side-effect. </li>
</ul>
<p><span class="style3">Note:</span> if you want to use an anchor <a> link inside the <code>html</code> param, you should set the <code>target</code> property to either _top or _blank. Because the calendar is contained in an iframe, and if you omit the <code>target</code>, the link will be just targeted into the calendar panel.</p>
<blockquote>
<div class="dottedBox"><code><code>fAddEvent(2004,1,18," Hello World! ", "", "#87ceeb", "dodgerblue", null, "gold", <br>
"<a href='<code><code>http://www.calendarxp.net</code></code>' target='_top'>...</a>");</code></code></div>
</blockquote>
<p></p>
<p>Following please find some sample usages, and note the <code>popup()</code> is a pre-defined JavaScript utility function located in the <code>plugins.js</code>. </p>
<blockquote>
<div class="dottedBox"><code>fAddEvent(2004,1,18," Hello World! ", "<code>popup('/anypath/mypage.html', '_top')</code>", "#87ceeb", "dodgerblue", null, "gold");<br>
<br>
<code>fAddEvent(2004,1,19," Hello World! ", "", "#87ceeb", "dodgerblue", null, false, "<div align=left class='MsgBoard' onmousedown='popup(\"mailto:who@anyemail.address?subject=test\", \"_blank\")'>My Meeting</div>");<br>
</code><br>
<code><code><code>var anyURL="mailto:who@anyemail.address?subject=it's a sample for using quote";<br>
fAddEvent(2004,1,20," Hello World! ", "", "#87ceeb", "dodgerblue", null, false, "<div align=left class='MsgBoard' onmousedown='popup(anyURL, \"_blank\")'>My Meeting</div><code><code><code><code><div align=left class='MsgBoard' onmousedown='alert(\"Take a break\")'>Lunch Time</div></code></code></code></code>");</code></code></code></code></div>
</blockquote>
<p><strong><font color="#FF0000">Note:</font></strong> There is an important
option called <code>gAgendaMask</code> in the <code>theme-name.js</code>
file. It determines which parameter will be masked out - which one in use
which one not. So be sure to check it before adapting your agendas and holidays,
or just set all bit values to -1 to disable the mask.</p>
<p>Later, you read it out by calling the following and it will return any array in format <code>[message, action, bgcolor, fgcolor, bgimg, boxit, html, etc]</code> or <code>null</code> if nothing found :</p>
<blockquote>
<div class="dottedBox"><code> <font color="brown">fGetEvent(year, month, date);</font></code></div>
</blockquote>
<p>Or if you want to get rid of an event, you may simply call:</p>
<blockquote>
<div class="dottedBox"><code> <font color="brown">fRemoveEvent(year, month, date);</font></code></div>
</blockquote>
<h4>How can I have 2 or more events within the same day?</h4>
<p>The agenda event is set per day by <code>fAddEvent()</code> call, which means if you call it for the same day twice only the latter call will be used to set the effects. If you want to show more than one events in the same day, you need to code your own functions to merge them into one.</p>
<p>For example, you may simply add the following function to plugins.js and replace all <code>fAddEvent</code> calls with <code>fAppendEvent</code> in agenda.js.</p>
<blockquote>
<div class="dottedBox"><code> function fAppendEvent(y,m,d,message,action,bgcolor,fgcolor,bgimg,boxit,html,etc) {<br>
var ag=fGetEvent(y,m,d);<br>
if (ag==null) fAddEvent(y,m,d,message,action,bgcolor,fgcolor,bgimg,boxit,html,etc);<br>
else fAddEvent(y,m,d,message?ag[0]+"\n"+message:ag[0], <code>action</code>?<code>action</code>:ag[1],<code><br>
bgcolor</code>?<code>bgcolor</code>:ag[2],<code> fgcolor</code>?<code>fgcolor</code>:ag[3], <code>bgimg</code>?<code>bgimg</code>:ag[4], <code>boxit</code>?<code>boxit</code>:ag[5], ag[6]+html, etc?etc:ag[7]);<br>
}</code></div>
</blockquote>
<p>In the above sample, the message and html params will be appended, while the action, bgcolor, fgcolor, boxit and bgimg params will be substituted by the subsequently added sub-events. But this is just our choice and you may modify it to implement your own solution.</p>
<h4>What is a holiday?</h4>
<p>A holiday, a.k.a. recurring/batch event, is nothing but a special agenda
that will recur from time to time. Therefore, we made a function to define
them more efficiently, as following: (Note it's optional.) </p>
<blockquote>
<div class="dottedBox">
<p><code> function fHoliday(y,m,d) {<br>
var rE=fGetEvent(y,m,d), r=null;<br>
<br>
</code><code> if (m==1&&d==1)<br>
r=[" Jan 1, "+y+" \n Happy New
Year! ", "", "steelblue"];<br>
}<br>
<br>
return rE?rE:r; // if returns null, the engine will just render it
as a normal day.<br>
}</code></p>
</div>
</blockquote>
<p><strong>Once defined, the calendar engine will call it each time when rendering
a date cell. So if you have a lot of similar events or want to show the
same agenda across a period of time, i.e. weeks or months, using the <code>fHoliday()</code>
to return an agenda template is much viable than making tons of <code>fAddEvent()</code>
calls. </strong>The plugin in range picker demo is a good example in reality.</p>
<p>This function should return an array as agenda template in the following
format or a <code>null</code> value if nothing special.</p>
<p><code>[message, action, bgcolor, fgcolor, bgimg, boxit, html, etc]</code></p>
<p>In the above sample, we take the following logic -- first look up for the
event of date [y,m,d]. If we found one, simply return it to the engine because
we think the event created by the fAddEvent is more important.</p>
<p>Of course, we can easily make the code continue to check holidays and merge
the result of both together if we like. Or we may favor holidays over events
by checking the holiday first. Anyway, it's all up to you since this function
is totally under your control.</p>
<p>Here is a sample function that enables most of USA holidays, except Easter which we'll discuss later. Note that here we use a pre-defined function <code>fGetDateByDOW()</code>. This function returns the date number of the 1st, 2nd ... or last - Monday, Tuesday ... or Sunday of any month. Using it will make certain holiday calculation much easier. </p>
<blockquote>
<div class="dottedBox"><code>
<p>function fHoliday(y,m,d) {<br>
var rE=fGetEvent(y,m,d), r=null;<br>
</p>
<p> // you may have sophisticated holiday calculation set here, following are only simple examples.<br>
if (m==1&&d==1)<br>
r=[" Jan 1, "+y+" \n Happy New Year! ",gsAction;,"skyblue","red"];<br>
else if (m==12&&d==25)<br>
r=[" Dec 25, "+y+" \n Merry X'mas! ",gsAction,"skyblue","red"];<br>
else if (m==7&&d==1)<br>
r=[" Jul 1, "+y+" \n Canada Day ",gsAction,"skyblue","red"];<br>
else if (m==7&&d==4)<br>
r=[" Jul 4, "+y+" \n Independence Day ",gsAction,"skyblue","red"];<br>
else if (m==11&&d==11)<br>
r=[" Nov 11, "+y+" \n Veteran's Day ",gsAction,"skyblue","red"];<br>
else if (m==1&&d<25) {<br>
var date=fGetDateByDOW(y,1,3,1); // Martin Luther King, Jr. Day is the 3rd Monday of Jan<br>
if (d==date) r=[" Jan "+d+", "+y+" \n Martin Luther King, Jr. Day ",gsAction,"skyblue","red"];<br>
}<br>
else if (m==2&&d<20) {<br>
var date=fGetDateByDOW(y,2,3,1); // President's Day is the 3rd Monday of Feb<br>
if (d==date) r=[" Feb "+d+", "+y+" \n President's Day ",gsAction,"skyblue","red"];<br>
}<br>
else if (m==9&&d<15) {<br>
var date=fGetDateByDOW(y,9,1,1); // Labor Day is the 1st Monday of Sep<br>
if (d==date) r=[" Sep "+d+", "+y+" \n Labor Day ",gsAction,"skyblue","red"];<br>
}<br>
else if (m==10&&d<15) {<br>
var date=fGetDateByDOW(y,10,2,1); // Thanksgiving is the 2nd Monday of October<br>
if (d==date) r=[" Oct "+d+", "+y+" \n Thanksgiving Day (Canada) ",gsAction,"skyblue","red"];<br>
}<br>
else if (m==11&&d>15) {<br>
var date=fGetDateByDOW(y,11,4,4); // Thanksgiving is the 4th Thursday of November<br>
if (d==date) r=[" Nov "+d+", "+y+" \n Thanksgiving Day (U.S.) ",gsAction,"skyblue","red"];<br>
}<br>
else if (m==5&&d>20) {<br>
var date=fGetDateByDOW(y,5,5,1); // Memorial day is the last Monday of May<br>
if (d==date) r=[" May "+d+", "+y+" \n Memorial Day ",gsAction,"skyblue","red"];<br>
}</p>
<p> </p>
return rE?rE:r; // favor events over holidays <br>
<p>}</p>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -