サンプルページ　　　カレンダー23

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ｶﾚﾝﾀﾞｰ23　　calendar23.htm

月、週、日ｶﾚﾝﾀﾞｰ、予定記述可。　　　　　　DHTML、jQuery。　　　　　　予定、配色などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、< > montr week day 　のｸﾘｯｸなどで。

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、calendar23/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、calendar23.htm、001070440.js、001070441.js、001070440.css、001070441.css を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、calendar23.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名）の、 <head>　～　</head> の任意の行間に (*1)を、さらに <body>　～　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html を WordPad や SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1) と、(*2)、(*3) を参考に太字部分の編集を任意に行います。　　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 10.x～などで開いて。　　　　更新の確認は、[F5]ｷｰを押し、最新ﾃﾞｰﾀ読み込み、で。　　　　あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄｵﾌﾟｼｮﾝ] - [閲覧の履歴] - [削除] などでも。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.js、*.css なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わってしまったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

(*1) ：　calendar23.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕　
　

ｼﾌﾄJIS使用（削除不可）

互換表示

ieなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

予定記述

以下、同様。

幅

背景色　背景画像（優先）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

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

<link href='001070440.css' rel='stylesheet' />
<link href='001070441.css' rel='stylesheet' media='print' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='001070441.js'></script>
<script src='001070440.js'></script>
<script>

$(document).ready(function() {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('ｲﾍﾞﾝﾄﾀｲﾄﾙ:');
if (title) {
calendar.fullCalendar('繰り返しｲﾍﾞﾝﾄ',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [
{
title: '毎日ｲﾍﾞﾝﾄ',
start: new Date(y, m, 1)
},
{
title: '長期ｲﾍﾞﾝﾄ',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: '繰り返しｲﾍﾞﾝﾄ',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
{
id: 999,
title: '繰り返しｲﾍﾞﾝﾄ',
start: new Date(y, m, d+4, 16, 0),
allDay: false
},
{
title: 'ﾐｰﾃｨﾝｸﾞ',
start: new Date(y, m, d, 10, 30),
allDay: false
},
{
title: 'ﾗﾝﾁ',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false
},
{
title: '誕生日',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
{
title: '万年ｶﾚﾝﾀﾞｰを開く',
start: new Date(y, m, 28),
end: new Date(y, m, 28),
url: 'http://xml-xsl.sakura.ne.jp/calendar13.htm'
}
]
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: left;
font-size: 14px;
font-family:メイリオ,Lucida Sans Regular,,Arial,MS PGothic;
}

#calendar {
width: 900px;
margin: 0 auto;
background: #E9E5DF url('http://www.pat.hi-ho.ne.jp/oka_tosho/tab_menu12/bg_ucpns2.jpg');
}
</style>

(*2) ：　calendar23.htm （例）　　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

<body>

<div id='calendar'></div>

==== この間自由ｺﾝﾃﾝﾂを記述､説明を省略｡ ====

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

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。