Выходные проходят сложно для моего здоровья, но я таки смог переписать свой календарь событий для ModX.
Напомню, сниппет берет события из указанной директории MODx и генерирует календарь с событиями по дням, которые отображаются при наведении на нужный день.
В чем же отличия от предыдущей версии?
Самое главное — календарь отрисовывается не сторонним плагином jquery.datepicker, а php. К каждой ячейка прикрепляются css классы, в зависимости от их свойств. Все классы, имена дней недели, месяцы задаются в параметрах сниппета, что позволяет их легко менять.
Картинка, для привлечения внимания.

Итак, сгенерированный календарь имеет следующую html структуру:
Как вы видите, событие находится в одной ячейке с датой и имеет собственный класс. Поэтому, его можно легко скрывать и отображать с помощью css.
Почти без оформления, со скрытыми событиями, календарь выглядит так:

Каждая ячейка таблицы, в зависимости от разных параметров снабжается классом css. Это вторая особенность календаря — внешний вид можно менять как угодно, а имена классов задаются в параметрах сниппета.
Пора рассказать, какие классы используются по умолчанию:
Таким образом, вы можете легко настраивать календарь, присваивая этим классам нужное оформление. Хотите выделить выходные дни — просто сделайте им другой цвет, например красный. Месяц и дни недели можно сделать пожирнее, дни с событиями — синие, сегодняшний день — желтым.
И получится примерно так:

Красота!
Для отображения скрытых дивов можно использовать qTip. Лучше обойтись без него.
Вот что получится:

Див скрыт, при наведении на ячейку он отображается, а все оформление в css. Главное — position: absolute и z-index: 10.
Все легко и просто.
Код сниппета я приводить не буду, зато я приведу все параметры и плейсхолдеры.
В сниппете используются служебные плейсхолдеры с именами классов css для оформления, менять их можно через параметры, которые я описал выше. Эти холдеры трогать не нужно.
А также есть плейсходеры, для подстановки значений событий:
Теперь качаем архив и распаковываем. Создаем в админке MODx сниппет eventsCalendar2, в него копируем содержимое файла eventsCalendar2.snippet.php.
Создаем два чанка, tplEvent2 и tplCalendar2, это eventsCalendar2.tplEvent.html и eventsCalendar.tplCalendar2.html соответственно.
Создаем новый документ MODx и вызываем сниппет:
Не забудьте, у вас на странице должен быть подключен qTip!
Если хотите перевести календарь на английский — меняйте параметры названия дней и месяцев. Также, можно вызывать несколько календарей на одной странице — нужно только казать каждому свой &calendar_id.
В чанке tplCalendar2 содержится все оформление календаря, можно менять как душе угодно, только не тройгайте названия плейсхолдеров!
Недостатков предыдущего календаря теперь нет. Все работает шустро и гладко.Иногда может прогнать qTip и перестать показывать всплывашки — но это не моя вина. В принципе, скрытые дивы можно отображать и без него, методик полно.
Если будут вопросы и пожелания — не стесняйтесь пишите, если что — дополню топик.
Багрепорты пока постим сюда, если календарь понравится пользователям — отправим его в репозиторий MODx.
Скачать архив со сниппетом и чанками.
Посмотреть календарь в работе (версия для Revolution).
UPD.
Избавился от qTip, обновил топик и архив со сниппетом.
UPD.2
Добавил английский язык. Добавил 3 параметра: &lang, &first_day, &show_errors. Обновил описание параметров, залил новую версию сниппета.
UPD.3
Генерируемый код приведен в соответствие со стандартами W3C и проходит валидатор.
Добавил в архив readme.html.
Обновил ссылку в топике.
UPD.4
События теперь выбираются только для нужного месяца, что существеннно снижает нагрузку на систему.
Добавлена возможность использовать в шаблонах любые TV параметры и свойства ресурсов.
Добавлен параметр сдвига времени в часах &time_shift, для тех сайтов, где временная зона не совпадает с хостингом.
Дефолтные настройки установлены для России. Неделя начинается в понедельник, язык русский.
Изменен чанк tplEvent2, в соответствии с новыми плейсхолдерами.
Проект уехал на code.google.com. Дальнейшее развитие будет там.
UPD.5
Переделал для Revolution, можно скачать на ГуглоКоде.
Напомню, сниппет берет события из указанной директории MODx и генерирует календарь с событиями по дням, которые отображаются при наведении на нужный день.
В чем же отличия от предыдущей версии?
Самое главное — календарь отрисовывается не сторонним плагином jquery.datepicker, а php. К каждой ячейка прикрепляются css классы, в зависимости от их свойств. Все классы, имена дней недели, месяцы задаются в параметрах сниппета, что позволяет их легко менять.
Картинка, для привлечения внимания.

Оформление
Итак, сгенерированный календарь имеет следующую html структуру:
<div id='Calendar'> <table class='calendar'> <tr> <td class='prev' name='номер пред.месяца-год'>пред месяц</td> <td class='month' colspan='5'>Месяц год</td> <td class='next' name='номер след.месяца-год'>след месяц</td> </tr> <tr> <th class='dow'>День недели</th> </tr> <tr> <td class='weekend isevent' id='calendar_1'> <div class='date'>Дата</div> <div class='event'>Событие<div> </td> </tr> </table> </div>
Как вы видите, событие находится в одной ячейке с датой и имеет собственный класс. Поэтому, его можно легко скрывать и отображать с помощью css.
Почти без оформления, со скрытыми событиями, календарь выглядит так:

Каждая ячейка таблицы, в зависимости от разных параметров снабжается классом css. Это вторая особенность календаря — внешний вид можно менять как угодно, а имена классов задаются в параметрах сниппета.
Пора рассказать, какие классы используются по умолчанию:
.calendar - Таблица с календарем .dow - Ячейка с именем дня недели .month - Ячейка с именем месяца и годом .workday - Рабочие дни .weekend - Выходные .today - Сегодня .isevent - Ячейка с событием .noevent - Ячейка без события .event - div с событием .date - div с датой .emptyday - Пустая ячейка, без даты .prev - Кнопка перехода на следующий месяц .next - Кнопка перехода на предыдущий месяц
Таким образом, вы можете легко настраивать календарь, присваивая этим классам нужное оформление. Хотите выделить выходные дни — просто сделайте им другой цвет, например красный. Месяц и дни недели можно сделать пожирнее, дни с событиями — синие, сегодняшний день — желтым.
И получится примерно так:

Красота!
$('.isevent').live('mouseover',function() { id = this.id; $('#' + id + ' .event').show(); }) $('.isevent').live('mouseout',function() { id = this.id; $('#' + id + ' .event').hide(); })
.isevent { color: black; text-align: left; position:absolute; z-index: 10; display: none; background: #fff; border: 1px solid #AAA; padding: 5px; width: 250px; margin-top: -10px; margin-left: 10px; }
Вот что получится:

Див скрыт, при наведении на ячейку он отображается, а все оформление в css. Главное — position: absolute и z-index: 10.
Все легко и просто.
Сниппет
Код сниппета я приводить не буду, зато я приведу все параметры и плейсхолдеры.
Параметры
&id по умолчанию: нет, но обязателен значение: [int] описание: id существующего документа-контейнера MODx для выборки событий &month по умолчанию: date('m') значение: [int] описание: Месяц для показа событий &year по умолчанию: date('Y') значение: [int] описание: Год для показа событий &dateTV по умолчанию: event_date значение: [string] описание: Имя существующего TV параметра для определения даты события &dateFormat по умолчанию: '%d %b %Y %H:%M' значение: [string] описание: Формат даты, используется strftime() &tplEvent по умолчанию: tplEvent значение: [string] описание: Имя существующего чанка MODx &tplMain по умолчанию: tplCalendar значение: [string] описание: Имя существующего чанка MODx &calendar_id по умолчанию: Calendar значение: [string] описание: Имя уникального идентификатора экземпляра календаря. Необходимо, если вызывается более одного календаря на странице &class_calendar по умолчанию: calendar значение: [string] описание: Имя css класса для оформления таблицы календаря &class_dow по умолчанию: dow значение: [string] описание: Имя css класса для оформления дней недели &class_month по умолчанию: month значение: [string] описание: Имя css класса для оформления месяца и года &class_workday по умолчанию: workday значение: [string] описание: Имя css класса для оформления рабочих дней &class_weekend по умолчанию: weekend значение: [string] описание: Имя css класса для оформления выходных &class_today по умолчанию: today значение: [string] описание: Имя css класса для оформления сегодня &class_event по умолчанию: event значение: [string] описание: Имя css класса для оформления div с событием &class_isevent по умолчанию: isevent значение: [string] описание: Имя css класса для оформления ячейки таблицы с событием &class_noevent по умолчанию: noevent значение: [string] описание: Имя css класса для оформления ячейки таблицы без события &class_date по умолчанию: date значение: [string] описание: Имя css класса для оформления даты календаря &class_emptyday по умолчанию: emptyday значение: [string] описание: Имя css класса для оформления пустой ячейки, без даты &class_prev по умолчанию: prev значение: [string] описание: Имя css класса для оформления кнопки перехода на предыдущий месяц &class_next по умолчанию: next значение: [string] описание: Имя css класса для оформления кнопки перехода на следующий месяц &dow_names по умолчанию: Зависит от &lang значение: [string] описание: Строка с сокращенными названиями дней недели, через запятую, без пробелов. Переопределит стандартную, для выбранного языка. &month_names по умолчанию: Зависит от &lang значение: [string] описание: Строка с названиями месяцев, через запятую, без пробелов. Переопределит стандартную, для выбранного языка. &btn_prev по умолчанию: '«' значение: [string] описание: Текст кнопки перехода на предыдущий месяц &btn_next по умолчанию: '»' значение: [string] описание: Текст кнопки перехода на следующий месяц &lang по умолчанию: 'en' значение: [en,ru] описание: Язык для оформления календаря и вывода ошибок &show_errors по умолчанию: 1 значение: [0|1] описание: Показывать ошибки, по умолчанию - да &first_day по умолчанию: 0 значение: [0|1] описание: 0 - первый день - воскресенье. 1 - первый день - понедельник.
Плейсхолдеры
В сниппете используются служебные плейсхолдеры с именами классов css для оформления, менять их можно через параметры, которые я описал выше. Эти холдеры трогать не нужно.
[+ec.Calendar+] Экземпляр календаря, то есть таблица с датами [+ec.calendar_id+] Уникальный идентификатор экземпляра календаря [+ec.class_calendar+] css класс таблицы с календарем [+ec.class_dow+] css класс дней недели [+ec.class_month+] css класс месяца и года [+ec.class_workday+] css класс рабочих дней [+ec.class_weekend+] css класс выходных [+ec.class_today+] css класс сегодня [+ec.class_event+] css класс события [+ec.class_isevent+] css класс ячейки с событием [+ec.class_noevent+] css класс ячейки без события [+ec.class_date+] css класс даты [+ec.class_emptyday+] css класс пустой ячейки [+ec.class_prev+] css класс кнопки предыдущего месяца [+ec.class_next+] css класс кнопки следующего месяца
А также есть плейсходеры, для подстановки значений событий:
[+ec.num+] Номер события в дне. Актуально, только если у вас больше одного события в день. Для правильной нумерации необходимо, чтобы параметр даты публикации документа совпадал с TV параметром даты события. Иначе, нумерация может быть неверной. [+ec.date+] Дата события. [+ec.url+] Ссылка на событие. [+ec.title+] Заголовок, берется из pagetitle документа MODx. [+ec.desc+] Краткое описание, берется из introtext документа MODx.
Теперь качаем архив и распаковываем. Создаем в админке MODx сниппет eventsCalendar2, в него копируем содержимое файла eventsCalendar2.snippet.php.
Создаем два чанка, tplEvent2 и tplCalendar2, это eventsCalendar2.tplEvent.html и eventsCalendar.tplCalendar2.html соответственно.
Создаем новый документ MODx и вызываем сниппет:
[!eventsCalendar2? &id=`13` &calendar_id=`Cal1` &dateTV=`event_date` &dateFormat=`%d %b %Y %H:%M` &tplEvent=`tplEvent2` &tplMain=`tplCalendar2` !]
Если хотите перевести календарь на английский — меняйте параметры названия дней и месяцев. Также, можно вызывать несколько календарей на одной странице — нужно только казать каждому свой &calendar_id.
В чанке tplCalendar2 содержится все оформление календаря, можно менять как душе угодно, только не тройгайте названия плейсхолдеров!
Недостатков предыдущего календаря теперь нет. Все работает шустро и гладко.
Если будут вопросы и пожелания — не стесняйтесь пишите, если что — дополню топик.
Багрепорты пока постим сюда, если календарь понравится пользователям — отправим его в репозиторий MODx.
Скачать архив со сниппетом и чанками.
Посмотреть календарь в работе (версия для Revolution).
UPD.
Избавился от qTip, обновил топик и архив со сниппетом.
UPD.2
Добавил английский язык. Добавил 3 параметра: &lang, &first_day, &show_errors. Обновил описание параметров, залил новую версию сниппета.
UPD.3
Генерируемый код приведен в соответствие со стандартами W3C и проходит валидатор.
Добавил в архив readme.html.
Обновил ссылку в топике.
UPD.4
События теперь выбираются только для нужного месяца, что существеннно снижает нагрузку на систему.
Добавлена возможность использовать в шаблонах любые TV параметры и свойства ресурсов.
Добавлен параметр сдвига времени в часах &time_shift, для тех сайтов, где временная зона не совпадает с хостингом.
Дефолтные настройки установлены для России. Неделя начинается в понедельник, язык русский.
Изменен чанк tplEvent2, в соответствии с новыми плейсхолдерами.
Проект уехал на code.google.com. Дальнейшее развитие будет там.
UPD.5
Переделал для Revolution, можно скачать на ГуглоКоде.
