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

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

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

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

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

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

Примечание: 

  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. Горячие клавиши для событий

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

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

Falcon Space

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

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

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

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

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

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

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