Органайзер.
В качестве основы использован модифицированный jquery плагин
fullcallendar. Документацию по его настройке найдете по указанной выше ссылке. События в органайзер добавляются из таблиц КБ при отображении рабочего стола или смене режима отображения (в данном представлении их четыре:
год,
месяц,
неделя и
день). Отображение
год не является родным, поэтому его вывод несколько кривоват, когда-нибудь допилю и выложу. В предложенном представлении из стандартной конфигурации используются таблица
Контрагенты (отображается поле
Перезвонить) и таблица
Задания. Событие, созданное вами, можно перетащить на другую дату в календаре, что изменит дату в связанной с ним записи в таблице. Если задания назначены
для вас - они заблокированы от переноса.
Код представления.
Подготовка данных: в стандартный код добавьте
// ===================== для представления ОРГАНАЙЗЕР
$userID = $user['id'];
$smarty->assign("userID", $userID);
Отображение:
<style>
.tip_a
{
color:black;
padding:3px;
text-decoration:none;
}
.tip_a:hover
{
color:black;
text-decoration:none;
background:#ccc;
}
.start_link
{
color:#0075ce;
font :16px Arial;
font-weight:bold;
text-decoration:none;
}
.yellow_box
{
color:gray;
background:url('images/left_list_marker1.png') no-repeat 5px 50%;
padding:8px 8px 8px 30px;
margin:0 15px 0 0;
display:block;
text-decoration: none;
}
.yellow_box:hover a
{
color:black;
}
.yellow_box:hover
{
background:url('images/left_list_marker1_hover.png') no-repeat 5px 50%;
background-color:#ffffcc;
color:black;
}
.important
{
color:red;
font-size:9px;
}
</style>
<script>
function change_tip_flag(id, arhive)
{
var im=document.getElementById('tip_flag_'+arhive+'_'+id);
var sc=im.src;
var new_state=1;
if (sc.indexOf('star.png')>0) new_state=0;
if (new_state) im.src='images/star.png';
else im.src='images/star_gray.png';
update_tip_ajax.method="POST";
update_tip_ajax.call("arhive="+arhive+"&tip_show_id="+id+"&change_flag=1", ComRespTip);
}
</script>
{if $error_ie}<br><div style="color:red">{$lang['IE_old']}</div>{/if}
<table width="100%">
<tr>
<td valign="top" width='50%'>
{if $personal_array}
<h1>Настройте систему</h1>
{foreach from=$personal_array item=data}
<a style="border-top:1px silver solid;" class="yellow_box" href="{$data.url}"><span class="start_link">{$data.title}</span>{if $data.important} <sup class='important'>ВАЖНО!</sup>{/if}<br>{$data.description}</a>
{/foreach}
{/if}
<!-- ============================== НАЧАЛО ОРГАНАЙЗЕР ==================================== -->
<link rel="stylesheet" href="/cb_modules/fullcalendar/fullcalendar.css" type="text/css">
<link rel="stylesheet" href="/cb_modules/fullcalendar/fullcalendar.print.css" type="text/css" media="print">
<link rel="stylesheet" href="/cb_modules/jquery/jquery-ui-1.8.16.custom.css" type="text/css" media="screen">
<link rel="stylesheet" href="/cb_modules/qTip/jquery.qtip.css" type="text/css" media="screen">
<style type='text/css'>
#calendar_box {
width: 99%;
padding: 0px 30px 10px 0px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
padding: 8px;
border: 1px solid silver!important;
border-radius: 8px;
}
.fc-content{
background-color: white;
}
th.fc-widget-header{
background-color: #265778;
color: white;
}
.fc-view-month .fc-day-number{
font-weight: bold;
}
.fc-other-month .fc-day-number{
font-weight: normal;
}
td.fc-widget-content .fc-day div.fc-day-number{
color: #ccc;
}
.fc-view-year .fc-day-number{
font-size: smaller;
}
.fc-today .fc-day-number {
background-color: #FFDC58;
color: red;
border-width: 1 px;
border-color: red;
}
td.fc-sat, td.fc-sun {
background-color: MistyRose;
}
.fc-today,{
background-color: LemonChiffon;
}
.fc-event-skin {
background-color: transparent;
border-color: black;
}
.class_done,
.class_done .fc-event-skin{
background-color: Grey !important;
border-color: black;
}
.class_order,
.class_order .fc-event-skin{
background-color: DarkOrchid;
border-color: black;
}
.class_note,
.class_note .fc-event-skin{
border-color: red;
}
.class_toMe,
.class_toMe .fc-event-skin{
background-color: MediumSeaGreen;
border-color: black;
}
.class_toMe_editable,
.class_toMe_editable .fc-event-skin{
background-color: MediumSeaGreen;
border-color: GoldenRod;
}
.class_fromMe,
.class_fromMe .fc-event-skin{
background-color: RoyalBlue;
border-color: GoldenRod;
}
.class_call,
.class_call .fc-event-skin{
background-color: Sienna;
border-color: GoldenRod;
}
.newTask .fc-event-skin{
background-color: HotPink;
}
</style>
<script type="text/javascript" src="/cb_modules/jquery/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/cb_modules/fullcalendar/fullcalendar.js"></script>
<script type="text/javascript" src="/cb_modules/jquery/jquery-ui-1.8.16.custom.min.js"></script>
<script src="/cb_modules/qTip/jquery.qtip.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
firstDay: 1,
height: 400,
header: {
left: 'prev,next today',
center: 'title',
right: 'year,month,agendaWeek,agendaDay' //если отображение ГОД не нужно - удалите year из строки
},
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
monthNamesShort: ['Янв.','Фев.','Март','Апр.','Май','Июнь','Июль','Авг.','Сент.','Окт.','Ноя.','Дек.'],
dayNames: ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"],
dayNamesShort: ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"],
buttonText: {
prev: " ◄ ",
next: " ► ",
prevYear: " << ",
nextYear: " >> ",
today: "Сегодня",
month: "Месяц",
week: "Неделя",
day: "День"
},
editable: false,
events: {
url: '/cb_modules/fullcalendar/json-events.php?userID={$userID}',
type: 'POST',
allDayDefault: false,
error: function() {
alert('Ошибка формирования события!');
}
},
eventRender: function(event, element) {
element.qtip({
content: {
text: event.qTip
},
position: {
my: 'top left',
adjust: {
x: -10, y: -10
},
viewport: $(window)
},
hide: {
delay: 300,
fixed: true
},
style: 'ui-tooltip-shadow'
});
},
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
if (!confirm("Вы подтверждаете изменение даты и времени события?")) {
revertFunc();
}else{
var evDate=event.start;
$.ajax({
url: '/cb_modules/fullcalendar/json-events.php',
cache: false,
data: "id="+event.id+"&date="+evDate.getTime()/1000+"&table="+event.table
});
}
}
});
});
</script>
<h1 align='center'>Органайзер</h1>
<div id='calendar_box'>
<div id='calendar'></div>
</div>
<!-- ============================== КОНЕЦ ОРГАНАЙЗЕР ==================================== -->
<!-- ============================== НАЧАЛО ССЫЛКИ НА СТАРТОВОЙ ========================== -->
<h1 align='center'>Начните работу{$admin_link}</h1>
{foreach from=$output_array item=data}
<a style="border-top:1px silver solid;" class="yellow_box" href="{$data.url}&back_url={$base64_current_url}"><span class="start_link">{$data.title}</span><br>{$data.description}</a>
{/foreach}
<!-- ============================== КОНЕЦ ССЫЛКИ НА СТАРТОВОЙ ========================== -->
</td>
<td valign="top" width=50%>
<h1 align='center'>Лента напоминаний</h1>
<table width="100%" cellspacing=0 cellpadding=0>
{foreach from=$tips_array item=data}
<tr>
<td valign="middle" align="right" style="border-bottom:1px #DDDDDD solid;font-size:13px;padding: 3px 15px 3px 3px;" width="15px"><img id='tip_flag_{$data.arhive}_{$data.id}' style='cursor:pointer;' src='images/star{if !$data.flag}_gray{/if}.png' onclick='change_tip_flag({$data.id},{$data.arhive})' title='{$lang.select_tip_flag1}'></td>
<td valign="top" align="left" style="border-bottom:1px #DDDDDD solid;font-size:12px;padding: 4px 4px 4px 0;"><a class="tip_a" style="color:{if !$data.inactive}black{else}gray{/if}; padding: 0;{if !$data.inactive}font-weight: bold;{else}text-decoration:line-through;{/if}" href="view_line{$config.vlm}.php?table={$data.table}&line={$data.line}&back_url={$base64_current_url}">{$data.message}</a></td>
<td valign="top" align="right" style="border-bottom:1px #DDDDDD solid;font-size:13px;padding: 3px 5px 3px 3px; color:{if !$data.inactive}black{else}gray{/if};" width="40px" nowrap>{$data.data}</td>
<td valign="middle" align="left" style="border-bottom:1px #DDDDDD solid;">
<div id='bg_divt_{$data.arhive}_{$data.id}' style="background-color:{$data.color};width:9px;" > </div>
{* Идиотизм связанный с strict mode невозможность задать div 100% выстоы *}
<script>
st=document.getElementById('bg_divt_{$data.arhive}_{$data.id}');
st.style.height=(st.parentNode.offsetHeight-10)+"px";
</script>
</td>
</tr>
{/foreach}
</table>
{foreach from=$error_array item=data}
<div style="border-bottom:1px #DDDDDD solid; padding:3px; font-size:12px; color:black">
<table width="100%">
<tr>
<td valign="top" align="left" style="color:#333">{$data.message}</td>
</tr>
</table>
</div>
{/foreach}
<div style="margin:7px 0 0 0; text-align:right;"><a style="padding:3px;" href="report.php?id={$archive_id}">Посмотреть все</a></div>
</td>
</tr>
</table>
<div style="height:25px;">{* Дырка внизу *}</div>
Из кода я удалил все, что не связано со стандартной конфигурацией, надеюсь без ущерба его работоспособности. Если будет выдавать ошибку - пишите, попробуем разобраться. Теперь о файле, который, собственно, формирует все события. Называется json-events.php. Изучив его строение, можно самостоятельно создать выдачу событий из других таблиц по аналогии, например, с
Заданиями (см. содержимое файла, чтобы понять о чем речь)
О размещении. В корневом каталоге создайте папку
cb_modules. Все скрипты лежать в ней. Календарь - в папке
fullcalendar. Файлы и плагины jquery в одноименной папке -
jquery, плагин qTip - создает форматируемые подсказки вместо стандартного title - в папке
qTip. Приложения:
вся папка для календаря -
fullcalendar.rar 51,63К
68 Количество загрузок:,
папка с jquery -
jquery.rar 81,94К
45 Количество загрузок:. Обращаю внимание, что плагин fullcallenar дружит только с jquery версии не старше 1.5.2, именно она и размещена в архиве,
пака qTip -
qTip.rar 45,14К
50 Количество загрузок:
Чуть не забыл про еще один модуль
mobile.php 2,29К
35 Количество загрузок: - вносит специальные теги для номеров телефонов, делая их активными для мобильных устройств.
Все это распаковать в cb_modules и вроде все.
Пользуйтесь.
Успехов.
0
desktop.jpg 142,97К
801 Количество загрузок:
?
