Как стать автором
Обновить

MODx — архив новостей в виде календаря (упрощенный вариант)

Время на прочтение4 мин
Количество просмотров1K
Итак, начнем с того, что многие, кто работает с MODx, рано или поздно сталкиваются с тем, что каким бы не был удобным Ditto, но, все же, он не может делать многих вещей, одна из которых, по моему, должна быть вообще в базовых возможностях — архив новостей в виде календаря, например такого:

image

На данным момент, к сожалению, есть только упрощенный вариант решения данной проблемы: DittoCal. Его всегда можно скачать здесь.
Почему упрощенный? Да потому что сниппет не умеет показывать сразу несколько новостей за одну и ту же дату, а выводит самую первую, однако для кого-то большего и не надо, поэтому приступим.


Скачав архив мы увидим в нем 2 фала: JSON.php и snippet.DittoCal.php, заходим в MODx и создаем новый сниппет «DittoCal», в него копируем содержание файла snippet.DittoCal.php. Открываем наш фтп и создаем новую папку «DittoCal» в assets/snippets, после чего закачиваем в нее файл JSON.php.

Теперь самое интересное: как вообще все это работает.

1. Создаем новый документ с такими параметрами:
Заголовок: blog json output
Псевдоним: blog-json-output
Шаблон: blank
Показывать в меню: нет
Публиковать: да
Доступен для поиска: нет
Тип содержимого: text/plain
2. В контенте пишем:
[!Ditto? startID=`id_нашей_папки_с_новостями` &summarize=`100` &format=`json` &dateFormat=`%d-%m-%Y` &sortDir=`desc`!]
3. Сохраняем документ
4. Вставляем куда-нибудь вызов нашего календарика:
[!DittoCal? &calSource=`наш_сайт.ру/blog-json-output` &dayNameLength=`1`!]

Все, можно наслаждаться нашим календариком:
image

Но, на картинке-то он русский, а у меня нет! Это бывает, хоть у сниппета и есть функция отвечающая за региональные настройки календарика, но далеко не всегда он работает, поэтому следующий момент: русификация.

1. Открываем в MODx сниппет DittoCal.
2. Ищем строчку
$title = htmlentities(ucfirst($month_name)).' '.$year; #note that some locales don't capitalize month and day names
И добавляем после нее
switch(ucfirst($month_name))
{
case "January": $title="Январь"; break;
case "February": $title="Февраль"; break;
case "March": $title="Март"; break;
case "April": $title="Апрель"; break;
case "May": $title="Май"; break;
case "June": $title="Июнь"; break;
case "July": $title="Июль"; break;
case "August": $title="Август"; break;
case "September": $title="Сентябрь"; break;
case "October": $title="Октябрь"; break;
case "November": $title="Ноябрь"; break;
case "December": $title="Декабрь"; break;
}
$title.=' '.$year;

3. Ищем:
foreach($day_names as $d)
$calendar .= ''.htmlentities($day_name_length < 4 ? substr($d,0,$day_name_length) : $d).'';

и заменяем на
$calendar .= 'П';
$calendar .= 'В';
$calendar .= 'С';
$calendar .= 'Ч';
$calendar .= 'П';
$calendar .= 'С';
$calendar .= 'В';


Все. Теперь календарь русифицирован.
Для тех, кто делает все как написано, но все равно все на английской или вообще не работает, то я приведу здесь ссылку на полный код сниппета уже русифицированного: DittoCalRus

Теперь хорошо бы его стилизовать, что ж, здесь вообще нет ничего сложного, что бы сохранить вам время, я предлагаю уже готовый вариант CSS:

/*********************************************
CSS для календаря
*********************************************/
table.calendar {
width: 182px;
padding: 0px;
margin: 0px auto;
margin-bottom: 5px;
border-left: 1px solid #A2ADBC;
font: bold 12px/20px;
text-align: center;
background-color: #EEE;
color: #888888;
}
.calendar-prev, .calendar-prev a, .calendar-next, .calendar-next a {
font-size: 24px;
text-align: center;
text-decoration: none;
}
caption.calendar-month {
margin: 0px auto;
margin-top: 5px;
padding: 5px 0px;
width: 182px;
color: #8e2c3a;
font-size: 18px;
text-align: center;

}
table.calendar th {
font-size: 16px;
color: #616B76;
width: 26px;
height: 25px;
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
border-top: 1px solid #A2ADBC;
text-align: center;
}
table.calendar td {
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
width: 26px;
height: 25px;
text-align: center;
}
table.calendar td a {
text-decoration: none;
font-weight: bold;
display: block;
font-size:100%;
}
table.calendar td a:link, table.calendar td a:visited {
color: #000;
}
table.calendar td a:hover, table.calendar td a:active {
color: #8e2c3a;
}


Итак, получим вот это:
image

По просьбам пользователей добавлю пример использования, для того, что бы была ясна работа архива:
Пример на сайте muddydogpaws.com

Все, приятного пользования, спасибо!
З.Ы: может быть появится время на днях, тогда попробую посмотреть, что можно сделать с выводом нескольких новостей за одну дату.

Приложение — Парамеры DittoCal

&calSource
по умолчанию: нет, но обязателен
значение: [ URI ]
описание: Ссылка на страничку, откуда календарь будет брать новости в специальном формате (т.о. это и есть та ссылка: www.mysite.ru/blog-json-output)
&linkClass
по умолчанию: cal_link
значение: [ string ]
описание: Класс для ячеек таблицы (td), которые будут ссылками.
&dayNameLength
по умолчанию: 3
значение: [ 0 | 1 | 2 | 3 | 4 ]
описание: Сколько символов отображать для дней (4 - отображать все имя полностью).
&firstDay
по умолчанию: 0
значение: [ 0 | 1 | 2 | 3 | 4 | 5 | 6 ]
описание: Какой день будет начинать неделю. 0=воскресенье, 1=понедельник, и т.д...
&showPn
по умолчанию: 1
значение: [ 0 | 1 ]
описание: Пгоказывать стрелочки Предыдущий/Следующий месяц.
&debug
по умолчанию: 0
значение: [ 0 | 1 ]
описание: Включить ли решим отладки, 1 - включить.
&ph
по умолчанию: cal_link
значение: [ string ]
описание: имя подстановщика, заменяющего непосредственно выводимые результаты.
&activeDay
по умолчанию: curDay
значение: [ string ]
описание: Класс для отображения дня, на который кликнули.
Теги:
Хабы:
Всего голосов 10: ↑8 и ↓2+6
Комментарии4

Публикации