Posted on by

wdCalendarを日本語で使ってみる

GoogleカレンダーをベースにJQueryで作られたwdCalendarを日本語にして使ってみたのでそのメモ書きです。

wdCalendarはhttp://plugins.jquery.com/project/wdCalendarからダウンロードしてきます。

今回はダウンロードしてきたファイルで分かるところを日本語に変えていきました。これで一応見た目は全て日本語になったはずです。

ダウンロードしたjsファイルだと日本語に対応していないのでwdCalendar_lang_○○.jsとdatepicker_lang_○○.jsなっているフォイルを改造してwdCalendar_lang_JA.jsとdatepicker_lang_JA.jsを作りました。ソースはこんな感じです。


wdCalendar_lang_JA.js

var i18n = $.extend({}, i18n || {}, {
datepicker: {
dateformat: {
"fulldayvalue": "M/d/yyyy",
"separator": "/",
"year_index": 2,
"month_index": 0,
"day_index": 1,
"sun": "日",
"mon": "月",
"tue": "火",
"wed": "水",
"thu": "木",
"fri": "金",
"sat": "土",
"jan": "1月",
"feb": "2月",
"mar": "3月",
"apr": "4月",
"may": "5月",
"jun": "6月",
"jul": "7月",
"aug": "8月",
"sep": "9月",
"oct": "10月",
"nov": "11月",
"dec": "12月",
"postfix": ""
},
ok: " OK ",
cancel: "Cancel",
today: "今日",
prev_month_title: "前の月",
next_month_title: "次の月"
}
});

datepicker_lang_JA.js

var i18n = $.extend({}, i18n || {}, {
xgcalendar: {
dateformat: {
"fulldaykey": "MMddyyyy",
"fulldayshow": "yyyy年：Ld日",
"fulldayvalue": "M/d/yyyy",
"Md": "M/d (W)",
"Md3": "Ld日",
"separator": "/",
"year_index": 2,
"month_index": 0,
"day_index": 1,
"day": "d",
"sun": "日",
"mon": "月",
"tue": "火",
"wed": "水",
"thu": "木",
"fri": "金",
"sat": "土",
"jan": "1月",
"feb": "2月",
"mar": "3月",
"apr": "4月",
"may": "5月",
"jun": "6月",
"jul": "7月",
"aug": "8月",
"sep": "9月",
"oct": "10月",
"nov": "11月",
"dec": "12月"
},
"no_implemented": "No implemented yet",
"to_date_view": "Click to the view of current date",
"i_undefined": "Undefined",
"allday_event": "終日",
"repeat_event": "繰り返し",
"time": "日時",
"event": "予定",
"location": "場所",
"participant": "関係者",
"customer": "お客様",
"get_data_exception": "Exception when getting data",
"new_event": "新規に予定を作成する",
"confirm_delete_event": "この予定を削除しますか？",
"confrim_delete_event_or_all": "Do you want to all repeat events or only this event? \r\nClick [OK] to delete only this event, click [Cancel] delete all events",
"data_format_error": "Data format error! ",
//"invalid_title": "Event title can not be blank or contains ($<>)",
"invalid_title": "予定タイトルが入力されていません。",
"view_no_ready": "View is not ready",
"example": "例: 14:00 に美術館で待ち合わせ",
"content": "予定タイトル",
"create_event": "予定を作成する",
"update_detail": "予定の詳細を編集する",
"click_to_detail": "予定の見る",
"i_delete": "削除する",
"day_plural": "days",
"others": "Others",
"item": ""
}
});

次に一覧表示と詳細編集画面のphpも日本語に変更していきました。
ソースを載せておきます。
sample.php

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
＜html xmlns="http://www.w3.org/1999/xhtml">
＜head id="Head1">
＜title>カレンダー DEMO
＜meta http-equiv="Content-Type" content="text/html;charset=UTF-8">






















カレンダー DEMO












新しい予定を作成








今日








日






週






月








更新














表示期間を選択 »














 


 








 


 

edit.php

＜?php
include_once("php/dbconfig.php");
include_once("php/functions.php");
function getCalendarByRange($id){
try{
$db = new DBConnection();
$db->getConnection();
$sql = "select * from `jqcalendar` where `id` = " . $id;
$handle = mysql_query($sql);
//echo $sql;
$row = mysql_fetch_object($handle);
}catch(Exception $e){
}
return $row;
}
if($_GET["id"]){
$event = getCalendarByRange($_GET["id"]);
}
?>
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
＜html xmlns="http://www.w3.org/1999/xhtml" >
＜head>
＜meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
＜title>Calendar Details





















Save(S)




Delete(D)




Close











" class="fform" id="fmEdit" method="post">

日本語に変えた部分以外で注意するところはjavascriptを読み込むところで○○_lang_USになっている所のUSの部分をJAに変えて先程作ったjavascriptファイルを読み込みます。

後はデーターベースの接続を通るようにして、データーベースに付属されているSQLを流してあげると日本語でwdCalendarが使えるようになりました。