(1) 年・月・月初めの曜日を指定。 曜日は、[標準カレンダー]で。 (2) 予定などを記述。 (3) ・フォントを指定 (4) [作成]ボタンを押す、作成・表示される。 (5) 保存は、【2004年 … 予定】 - [表示] - [ソース] - [ファイル] - [名前を付けて保存] - ファイル名 : xxxx.htm、ファイルの種類 : テキスト文書 - 保存する場所 : xxxx -[保存]、で。 更に編集した(例)  (6) MSOfficeへのペーストは、(4)で、コピー ・ペースト。  (7) 次の作成は、[リセット] - (1) ……、で。
 
年 指定、2005(例)

月指定
 
月初めの曜日を設定。
[    ] に、テキストを記述。 HTML・ 画像挿入可、改行は、<br>で。 (例): <a href="http://www2q.biglobe.ne.jp/~ooue_h-h/i/tide/tide_s.html" target="_blank" title="ここをクリックします!。"><img border="0" src="bullet3.gif" width="13" height="13" title="メッセージ">=(^。^)=と磯釣り</a>
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日  
ページ背景色:     #
タイトル文字色:     #
カレンダー背景色:  #
カレンダー文字色:  #

一次指定フォント:
Tahoma Comic Sans MS Trebuchet MS Verdana Arial MS PGothic
Arial Black Impact
Courier New Georgia Times New Roman

二次指定フォント:
Tahoma Comic Sans MS Trebuchet MS Verdana Arial MS PGothic
Arial Black Impact
Courier New Georgia Times New Roman

 

 

 

ホーム へ       サンプルページ  カレンダー14 calendar14.htm

予定(HTML、画像など可)を書き込んだ、カレンダー(HTML)を作成。      DHTML。     サイズ、配色などのカスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、(1)〜で。  ※:一次フォント、、二次フォントの順に、PC内のフォントが選択される。

 

< ご使用方法 >

・ ローカル(=PC)への保存は、calendar14.htmcalendar14r.htm(標準カレンダー) を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 変わってしまったファイル名や、*.html 中のパスは要修正。   

 ・ このDHTMLの実装方法は、calendar14.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法は、hogehoge.html をテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。   ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。    更新の確認は [F5]キー を押し、サーバーやブラウザーのキャッシュクリアー、最新データ読み込み(≠再アクセス)で行います。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号62スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6XMLDHTML

 

(*1) : calendar14.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕   

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景

body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

 


作成カレンダー表示サイズ

 

標準カレンダー 〃表示サイズ 表示位置

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font { font-size:12px;line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  カレンダー14</title>

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<!-- This script and many more are available free online at -->

====  この間、説明を省略。  ====

<!--  作成カレンダーのサイズ  -->
msgWindow=window.open("","displayWindow","toolbar=no,width=760,height=500,directories=yes,status=yes,scrollbars=yes,resizable=yes,menubar=yes");
msgWindow.document.write(code);
msgWindow.document.close();
}
<!-- 標準カレンダー表示Winサイズ、オプション -->
function ref() {
window.open("calendar14r.htm","newWindow","toolbar=no,width=190,height=205,directories=no,status=no,scrollbars=no,resizable=yes,menubar=no, screenX=2,left=2,screenY=2,top=2,")
}
</script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

 

(*2) calendar14.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body> 部の編集 背景 リンク 表示済みリンク アクティブリンクの各色(任意値)

 

説明文など

 

 

 

デフォルト値

 

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->

====  この間、説明を省略。  ====

(1) 年・月・月初めの曜日を指定。 曜日は  …… セット] - (1) ……、で。<br>
<form name="calendar_form">
<table border="1" cellpadding="2" cellspacing="0" width="100%"
bgcolor="#FFF495" style="border-collapse: collapse" bordercolorlight="#C7BECD"
bordercolordark="#C7BECD">
<tr>
<td width="13%">
&nbsp;<input type="text" size="4" maxlength="4" name="year" value="2004"><BR>
指定、2004(例)
</td>

====  この間、説明を省略。  ====

<option>曜日 :</option>
<option>日曜日</option>
<option>月曜日</option>
<option>火曜日</option>
<option>水曜日</option>
<option>木曜日</option>
<option>金曜日</option>
<option>土曜日</option>
</select><br><font size="1">月初めの曜日を設定。</font></td>
<td width="37%"
colspan="2"> <font size="1">任意の日に、予定などを記述。<br>HTML可、
画像挿入可、改行は、&lt;br&gt;で。
</font></td>

====  この間、説明を省略。  ====
</font>
</form>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

 

(*3) calendar14r.htm (例)         テキストエディターで開き、編集しhogehoge.htmlと同ディレクトリーに転送・配置します。

  *..htm の編集方法   (*3)をテキストエディターで開き、下記↓の太字部分を編集し使用。
  〔この列ペースト不要〕

 

表示文字

 

ボタン表示文字 〃背景色 〃文字色 カーソル 吹き出し

以下、同様。

 

====  この間、説明を省略。  ====

document.calButtons.calPage.value = " 日 月 火 水 木 金 土 ";
document.calButtons.calPage.value += "\n --------------------";

====  この間、説明を省略。  ====

<INPUT TYPE="button" NAME="Go" value="Go!" onClick="selectDate()" style="background:#837D76; color:#FFC3A0; cursor:hand;" title="作成します。">
</CENTER>

====  この間、説明を省略。  ====

</body>
</html>

 

< 補足 >    適時参照あれ!。

・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。