Календарь. Управление событиями в личном кабинете
Вывод календаря осуществляется через отдельный режим компонента Таблица.
Позволяет выводить любые данные в календаре, редактировать их, добавлять новые события.
Как реализовать календарь?
0. Создаем таблицу
1. в SELECT 3 GetItems ставим ViewType='calendar' и настраиваем параметр CalendarOptions (все настройки календаря в едином JSON):
select 'calendar' ViewType,
'{
"defaultView": "timeGridWeek",
"firstDay":1,
"defaultDate": "2020-05-28",
"droppable": true,
"editable": true,
"locale": "ru",
"rerenderDelay": 50,
"timeZone": "UTC",
"displayEventTime": true,
"header": {
"left": "title",
"center": "dayGridMonth,timeGridWeek,timeGridDay,list",
"right": "prev,next today myCustomButton"
},
"formCreate": {
"itemID":"0", "code" : "newEvent", "big": 0, "title": "Новое событие", "btnText":"Создать", "slideout":1
},
"remove":1
}' calendarOptions,
1 hideTitleCount
Ключевые настройки календаря:
- defaultDate - задает дату, на которой будет открыт календарь.
- defaultView - какой по умолчанию вид выводить при загрузке timeGridWeek, list, dayGridMonth
- droppable - если 1, то на календарь можно кидать специальные элементы для добавления новых событий.
- editable - если 1, то можно менять параметры события (переносить, или менять длительность).
- formCreate - задает настройки формы создания события (по клику на пустое поле).
- height (auto,parent или число), contentHeight, aspectRatio - управляют высотой календаря, соотношением ширины/высоты и вертикальным скроллингом.
- locale - задает язык календаря
- remove - если 1, то будет появляться при наведении на событие кнопка удаления.
- timezone - задает какой будет сдвиг по времени (часовой пояс), UTC, locale или название пояса
Описание всех параметров JSON календаря (т.е. то, что прописывается в calendarOptions): https://fullcalendar.io/docs
2. в SELECT 1 вывести данные событий в виде следующей таблицы:
declare @result TABLE (itemID int, title nvarchar(256), start nvarchar(64), [end] nvarchar(64),
color nvarchar(64), textColor nvarchar(64), borderColor nvarchar(64), tooltip nvarchar(max),
url nvarchar(256), className nvarchar(128), allDay bit, rendering nvarchar(128),
formCode nvarchar(128), formBig bit, formTitle nvarchar(128), formBtnText nvarchar(128), formSlideout bit, disableModify bit
)
insert into @result
--'2020-05-28T07:19:00' convert(nvarchar, start, 120)
select id itemID, title title, convert(nvarchar, start, 120) start, convert(nvarchar, [end], 120) [end], '#5f3' color, '' textColor, '' borderColor, '' tooltip,
url url, '' className, allDay allDay, '' rendering, 'editEvent' formCode, 0 formBig, 'Изменить событие' formTitle, 'Сохранить' formBtnText, 1 formSlideout, 0 disableModify
from as_events
where username = @username
Параметры в SELECT 1 (колонки в таблице через веб-интерфейс создавать не надо):
- allDay - если 1, то событие будет на весь день
- borderColor - свет границы события
- className - CSS класс для события
- color - цвет подложки события
- disableModify - если 1, то событие нельзя будет перетягивать и менять длительность
- end - завершение события (2020-05-28T07:19:00)
- formBig - если 1, то форма редактирования будет большой (на весь экран)
- formBtnText - кнопка формы в модальном окне
- formCode - код формы редактирования события.
- formSlideout - если 1, форма будет открываться прикрепленной к правой стороне браузера
- formTitle - заголовок формы в модальном окне
- itemID - ID события
- rendering - если background, то событие будет фоновым цветом обозначено на календаре.
- start - начало события (2020-05-28T07:19:00)
- textColor - цвет текста события
- title - заголовок события
- tooltip - подсказка к событию при наведении курсора
- url - если указан, то по клику на событие будет переход на URL
Как сделать изменение событий и перетаскивание типовых событий в календарь
В CalendarOptions ставим editable=1 (для изменения дат события через перетаскивание и растяжение) и droppable=1 (добавление нового события путем перетаскивания элемента извне).
Реализуем updateField процедуру:
CREATE PROCEDURE [dbo].[crud_tst-calendar_updateField]
@itemID int,
@field nvarchar(64),
@value nvarchar(max),
@username nvarchar(64)
AS
BEGIN
-- обновление поля таблицы
-- для приведения типов используйте try_cast(@value as int), Для даты try_convert(date, @value, 104)
declare @start nvarchar(256), @end nvarchar(256), @additionalData nvarchar(256), @startDate datetime, @endDate datetime
select @start = dbo.str_splitPart(@value, '||', 1)
select @additionalData = dbo.str_splitPart(@value, '||', 2)
select @end = dbo.str_splitPart(@additionalData, '||', 1)
select @additionalData = dbo.str_splitPart(@additionalData, '||', 2)
select @startDate =cast(CONVERT(datetime2, @start, 126) as datetime)
select @endDate =cast(CONVERT(datetime2, @end, 126) as datetime)
if(@field='event') begin
if(@itemID>0) begin
-- это редактирование дат элемента
update as_events
set start = @startDate, [end] = @endDate
where id = @itemID and username=@username
end else begin
-- это добавление элемента через перетаскивание (additionalData=title||itemID от внешнего фильтра. это не itemID существующего события)
declare @title nvarchar(128) ='', @outerItemID nvarchar(256)
select @title = dbo.str_splitPart(@additionalData, '||', 1)
select @outerItemID = dbo.str_splitPart(@additionalData, '||', 2)
insert into as_events(start, [end], title, [desc], url, allDay, username)
values (@startDate, @endDate, @title, '', '', 0, @username)
end
end else begin
select 'Невалидный код свойства' Msg, 0 Result
return
end
select '' Msg, 1 Result
END
Примечание:
- Эта процедура работает как на изменение элементов, так и на добавление новых (тех, что добавили через drop извне)
- В value передается start||end||additionalData. Если это обновление, то additionalData пустое. Если создание, то additionalData=title||outerItemID. outerItemID приходит из внешнего элемента (параметры data-itemID), который переносится на календарь.
- Верстка для элементов, которые мы планируем перетаскивать на календарь:
<div id="as-calendar-dropCont">
<div class="as-calendar-dropItem my-2 p-2 border" data-itemid="0" data-event="{ "title": "Событие на 2 часа", "duration": "02:00" }">Добавить внешнее типовое событие</div>
<div class="as-calendar-dropItem my-2 p-2 border" data-itemid="123" data-event="{ "title": "Событие на 5 часов", "duration": "05:00", "color": "#3f3"}">Еще 1 событие</div>
</div>
- Контейнер обязательно с id=as-calendar-dropCont
- Элементы имеют класс as-calendar-dropItem и data-itemID (это значение позволяет передать в процедуру сохранения события связь с каким-то внешним объектом, например Заказом).
- В data-event задаем в виде JSON настройки события. Ключевые параметры: title, duration, color.
Как сделать добавление событий в календарь
Для этого указываем в CalendarOptions настройки для formCreatе.
Создаем форму и обрабатываем входящие параметры для создания события.
Пример процедуры сохранения:
CREATE PROCEDURE [dbo].[fm_newEvent_saveItem]
@username nvarchar(256),
@itemID nvarchar(256),
@parameters ExtendedDictionaryParameter READONLY
-- либо перечислить все поля в форме (@fieldcode и т.д.)
AS
BEGIN
-- сохраняем форму (добавление/обновление некой сущности)
declare @filterItemID nvarchar(128), @dt nvarchar(256), @start datetime -- '2020-05-27T10:00:00+03:00'
set @filterItemID = dbo.str_splitPart (@itemID, '_', 1)
set @dt = dbo.str_splitPart (@itemID, '_',2)
select @start =cast(CONVERT(datetime2, @dt, 126) as datetime)
declare @ptitle nvarchar(max)
select @ptitle = Value2 from @parameters where [key]='title'
declare @pdesc nvarchar(max)
select @pdesc = Value2 from @parameters where [key]='desc'
declare @pallDay nvarchar(max)
select @pallDay = Value2 from @parameters where [key]='allDay'
declare @phours float, @minutes int
select @phours = try_cast(replace(Value2, ',', '.') as float) from @parameters where [key]='hours'
if(@phours is null) set @phours = 1
set @minutes = cast(@phours*60 as int)
-- set @pdesc = cast(@minutes as nvarchar) + ' ' + cast(@phours as nvarchar)
insert into as_events(start, [end], title, [desc], url, allDay, username)
values (@start, dateadd(minute, @minutes, @start), @ptitle, @pdesc, '', iif(@pallDay='True', 1,0), @username)
-- SELECT 1 (Result, Msg, SuccessUrl, HideFormAfterSubmit, RefreshContainer)
select 1 Result, 'Сохранено' Msg, '' SuccessUrl, 1 HideFormAfterSubmit, '.calendarCont' RefreshContainer
END
После обновления обновляем через RefreshContainer календарь (для этого его сниппет помещаем в какой-то дополнительный контейнер).
Как сделать редактирование событий в календаре
Для этого указываем у элемента параметры формы для редактирования (это параметры, которые начинаются с form).
Можно сделать так, что разные события будут обрабатываться разными формами редактирования.
В SELECT 1 таблицы указываем следущие поля (помимо основных полей, указанных выше).
- formBig - если 1, то форма редактирования будет большой (на весь экран)
- formBtnText - кнопка формы в модальном окне
- formCode - код формы редактирования события (например, editEvent).
- formTitle - заголовок формы в модальном окне
- itemID - это значение будет передаваться в itemID формы.
Пример SQL сохранения формы редактирования:
CREATE PROCEDURE [dbo].[fm_editEvent_saveItem]
@username nvarchar(256),
@itemID int,
@parameters ExtendedDictionaryParameter READONLY
-- либо перечислить все поля в форме (@fieldcode и т.д.)
AS
BEGIN
declare @ptitle nvarchar(max)
select @ptitle = Value2 from @parameters where [key]='title'
declare @pdesc nvarchar(max)
select @pdesc = Value2 from @parameters where [key]='desc'
declare @pallDay nvarchar(max)
select @pallDay = Value2 from @parameters where [key]='allDay'
update as_events
set title = @ptitle,
[desc] = @pdesc,
allDay = iif(@pallDay='True', 1, 0)
where id = @itemID and username=@username
-- SELECT 1 (Result, Msg, SuccessUrl, HideFormAfterSubmit, RefreshContainer)
select 1 Result, 'Сохранено' Msg, '' SuccessUrl, 1 HideFormAfterSubmit, '.calendarCont' RefreshContainer
END
Удаление события из календаря
Для этого устанавливаем в calendarOptions remove=1
При этом при наведении на событие будет появляться иконка удаления.
Реализуем процедуру removeItem у таблицы (календаря):
CREATE PROCEDURE [dbo].[crud_tst-calendar_deleteItem]
@itemID int,
@username nvarchar(32)
AS
begin
SET NOCOUNT off ;
-- удаление элемента
delete from as_events where id = @itemID and username=@username
if (@@ROWCOUNT > 0) begin
select '' Msg, 1 Result
end else begin
select 'Не получилось удалить событие' Msg, 0 Result
end
end
Как раскрасить в цвета определенные дни в календаре (например, выходные)
Через JSON настройки
events: [
{
daysOfWeek: [0,6], //Sundays and saturdays
rendering:"background",
color: "#ff9f89",
overLap: false,
allDay: true
}]
Подробнее - https://stackoverflow.com/questions/13918387/color-weekend-at-fullcalendar
Дополнительные материалы
- Как добавить событие в календарь Google
- Как добавить событие в календарь Google
- Горячие клавиши для событий
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты Работа со статусами. Управление статусами заявок, сущностей в личных кабинетах пользователей Работа с таблицами. Создание таблиц на сайте Работа с формами Работа с дашбордами личных кабинетов Диаграммы и графики в личном кабинете на сайте Календарь. Управление событиями в личном кабинете Терминал - рабочее пространство с окнами и вкладками
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы