Руссифицированный ajax/javascript календарь на основе Yahoo UI

Размещено 2008-08-03 в разделе Программирование | Метки: PHP, JavaScript

Нашел недавно JavaScript библиотеку, разработанную Yahoo - Yahoo! UI Library. С ее помощью можно реализовать многие вещи написав всего лишь несколько строчек кода. Одним из часто используемых на многих сайтах элементов является календарь, в yahoo ui library есть и он, причем существует достаточно много уже готовых примеров как его использовать.

Одним из недостатков ajax календаря от yahoo является то, что он сделан не на русском языке, но разработчики библиотеки предусмотрели возможность руссификации. Возможно кому то это пригодится в дальнейшем и сэкономит время, я решил выложить код с уже руссифицированным календарем. Все пути к css и javascript файлам необходимо подправить на свои, либо на yahooшные сервера (к примеру http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css)

Итак сам календарь

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 
<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
    margin:0;
    padding:0;
}
</style>
 
<link rel="stylesheet" type="text/css" href="/media/js/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="/media/js/yui/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="/media/js/yui/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="/media/js/yui/build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="/media/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
 
<script type="text/javascript" src="/media/js/yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="/media/js/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="/media/js/yui/build/button/button-min.js"></script>
<script type="text/javascript" src="/media/js/yui/build/container/container-min.js"></script>
<script type="text/javascript" src="/media/js/yui/build/calendar/calendar-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
    /* Clear calendar's float */
    #container .bd:after {content:".";display:block;clear:left;height:0;visibility:hidden;}
 
    /* Have calendar squeeze upto bd bounding box */
    #container .bd {padding:0;}
 
    /* Remove calendar's border and set padding in ems instead of px, so we can specify an width in ems for the container */
    #cal {border:none;padding:1em}
 
    /* Datefield look/feel */
    .datefield {
        position:relative;
        top:10px;
        left:10px;
        white-space:nowrap;
        border:1px solid black;
        background-color:#eee;
        width:25em;
        padding:5px;
    }
 
    .datefield input,
    .datefield button,
    .datefield label  {vertical-align:middle}
 
    .datefield label  {font-weight:bold}
    .datefield input  {width:15em}
    .datefield button  {padding:0 5px 0 5px; margin-left:2px;}
    .datefield button img {padding:0;margin:0;vertical-align:middle}
 
    /* Example box */
    .box {
    position:relative;
    height:30em;
    }
</style>
 
<!--end custom header content for this example-->
 
 
</head>
 
<body >
<script type="text/javascript">
    YAHOO.util.Event.onDOMReady(function(){
 
        var dialog, calendar;
 
        calendar = new YAHOO.widget.Calendar("cal", {
            iframe:false,          // Turn iframe off, since container has iframe support.
            hide_blank_weeks:true,  // Enable, to demonstrate how we handle changing height, using changeContent
            LOCALE_WEEKDAYS:"short",
            START_WEEKDAY: 1,
        });
 
        calendar.cfg.setProperty("DATE_FIELD_DELIMITER", ".");
        calendar.cfg.setProperty("MDY_DAY_POSITION", 1);
        calendar.cfg.setProperty("MDY_MONTH_POSITION", 2);
        calendar.cfg.setProperty("MDY_YEAR_POSITION", 3);
        calendar.cfg.setProperty("MD_DAY_POSITION", 1);
        calendar.cfg.setProperty("MD_MONTH_POSITION", 2);
        calendar.cfg.setProperty("MONTHS_SHORT",   ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"]);
        calendar.cfg.setProperty("MONTHS_LONG",    ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]);
        calendar.cfg.setProperty("WEEKDAYS_1CHAR", ["В", "П", "В", "С", "Ч", "П", "С"]);
        calendar.cfg.setProperty("WEEKDAYS_SHORT", ["Во", "По", "Вт", "Ср", "Чт", "Пт", "Сб"]);
        calendar.cfg.setProperty("WEEKDAYS_MEDIUM",["Вос", "Пон", "Вт", "Ср", "Чет", "Пят", "Суб"]);
        calendar.cfg.setProperty("WEEKDAYS_LONG",  ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"]);
 
 
        function okHandler() {
            if (calendar.getSelectedDates().length > 0) {
 
                var selDate = calendar.getSelectedDates()[0];
 
                // Pretty Date Output, using Calendar's Locale values: Friday, 8 February 2008
                var wStr = calendar.cfg.getProperty("WEEKDAYS_LONG")[selDate.getDay()];
                var dStr = selDate.getDate();
                var mStr = selDate.getMonth();
                if (mStr < 10) {
                    mStr = "0" + mStr;
                }
                var yStr = selDate.getFullYear();
                YAHOO.util.Dom.get("date").value = dStr + "-" + mStr + "-" + yStr;
            } else {
                YAHOO.util.Dom.get("date").value = "";
            }
            this.hide();
        }
 
        function cancelHandler() {
            this.hide();
        }
 
        dialog = new YAHOO.widget.Dialog("container", {
            context:["show", "tl", "bl"],
            buttons:[ {text:"Выбрать", isDefault:true, handler: okHandler},
                      {text:"Отмена", handler: cancelHandler}],
            width:"16em",  // Sam Skin dialog needs to have a width defined (7*2em + 2*1em = 16em).
            draggable:false,
            close:true
        });
        calendar.render();
        dialog.render();
 
        // Using dialog.hide() instead of visible:false is a workaround for an IE6/7 container known issue with border-collapse:collapse.
        dialog.hide();
 
        calendar.renderEvent.subscribe(function() {
            // Tell Dialog it's contents have changed, Currently used by container for IE6/Safari2 to sync underlay size
            dialog.fireEvent("changeContent");
        });
 
        YAHOO.util.Event.on("show", "click", function() {
            dialog.show();
            if (YAHOO.env.ua.opera && document.documentElement) {
                // Opera needs to force a repaint
                document.documentElement.style += "";
            } 
        });
    });
</script>
<div class="yui-skin-sam">
    <div class="box">
    <div class="datefield">
        <label for="date">Дата: </label><input type="text" id="date" name="date" value="" /><button type="button" id="show" title="Show Calendar"><img src="/media/js/yui/examples/calendar/assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
    </div>
    <div id="container">
        <div class="hd">Календарь</div>
 
        <div class="bd">
            <div id="cal"></div>
        </div>
    </div>
    </div>
</div>
</body>
</html>