vlaCalendar v.2 — Vista-подібний AJAX календар
vlaCalendar v.2 — красивий та такий, що легко налаштовується, AJAX календар а-ля Windows Vista. vlaCalendar версії 2.1 є сумісним з MooTools 1.2, а vlaCalendar версії 2.0 — з MooTools 1.11 та 1.2b2 бета.
Рис.1. Vista-подібний календар.
Календар vlaCalendar був протестований в:
- IE7 на Vista і XP SP2;
- IE6 на XP SP2;
- Firefox 2 та 3;
- Opera 9—9.5;
- Safari 3.1 під Windows;
- Google Chrome.
Використання
Включіть наступні JavaScript-файли, які ви завантажите зі сайту проекту:
- mootools-1.2-core.js та
- vlaCal-v2.1.js
в шапку вашого HTML-документа (обгорніть в теґ <head>). За замовчуванням JavaScript-файли лежать в папці jslib/.
Примітка! Для отримання кращого результату використовуйте XHTML DOCTYPE: ІЕ надає календарю “погану” висоту при використанні DOCTYPE HTML 4.01.
Рис.2. Календар в стилі Adobe CS3 GUI.
Та ж сама історія зі стилями. Включіть vlaCal-v2.1.css та інші стильові файли в шапку вашого HTML-документа. За замовчуванням стилі лежать в папці styles/.
Рис.3. Календар в стилі Apple OSX Tiger.
<head>
[...]
<script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>
<link type="text/css" href="styles/vlaCal-v2.1.css" rel="stylesheet" />
[...]
</head>
Екземпляр календаря чи поля для вибору дати (datepicker) має бути створений після того, як DOM буде готовий. Це робиться за допомогою MooTools-події domready:
<head>
[...]
<script type="text/javascript">
window.addEvent('domready', function() {
// поле для вибору дати
new vlaDatePicker('textbox-id');
// календар
new vlaCalendar('block-element-id');
});
</script>
[...]
</head>
PHP-файли використовуються для створення HTML-календаря і лежать за замовчанням в папці inc/.
Аргументи
new vlaDatePicker(string element [, object options])
new vlaCalendar(string element [, object options]);element— ідентифікатор HTML-елемента.options— широкий вибір налаштувань для оформлення вигляду і формату календаря.
Налаштувань є чимало, тому на всіх зупинятись не буду. Опишу лише дійсно корисні.
Налаштування vlaCalendar
startMonday— дозволяє задати перший день тижня; це або понеділок (Monday), або неділя (Sunday), що характерно для США. За замовчуванням стоїтьfalse, тобто неділя.weekDayLabels— скорочені назви днів тижня (за замовчуванням — Mo, Tu, We, …).monthLabels— назви місяців (за замовчуванням — January, February, March, …).monthSmallLabels— короткі назви місяців (за замовчуванням — Jan, Feb, Mar, …).
Налаштування vlaDatePicker
leadingZero— вказує, чи потрібно ставити нуль перед числом (наприклад, 09 замість 9). За замовчуванням —true.format— визначає формат, в якому буде показана дата (порядок для місяця, дня і року —d/m/y,m/d/y,y/d/m, y/m/d).
Для детальнішої довідки та перегляду демонстраційних прикладів відвідайте сторінку http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html.