PROGRAMMING
javascript
- ページャーを作る（簡易版）
- ページャーを作る 4/4
(クロスブラウザ対策)
(ページャー表示用メソッド)
(ページャーの使い方) - ページャーを作る 3/4
(イベント登録) - ページャーを作る 2/4
(スタイルの設定) - ページャーを作る 1/4
(ページャー用関数を準備)
(各要素を生成) - 自作カレンダーを作る 6/6
(11.～14.各種メソッド)
(15.簡単な使い方) - 自作カレンダーを作る 5/6
(09.祝休日の判定)
(10.閏年の判定) - 自作カレンダーを作る 4/6
(08.イベントの設定) - 自作カレンダーを作る 3/6
(07.スタイルの設定) - 自作カレンダーを作る 2/6
(05.カレンダーのマスのみ作成)
(06.各マスへ年月・日付を埋め込み) - 自作カレンダーを作る 1/6
(01.カレンダーの基を準備)
(02.各月の日数や年月日の区切り文字)
(03.前月・次月指定時の処理)
(04.前月・次月部分の年月を算出) - JS-Image-Resizerを使って画像を高画質で縮小
- ファイルを作成しローカルに保存
- モーダルウィンドウをクラス化
- ストップウォッチを作る
- XMLHttpRequest Lebel2を試してみる
- jQuery：Tableで親・子・兄弟要素を取得
- 文字列をセパレータ文字で分割し配列で返す関数
- forループのカウンタを使用している関数の定義
- クロージャの使いどころ
- JSONPでクロスドメイン
- AjaxでJSON形式のデータを扱う
- jsファイルからjsファイルを呼び出す
- jQuery：モーダルウィンドウを作ってみる
CSS
- フォルダ構成をCSSで見やすくする
- シンタックスハイライトPrismのカスタマイズ
- リスト(li)を中央に配置する
- ブロックレベル要素全体をリンクにする
- 実践と点線の交わり部分のギザギザをすっきりさせる
PHP
Java
- IntelliJ.Gradle.JavaFX(6) プラグイン org.beryx.jlink を使ってみる
- IntelliJ.Gradle.JavaFX(5) NSISでインストーラーを作る
- IntelliJ.Gradle.JavaFX(4) exewrapで実行可能jarをexe化する
- IntelliJ.Gradle.JavaFX(3) Jlink でカスタム JRE を作る
- IntelliJ.Gradle.JavaFX(2) すべての依存対象を含んだ Fatjar を作る
- IntelliJ.Gradle.JavaFX(1) アプリケーションを作る
- javaのコンパイルと実行
- イメージを回転する
- Exif情報を簡単に取得できるライブラリ
- 高画質で画像縮小
- JDBCによるデータベース操作
自作カレンダーを作る 6/6
自作カレンダーを作るの最終ページです。
MkenCalendarのダウンロード(mkenCalendar.js + mkenCalendar-min.js)
mkenCalendar.zip
自作カレンダーを作る 1/6
01. まずはカレンダーの基を準備
02. 各月の日数や年月日の区切り文字
03. 前月・次月指定時の処理
04. カレンダーの前月・次月部分の日付の年月を算出
自作カレンダーを作る 2/6
05. カレンダーのマスのみ作成
06. 各マスへ年月・日付を埋め込み
自作カレンダーを作る 3/6
07. スタイルの設定
自作カレンダーを作る 4/6
08. イベントの設定
自作カレンダーを作る 5/6
09. 祝休日の判定
10. 閏年の判定
自作カレンダーを作る 6/6
11. 選択されている日付を得るメソッド
12. スプリッタを変更するためのメソッド
13. カレンダーを表示するメソッド
14. 指定した日付にジャンプするメソッド
15. 簡単な使い方
11.プロパティやメソッドの追加（選択されている日付を得るメソッド）
現在選択されている日付を得るメソッドです。
引数が１のときは月日が一桁表示、それ以外は二桁表示の日付が返されます。
getCurrentDay: function(fm) {
if(fm === 1) { // 一桁表示
return this.currentDay;
} else { // それ以外は二桁表示
var yymmdd = this.currentDay.split(this.spliter);
// yymmdd[0] 年
// yymmdd[1] 月の一桁表示
// yymmdd[2] 日の一桁表示
if (yymmdd[1] < 10) {yymmdd[1] = '0' + yymmdd[1];}
if (yymmdd[2] < 10) {yymmdd[2] = '0' + yymmdd[2];}
return yymmdd[0] + this.spliter + yymmdd[1] + this.spliter + yymmdd[2];
}
},
12.プロパティやメソッドの追加（スプリッタを変更するためのメソッド）
スプリッタ（年月日の区切り文字）を変更したい場合もあります。そのためのメソッドです。
MkenCalendar.prototype.setSpliter = function(spliterStr) {
// 年月日の区切り文字
this.spliter = spliterStr;
// 現在選択されている日付
this.currentDay =
this.nenn + this.spliter + this.tuki + this.spliter + this.nichi;
};
13.プロパティやメソッドの追加（カレンダーを表示するメソッド）
MkenCalendarのインスタンスを得て、このメソッドを呼び出すことでカレンダー表示されます。
MkenCalendar.prototype.showCalendar = function() {
// calendar枠作成と各マスのid.classをセット
this.createHTML();
// 日付の埋め込み
this.setDays();
// イベントをセット
this.setEvent();
// スタイルをセット
this.setStyle();
};
14.プロパティやメソッドの追加（指定した日付にジャンプするメソッド）
遠く離れた日付に移動したいこともあるので、その日付にジャンプするメソッドを準備しました。
MkenCalendar.prototype.removeDate = function(nenn, tuki, nichi) {
this.nenn = nenn;
this.tuki = tuki;
this.nichi = nichi;
this.currentDay =
this.nenn + this.spliter + this.tuki + this.spliter + this.nichi;
this.setDays();
this.setStyle();
};
15.簡単な使い方
簡単な使い方は次のとおり。
HTML内のカレンダーを表示したいところにブロックレベル要素
（この例ではidがcalendar1）を置きます。
<div id="calendar1"></div>
カレンダーのCSSです。
#calendar1 {
/* カレンダー本体のサイズ */
width: 259px;
/* カレンダー本体のサイズ */
height: 209px;
padding: 10px;
margin: 20px auto 0 50px;
background-color: #aaaaaa;
}
そして次がカレンダーを操作するjavascript（jQueryを使用している）で （1） インスタンスを作成し （2） showCalendarで表示 （3） 日付クリックイベントを記述 することになります。
var tagStr = "calendar1";
// カレンダーのインスタンス（1）
var cal = new MkenCalendar(tagStr);
// カレンダーの表示（2）
cal.showCalendar();
// 二桁表示
alert("今日は" + cal.getCurrentDay() + " です");
// カレンダーの日付クリックイベント（3）
$("." + tagStr + "DayCLS").on("click", function(){
// 一桁表示
alert(cal.getCurrentDay(1) + " がクリックされました");
// 2013年4月15日に移動する場合
cal.removeDate(2013, 4, 15);
カレンダーを表示した直後は今日の年月日がプロパティに入っています。