"Табличный" Календарь на сайт с подсветкой и бонусом от instantcms.su

+2
#1788 от 12:42
dmitrix2024
Был вчера
За полезные публикации на форуме
11 тем
26 сообщений
Рейтинг: 25
Репутация: 2
На сайте 18 дней

Предлагаю вашему внимаю небольшую инструкцию по установке простого календаря на сайт InstantCMS.

Календарик «умеет» подсвечивать текущий день, выделяет светло-розовым цветом выходные дни и позволяет просматривать предыдущие и следующие месяцы.

Ставить его будем в сайдбар или по другому боковая колонка.

Можно использовать стандартный виджет — HTML блок или же виджет PHP code от Kreator.

Если виджет PHP не установлен, установите его стандартным способом.


Инструкция очень простая.

1 — Переходим в административную часть → мойсуперсайт/admin/widgets

2 — Справа в сайдбаре  видим раскрытый «аккордеон», название   ↓ Общие  

3 — Перетаскиваем виджет PHP из сайдбара в свободную ячейку.

4 -  Во всплывающем окне переходим на вкладку Опции.


Для простоты восприятия информации, я разделил код на 4 блока (части).

CSS ↓ (нужен для оформления внешнего вида! в дальнейшем рекомендую вынести в отдельный файл)

<style>
#calendar2{width:100%;font:monospace;line-height:1.2em;font-size:15px;text-align:center}
#calendar2 thead tr:last-child{font-size:small;color: rgb(85, 85, 85)}
#calendar2 thead tr:nth-child(1) td:nth-child(2){color:rgb(50, 50, 50)}
#calendar2 thead tr:nth-child(1) td:nth-child(1):hover, #calendar2 thead tr:nth-child(1) td:nth-child(3):hover{cursor:pointer}
#calendar2 tbody td{color:rgb(44, 86, 122)}
#calendar2 tbody td:nth-child(n+6), #calendar2 .holiday{color:rgb(231, 140, 92)}
#calendar2 tbody td.today{background: rgb(192, 199, 205);color:#34495e;border-radius:3px}
</style><br>

HTML ↓ (гипертекстовая разметка)

<table id="calendar2">
  <thead>
    <tr><td><td colspan="5"><td><tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
  <tbody>
</table>
<br>

JS ↓ (код сжат! в своем редакторе приведите его в обычный/читабельный вид)

<script type="text/javascript">
function Calendar2(e,t,a){var n=new Date(t,a+1,0).getDate(),d=new Date(t,a,n),r=new Date(d.getFullYear(),d.getMonth(),n).getDay(),l=new Date(d.getFullYear(),d.getMonth(),1).getDay(),c="<tr>"
;a=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];if(0!=l)for(var o=1;o<l;o++)c+="<td>";else for(o=0;o<6;o++)c+="<td>"
;for(o=1;o<=n;o++)o==(new Date).getDate()&&d.getFullYear()==(new Date).getFullYear()&&d.getMonth()==(new Date).getMonth()?c+='<td class="today">'+o:c+="<td>"+o,0==new Date(d.getFullYear(),d.getMonth(),o).getDay()&&(c+="<tr>")
;for(o=r;o<7;o++)c+="<td>&nbsp;";document.querySelector("#"+e+" tbody").innerHTML=c,document.querySelector("#"+e+" thead td:nth-child(2)").innerHTML=a[d.getMonth()]+" "+d.getFullYear(),
document.querySelector("#"+e+" thead td:nth-child(2)").dataset.month=d.getMonth(),document.querySelector("#"+e+" thead td:nth-child(2)").dataset.year=d.getFullYear(),
document.querySelectorAll("#"+e+" tbody tr").length<6&&(document.querySelector("#"+e+" tbody").innerHTML+="<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;")}
Calendar2("calendar2",(new Date).getFullYear(),(new Date).getMonth()),document.querySelector("#calendar2 thead tr:nth-child(1) td:nth-child(1)").onclick=function(){
Calendar2("calendar2",document.querySelector("#calendar2 thead td:nth-child(2)").dataset.year,parseFloat(document.querySelector("#calendar2 thead td:nth-child(2)").dataset.month)-1)},
document.querySelector("#calendar2 thead tr:nth-child(1) td:nth-child(3)").onclick=function(){
Calendar2("calendar2",document.querySelector("#calendar2 thead td:nth-child(2)").dataset.year,parseFloat(document.querySelector("#calendar2 thead td:nth-child(2)").dataset.month)+1)};
</script><br>

PHP (поместите его в самом низу виджета, он подскажет сколько за сегодняшний день было добавлено новых объявлений)

<?php
$content_model = cmsCore ::getModel ( 'content' );
$board_count = $content_model -> getContentItemsCount ( 'board' );
$date_count_board = $content_model -> resetFilters () -> filterGtEqual ( 'date_pub', date ( 'Y-m-d' ) ) -> getContentItemsCount ( 'board' );
if ( cmsUser ::isAdmin () && stristr ( $_SERVER[ 'REQUEST_URI' ], 'board' ) == true ) {
echo "<hr><div><span style='font-size:14px'>Объявлений сегодня: <span style='color:#3BAF58'>{$date_count_board}</span><br>Всего объявлений: <span style='color:#3BAF58'>{$board_count}</span></span></div>"; } ?><br>

Обратите внимание!

if ( cmsUser ::isAdmin () — указывает на то, является ли пользователь администратором.

Что в свою очередь, означает, что текст о количестве объявлений будет показан только администратору.


5 — Копируем код и по очереди:) вставляем в текстовую область во вкладке Опции.

6 — Нажимаем кнопку Сохранить и переходим на сайт, чтобы проверить результат.


Вот что у вас должно получится.

Простое и лаконичное решение которое украсит ваш сайт и будет напоминать что скоро выходные))

kreator
Сейчас на сайте
Администраторы
Разработчики
106 тем
644 сообщения
Рейтинг: 239
Репутация: 6
На сайте 2 месяца

Отличное решение.

К тому же если в типе контента включен фильтр по дате то можно даты сделать кликабельными с переходом на отображения контента на определенные даты?

Редактировалось 1 раз, последний: 12:59
Автор: dmitrix2024
dmitrix2024
Был вчера
За полезные публикации на форуме
11 тем
26 сообщений
Рейтинг: 25
Репутация: 2
На сайте 18 дней

Спасибо!

Сделать даты кликабельными было бы отлично, только как? Тут надо подумать, может и решение найду.

vladimird
Сейчас на сайте
За активное участие
25 тем
246 сообщений
Рейтинг: 23
Репутация: 1
На сайте 1 месяц

Цитата: kreator

Отличное решение.

К тому же если в типе контента включен фильтр по дате то можно даты сделать кликабельными с переходом на отображения контента на определенные даты?

Это видимо какой-то фильтр контента еще нужно создавать. 

А решение шикарное.


Делаю сайт www.torg64.ru/

Отвечать в темах могут только зарегистрированные пользователи. Вход Регистрация.