Календарь. Управление событиями

Смотреть пример календаря

Вывод календаря осуществляется через отдельный режим компонента Таблица.

Позволяет выводить любые данные в календаре, редактировать их, добавлять новые события. 

Как реализовать календарь?

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 - свет границы события, например, #ffffaa
• className - CSS класс для события (для возможной стилизации элемента, например text-danger).
• color - цвет подложки события, например, #ffffaa
• 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 - цвет текста события, например, #ffffaa
• 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

Примечание: 

1. Эта процедура работает как на изменение элементов, так и на добавление новых (тех, что добавили через drop извне)
2. В value передается start||end||additionalData. Если это обновление, то additionalData пустое. Если создание, то additionalData=title||outerItemID. outerItemID приходит из внешнего элемента (параметры data-itemID), который переносится на календарь. 
3. Верстка для элементов, которые мы планируем перетаскивать на календарь: 

<div id="as-calendar-dropCont">
            <div class="as-calendar-dropItem my-2 p-2 border" data-itemid="0" data-event="{ &quot;title&quot;: &quot;Событие на 2 часа&quot;, &quot;duration&quot;: &quot;02:00&quot; }">Добавить внешнее типовое событие</div>
            <div class="as-calendar-dropItem my-2 p-2 border" data-itemid="123" data-event="{ &quot;title&quot;: &quot;Событие на 5 часов&quot;, &quot;duration&quot;: &quot;05:00&quot;, &quot;color&quot;: &quot;#3f3&quot;}">Еще 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

Дополнительные материалы

1. Как добавить событие в календарь Google
2. Как добавить событие в календарь Google
3. Горячие клавиши для событий