@@ -26,6 +26,10 @@ import { default as Form } from "antd/es/form";
2626import { default as Input } from "antd/es/input" ;
2727import { trans , getCalendarLocale } from "../../i18n/comps" ;
2828import { createRef , useContext , useRef , useState } from "react" ;
29+ import resourceTimelinePlugin from "@fullcalendar/resource-timeline" ;
30+ import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid" ;
31+ import adaptivePlugin from "@fullcalendar/adaptive" ;
32+
2933import FullCalendar from "@fullcalendar/react" ;
3034import dayGridPlugin from "@fullcalendar/daygrid" ;
3135import timeGridPlugin from "@fullcalendar/timegrid" ;
@@ -35,7 +39,8 @@ import allLocales from "@fullcalendar/core/locales-all";
3539import { EventContentArg , DateSelectArg } from "@fullcalendar/core" ;
3640import momentPlugin from "@fullcalendar/moment" ;
3741import {
38- DefaultViewOptions ,
42+ DefaultWithFreeViewOptions ,
43+ DefaultWithPremiumViewOptions ,
3944FirstDayOptions ,
4045Wrapper ,
4146Event ,
@@ -52,20 +57,28 @@ import {
5257} from "./calendarConstants" ;
5358import dayjs from "dayjs" ;
5459
60+ function filterViews ( ) { }
61+
5562const childrenMap = {
5663events :jsonValueExposingStateControl ( "events" , defaultData ) ,
5764onEvent :ChangeEventHandlerControl ,
5865
5966editable :withDefault ( BoolControl , true ) ,
6067defaultDate :withDefault ( StringControl , "{{ new Date() }}" ) ,
61- defaultView :dropdownControl ( DefaultViewOptions , "timeGridWeek" ) ,
68+ defaultFreeView :dropdownControl ( DefaultWithFreeViewOptions , "timeGridWeek" ) ,
69+ defaultPremiumView :dropdownControl (
70+ DefaultWithPremiumViewOptions ,
71+ "timeGridWeek"
72+ ) ,
73+
6274firstDay :dropdownControl ( FirstDayOptions , "1" ) ,
6375showEventTime :withDefault ( BoolControl , true ) ,
6476showWeekends :withDefault ( BoolControl , true ) ,
6577showAllDay :withDefault ( BoolControl , true ) ,
6678dayMaxEvents :withDefault ( NumberControl , 2 ) ,
6779eventMaxStack :withDefault ( NumberControl , 0 ) ,
6880style :styleControl ( CalendarStyle ) ,
81+ licenceKey :withDefault ( StringControl , "" ) ,
6982} ;
7083
7184let CalendarBasicComp = ( function ( ) {
@@ -83,14 +96,17 @@ let CalendarBasicComp = (function () {
8396start :dayjs ( item . start , DateParser ) . format ( ) ,
8497end :dayjs ( item . end , DateParser ) . format ( ) ,
8598allDay :item . allDay ,
86- color :isValidColor ( item . color || "" ) ?item . color :theme ?. theme ?. primary ,
99+ color :isValidColor ( item . color || "" )
100+ ?item . color
101+ :theme ?. theme ?. primary ,
87102 ...( item . groupId ?{ groupId :item . groupId } :null ) ,
88103} ;
89104} ) ;
90105
91106const {
92107 defaultDate,
93- defaultView,
108+ defaultFreeView,
109+ defaultPremiumView,
94110 showEventTime,
95111 showWeekends,
96112 showAllDay,
@@ -99,13 +115,19 @@ let CalendarBasicComp = (function () {
99115 style,
100116 firstDay,
101117 editable,
118+ licenceKey,
102119} = props ;
103120
104121function renderEventContent ( eventInfo :EventContentArg ) {
105122const isList = eventInfo . view . type === "listWeek" ;
106123let sizeClass = "" ;
107- if ( [ ViewType . WEEK , ViewType . DAY ] . includes ( eventInfo . view . type as ViewType ) ) {
108- const duration = dayjs ( eventInfo . event . end ) . diff ( dayjs ( eventInfo . event . start ) , "minutes" ) ;
124+ if (
125+ [ ViewType . WEEK , ViewType . DAY ] . includes ( eventInfo . view . type as ViewType )
126+ ) {
127+ const duration = dayjs ( eventInfo . event . end ) . diff (
128+ dayjs ( eventInfo . event . start ) ,
129+ "minutes"
130+ ) ;
109131if ( duration <= 30 || eventInfo . event . allDay ) {
110132sizeClass = "small" ;
111133} else if ( duration <= 60 ) {
@@ -137,7 +159,9 @@ let CalendarBasicComp = (function () {
137159onClick = { ( e ) => {
138160e . stopPropagation ( ) ;
139161props . onEvent ( "change" ) ;
140- const event = events . filter ( ( item :EventType ) => item . id !== eventInfo . event . id ) ;
162+ const event = events . filter (
163+ ( item :EventType ) => item . id !== eventInfo . event . id
164+ ) ;
141165props . events . onChange ( event ) ;
142166} }
143167onMouseDown = { ( e ) => {
@@ -195,7 +219,9 @@ let CalendarBasicComp = (function () {
195219} ;
196220
197221const showModal = ( event :EventType , ifEdit :boolean ) => {
198- const modalTitle = ifEdit ?trans ( "calendar.editEvent" ) :trans ( "calendar.creatEvent" ) ;
222+ const modalTitle = ifEdit
223+ ?trans ( "calendar.editEvent" )
224+ :trans ( "calendar.creatEvent" ) ;
199225form && form . setFieldsValue ( event ) ;
200226const eventId = editEvent . current ?. id ;
201227CustomModal . confirm ( {
@@ -209,14 +235,18 @@ let CalendarBasicComp = (function () {
209235</ Tooltip >
210236}
211237name = "id"
212- rules = { [ { required :true , message :trans ( "calendar.eventIdRequire" ) } ] }
238+ rules = { [
239+ { required :true , message :trans ( "calendar.eventIdRequire" ) } ,
240+ ] }
213241>
214242< Input />
215243</ Form . Item >
216244< Form . Item
217245label = { trans ( "calendar.eventName" ) }
218246name = "title"
219- rules = { [ { required :true , message :trans ( "calendar.eventNameRequire" ) } ] }
247+ rules = { [
248+ { required :true , message :trans ( "calendar.eventNameRequire" ) } ,
249+ ] }
220250>
221251< Input />
222252</ Form . Item >
@@ -239,9 +269,13 @@ let CalendarBasicComp = (function () {
239269form . submit ( ) ;
240270return form . validateFields ( ) . then ( ( ) => {
241271const { id, groupId, color, title= "" } = form . getFieldsValue ( ) ;
242- const idExist = props . events . value . findIndex ( ( item :EventType ) => item . id === id ) ;
272+ const idExist = props . events . value . findIndex (
273+ ( item :EventType ) => item . id === id
274+ ) ;
243275if ( idExist > - 1 && id !== eventId ) {
244- form . setFields ( [ { name :"id" , errors :[ trans ( "calendar.eventIdExist" ) ] } ] ) ;
276+ form . setFields ( [
277+ { name :"id" , errors :[ trans ( "calendar.eventIdExist" ) ] } ,
278+ ] ) ;
245279throw new Error ( ) ;
246280}
247281if ( ifEdit ) {
@@ -287,6 +321,10 @@ let CalendarBasicComp = (function () {
287321} catch ( error ) {
288322initialDate = undefined ;
289323}
324+ let defaultView = defaultFreeView ;
325+ if ( licenceKey != "" ) {
326+ defaultView = defaultPremiumView ;
327+ }
290328
291329return (
292330< Wrapper
@@ -306,7 +344,16 @@ let CalendarBasicComp = (function () {
306344locale = { getCalendarLocale ( ) }
307345locales = { allLocales }
308346firstDay = { Number ( firstDay ) }
309- plugins = { [ dayGridPlugin , timeGridPlugin , interactionPlugin , listPlugin , momentPlugin ] }
347+ plugins = { [
348+ dayGridPlugin ,
349+ timeGridPlugin ,
350+ interactionPlugin ,
351+ listPlugin ,
352+ momentPlugin ,
353+ resourceTimelinePlugin ,
354+ resourceTimeGridPlugin ,
355+ adaptivePlugin ,
356+ ] }
310357headerToolbar = { headerToolbar }
311358moreLinkClick = { ( info ) => {
312359let left = 0 ;
@@ -319,15 +366,19 @@ let CalendarBasicComp = (function () {
319366}
320367} else {
321368if ( info . allDay ) {
322- left = ele . offsetParent ?. parentElement ?. parentElement ?. offsetLeft || 0 ;
369+ left =
370+ ele . offsetParent ?. parentElement ?. parentElement ?. offsetLeft ||
371+ 0 ;
323372} else {
324373left =
325- ele . offsetParent ?. parentElement ?. parentElement ?. parentElement ?. offsetLeft || 0 ;
374+ ele . offsetParent ?. parentElement ?. parentElement ?. parentElement
375+ ?. offsetLeft || 0 ;
326376}
327377}
328378setLeft ( left ) ;
329379} }
330380buttonText = { buttonText }
381+ schedulerLicenseKey = { licenceKey }
331382views = { views }
332383eventClassNames = { ( ) => ( ! showEventTime ?"no-time" :"" ) }
333384slotLabelFormat = { slotLabelFormat }
@@ -346,7 +397,9 @@ let CalendarBasicComp = (function () {
346397eventContent = { renderEventContent }
347398select = { ( info ) => handleCreate ( info ) }
348399eventClick = { ( info ) => {
349- const event = events . find ( ( item :EventType ) => item . id === info . event . id ) ;
400+ const event = events . find (
401+ ( item :EventType ) => item . id === info . event . id
402+ ) ;
350403editEvent . current = event ;
351404setTimeout ( ( ) => {
352405editEvent . current = undefined ;
@@ -385,10 +438,18 @@ let CalendarBasicComp = (function () {
385438) ;
386439} )
387440. setPropertyViewFn ( ( children ) => {
441+ let licence = children . licenceKey . getView ( ) ;
388442return (
389443< >
390- < Section name = { sectionNames . basic } > { children . events . propertyView ( { } ) } </ Section >
391- < Section name = { sectionNames . interaction } > { children . onEvent . getPropertyView ( ) } </ Section >
444+ < Section name = { sectionNames . basic } >
445+ { children . events . propertyView ( { } ) }
446+ </ Section >
447+ < Section name = { sectionNames . interaction } >
448+ { children . licenceKey . propertyView ( {
449+ label :trans ( "calendar.licence" ) ,
450+ } ) }
451+ { children . onEvent . getPropertyView ( ) }
452+ </ Section >
392453< Section name = { sectionNames . advanced } >
393454{ children . editable . propertyView ( {
394455label :trans ( "calendar.editable" ) ,
@@ -397,10 +458,15 @@ let CalendarBasicComp = (function () {
397458label :trans ( "calendar.defaultDate" ) ,
398459tooltip :trans ( "calendar.defaultDateTooltip" ) ,
399460} ) }
400- { children . defaultView . propertyView ( {
401- label :trans ( "calendar.defaultView" ) ,
402- tooltip :trans ( "calendar.defaultViewTooltip" ) ,
403- } ) }
461+ { licence == ""
462+ ?children . defaultFreeView . propertyView ( {
463+ label :trans ( "calendar.defaultView" ) ,
464+ tooltip :trans ( "calendar.defaultViewTooltip" ) ,
465+ } )
466+ :children . defaultPremiumView . propertyView ( {
467+ label :trans ( "calendar.defaultView" ) ,
468+ tooltip :trans ( "calendar.defaultViewTooltip" ) ,
469+ } ) }
404470{ children . firstDay . propertyView ( {
405471label :trans ( "calendar.startWeek" ) ,
406472} ) }
@@ -424,8 +490,12 @@ let CalendarBasicComp = (function () {
424490tooltip :trans ( "calendar.eventMaxStackTooltip" ) ,
425491} ) }
426492</ Section >
427- < Section name = { sectionNames . layout } > { hiddenPropertyView ( children ) } </ Section >
428- < Section name = { sectionNames . style } > { children . style . getPropertyView ( ) } </ Section >
493+ < Section name = { sectionNames . layout } >
494+ { hiddenPropertyView ( children ) }
495+ </ Section >
496+ < Section name = { sectionNames . style } >
497+ { children . style . getPropertyView ( ) }
498+ </ Section >
429499</ >
430500) ;
431501} )