スポンサーリンク

YUI calendarで曜日が日本語表示のカレンダーを作ってみる。

YUI calendar

http://developer.yahoo.com/yui/calendar/

サンプルソース

曜日を日本語で表示する方法。

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>yui calendar</title>

		<!--CSS file (default YUI Sam Skin) -->
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.0/build/calendar/assets/skins/sam/calendar.css">

		<!-- Dependencies -->
		<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

		<!-- Source file -->
		<script type="text/javascript" src="http://yui.yahooapis.com/2.4.0/build/calendar/calendar-min.js"></script>

<style type="text/css">
	.yui-skin-sam .yui-calendar td.wd0 { background-color:#fde0e0; }
	.yui-skin-sam .yui-calendar td.wd0 a { color:red; }
</style>


	</head>
	<body class=" yui-skin-sam">
		<div id="cal1Container"></div>
		<script type="text/javascript">
// A DIV with id "cal1Container" should already exist on the page
	YAHOO.namespace("example.calendar");

	YAHOO.example.calendar.init = function() {
		YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", { START_WEEKDAY: 1, MULTI_SELECT:true } );

		// Correct formats for Japan: yyyy/mm/dd, mm/dd, yyyy/mm

		YAHOO.example.calendar.cal1.cfg.setProperty("MDY_YEAR_POSITION", 1);
		YAHOO.example.calendar.cal1.cfg.setProperty("MDY_MONTH_POSITION", 2);
		YAHOO.example.calendar.cal1.cfg.setProperty("MDY_DAY_POSITION", 3);

		YAHOO.example.calendar.cal1.cfg.setProperty("MY_YEAR_POSITION", 1);
		YAHOO.example.calendar.cal1.cfg.setProperty("MY_MONTH_POSITION", 2);

		// Date labels for Japanese locale

		YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_SHORT",   ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
		YAHOO.example.calendar.cal1.cfg.setProperty("MONTHS_LONG",    ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"]);
		YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_1CHAR", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
		YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_SHORT", ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
		YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_MEDIUM",["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);
		YAHOO.example.calendar.cal1.cfg.setProperty("WEEKDAYS_LONG",  ["\u65E5", "\u6708", "\u706B", "\u6C34", "\u6728", "\u91D1", "\u571F"]);

		// Month/Year label format for Japan
		YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_YEAR_POSITION",  1);
		YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_MONTH_POSITION",  2);
		YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_YEAR_SUFFIX",  "\u5E74");
		YAHOO.example.calendar.cal1.cfg.setProperty("MY_LABEL_MONTH_SUFFIX",  "");

		//YAHOO.example.calendar.cal1.select("2006/10/1-2006/10/8");
		YAHOO.example.calendar.cal1.render();
	}

	YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
		</script>
	</body>
</html>

デモ
http://paranoid.dip.jp/dev/yahoo/yui/calendar-japan.html

スポンサーリンク
スポンサーリンク
 
いつもシェア、ありがとうございます!


もっと情報を探しませんか?

関連記事

最近の記事

人気のページ

スポンサーリンク
 

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12

サイト

Vim入門

C言語入門

C++入門

JavaScript/Node.js入門

Python入門

FreeBSD入門

Ubuntu入門

セキュリティ入門

パソコン自作入門

ブログ

トップ


プライバシーポリシー