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

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

Отдельный режим компонента Таблица.

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

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

Ключевые настройки календаря: 

  • formCreate - задает настройки формы создания события (по клику на пустое поле).
  • remove - если 1, то будет появляться при наведении на событие кнопка удаления. 
  • droppable  - если 1, то на календарь можно кидать специальные элементы для добавления новых событий. 
  • editable - если 1, то можно менять параметры события (переносить, или менять длительность). 
  • timezone - задает какой будет сдвиг по времени (часовой пояс), UTC, locale или название пояса
  • locale - задает язык календаря 
  • defaultDate - задает дату, на которой будет открыт календарь. 
  • defaultView - какой по умолчанию вид выводить при загрузке timeGridWeek, list, dayGridMonth
  • height (auto,parent или число), contentHeight, aspectRatio - управляют высотой календаря, соотношением ширины/высоты и вертикальным скроллингом.

Описание всех параметров JSON календаря: 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 (колонки в таблице через веб-интерфейс создавать не надо):

  • itemID - ID события
  • title - заголовок события
  • start - начало события (2020-05-28T07:19:00)
  • end - завершение события (2020-05-28T07:19:00)
  • color - цвет подложки события
  • textColor - цвет текста события
  • borderColor - свет границы события
  • tooltip - подсказка к событию при наведении курсора
  • url - если указан, то по клику на событие будет переход на URL
  • className - CSS класс для события
  • allDay - если 1, то событие будет на весь день
  • rendering - если background, то событие будет фоновым цветом обозначено на календаре.
  • formCode - код формы редактирования события.
  • formBig - если 1, то форма редактирования будет большой (на весь экран)
  • formTitle - заголовок формы в модальном окне
  • formBtnText - кнопка формы в модальном окне
  • formSlideout - если 1, форма будет открываться прикрепленной к правой стороне браузера
  • disableModify - если 1, то событие нельзя будет перетягивать и менять длительность

Как сделать изменение событий и перетаскивание типовых событий в календарь 

В 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

Как сделать редактирование событий в календаре.

Для этого указываем у элемента параметры формы для редактирования (это параметры, которые начинаются с form).

Можно сделать так, что разные события будут обрабатываться разными формами редактирования. 

После обновления обновляем через RefreshContainer календарь (для этого его сниппет помещаем в какой-то дополнительный контейнер).

Пример 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

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

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

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Задать вопрос, обсудить проект
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.