@@ -26,6 +26,10 @@ import { default as Form } from "antd/es/form";
26
26
import { default as Input } from "antd/es/input" ;
27
27
import { trans , getCalendarLocale } from "../../i18n/comps" ;
28
28
import { 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
+
29
33
import FullCalendar from "@fullcalendar/react" ;
30
34
import dayGridPlugin from "@fullcalendar/daygrid" ;
31
35
import timeGridPlugin from "@fullcalendar/timegrid" ;
@@ -35,7 +39,8 @@ import allLocales from "@fullcalendar/core/locales-all";
35
39
import { EventContentArg , DateSelectArg } from "@fullcalendar/core" ;
36
40
import momentPlugin from "@fullcalendar/moment" ;
37
41
import {
38
- DefaultViewOptions ,
42
+ DefaultWithFreeViewOptions ,
43
+ DefaultWithPremiumViewOptions ,
39
44
FirstDayOptions ,
40
45
Wrapper ,
41
46
Event ,
@@ -52,20 +57,28 @@ import {
52
57
} from "./calendarConstants" ;
53
58
import dayjs from "dayjs" ;
54
59
60
+ function filterViews ( ) { }
61
+
55
62
const childrenMap = {
56
63
events : jsonValueExposingStateControl ( "events" , defaultData ) ,
57
64
onEvent : ChangeEventHandlerControl ,
58
65
59
66
editable : withDefault ( BoolControl , true ) ,
60
67
defaultDate : withDefault ( StringControl , "{{ new Date() }}" ) ,
61
- defaultView : dropdownControl ( DefaultViewOptions , "timeGridWeek" ) ,
68
+ defaultFreeView : dropdownControl ( DefaultWithFreeViewOptions , "timeGridWeek" ) ,
69
+ defaultPremiumView : dropdownControl (
70
+ DefaultWithPremiumViewOptions ,
71
+ "timeGridWeek"
72
+ ) ,
73
+
62
74
firstDay : dropdownControl ( FirstDayOptions , "1" ) ,
63
75
showEventTime : withDefault ( BoolControl , true ) ,
64
76
showWeekends : withDefault ( BoolControl , true ) ,
65
77
showAllDay : withDefault ( BoolControl , true ) ,
66
78
dayMaxEvents : withDefault ( NumberControl , 2 ) ,
67
79
eventMaxStack : withDefault ( NumberControl , 0 ) ,
68
80
style : styleControl ( CalendarStyle ) ,
81
+ licenceKey : withDefault ( StringControl , "" ) ,
69
82
} ;
70
83
71
84
let CalendarBasicComp = ( function ( ) {
@@ -83,14 +96,17 @@ let CalendarBasicComp = (function () {
83
96
start : dayjs ( item . start , DateParser ) . format ( ) ,
84
97
end : dayjs ( item . end , DateParser ) . format ( ) ,
85
98
allDay : item . allDay ,
86
- color : isValidColor ( item . color || "" ) ? item . color : theme ?. theme ?. primary ,
99
+ color : isValidColor ( item . color || "" )
100
+ ? item . color
101
+ : theme ?. theme ?. primary ,
87
102
...( item . groupId ? { groupId : item . groupId } : null ) ,
88
103
} ;
89
104
} ) ;
90
105
91
106
const {
92
107
defaultDate,
93
- defaultView,
108
+ defaultFreeView,
109
+ defaultPremiumView,
94
110
showEventTime,
95
111
showWeekends,
96
112
showAllDay,
@@ -99,13 +115,19 @@ let CalendarBasicComp = (function () {
99
115
style,
100
116
firstDay,
101
117
editable,
118
+ licenceKey,
102
119
} = props ;
103
120
104
121
function renderEventContent ( eventInfo : EventContentArg ) {
105
122
const isList = eventInfo . view . type === "listWeek" ;
106
123
let 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
+ ) ;
109
131
if ( duration <= 30 || eventInfo . event . allDay ) {
110
132
sizeClass = "small" ;
111
133
} else if ( duration <= 60 ) {
@@ -137,7 +159,9 @@ let CalendarBasicComp = (function () {
137
159
onClick = { ( e ) => {
138
160
e . stopPropagation ( ) ;
139
161
props . 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
+ ) ;
141
165
props . events . onChange ( event ) ;
142
166
} }
143
167
onMouseDown = { ( e ) => {
@@ -195,7 +219,9 @@ let CalendarBasicComp = (function () {
195
219
} ;
196
220
197
221
const 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" ) ;
199
225
form && form . setFieldsValue ( event ) ;
200
226
const eventId = editEvent . current ?. id ;
201
227
CustomModal . confirm ( {
@@ -209,14 +235,18 @@ let CalendarBasicComp = (function () {
209
235
</ Tooltip >
210
236
}
211
237
name = "id"
212
- rules = { [ { required : true , message : trans ( "calendar.eventIdRequire" ) } ] }
238
+ rules = { [
239
+ { required : true , message : trans ( "calendar.eventIdRequire" ) } ,
240
+ ] }
213
241
>
214
242
< Input />
215
243
</ Form . Item >
216
244
< Form . Item
217
245
label = { trans ( "calendar.eventName" ) }
218
246
name = "title"
219
- rules = { [ { required : true , message : trans ( "calendar.eventNameRequire" ) } ] }
247
+ rules = { [
248
+ { required : true , message : trans ( "calendar.eventNameRequire" ) } ,
249
+ ] }
220
250
>
221
251
< Input />
222
252
</ Form . Item >
@@ -239,9 +269,13 @@ let CalendarBasicComp = (function () {
239
269
form . submit ( ) ;
240
270
return form . validateFields ( ) . then ( ( ) => {
241
271
const { 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
+ ) ;
243
275
if ( idExist > - 1 && id !== eventId ) {
244
- form . setFields ( [ { name : "id" , errors : [ trans ( "calendar.eventIdExist" ) ] } ] ) ;
276
+ form . setFields ( [
277
+ { name : "id" , errors : [ trans ( "calendar.eventIdExist" ) ] } ,
278
+ ] ) ;
245
279
throw new Error ( ) ;
246
280
}
247
281
if ( ifEdit ) {
@@ -287,6 +321,10 @@ let CalendarBasicComp = (function () {
287
321
} catch ( error ) {
288
322
initialDate = undefined ;
289
323
}
324
+ let defaultView = defaultFreeView ;
325
+ if ( licenceKey != "" ) {
326
+ defaultView = defaultPremiumView ;
327
+ }
290
328
291
329
return (
292
330
< Wrapper
@@ -306,7 +344,16 @@ let CalendarBasicComp = (function () {
306
344
locale = { getCalendarLocale ( ) }
307
345
locales = { allLocales }
308
346
firstDay = { 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
+ ] }
310
357
headerToolbar = { headerToolbar }
311
358
moreLinkClick = { ( info ) => {
312
359
let left = 0 ;
@@ -319,15 +366,19 @@ let CalendarBasicComp = (function () {
319
366
}
320
367
} else {
321
368
if ( info . allDay ) {
322
- left = ele . offsetParent ?. parentElement ?. parentElement ?. offsetLeft || 0 ;
369
+ left =
370
+ ele . offsetParent ?. parentElement ?. parentElement ?. offsetLeft ||
371
+ 0 ;
323
372
} else {
324
373
left =
325
- ele . offsetParent ?. parentElement ?. parentElement ?. parentElement ?. offsetLeft || 0 ;
374
+ ele . offsetParent ?. parentElement ?. parentElement ?. parentElement
375
+ ?. offsetLeft || 0 ;
326
376
}
327
377
}
328
378
setLeft ( left ) ;
329
379
} }
330
380
buttonText = { buttonText }
381
+ schedulerLicenseKey = { licenceKey }
331
382
views = { views }
332
383
eventClassNames = { ( ) => ( ! showEventTime ? "no-time" : "" ) }
333
384
slotLabelFormat = { slotLabelFormat }
@@ -346,7 +397,9 @@ let CalendarBasicComp = (function () {
346
397
eventContent = { renderEventContent }
347
398
select = { ( info ) => handleCreate ( info ) }
348
399
eventClick = { ( 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
+ ) ;
350
403
editEvent . current = event ;
351
404
setTimeout ( ( ) => {
352
405
editEvent . current = undefined ;
@@ -385,10 +438,18 @@ let CalendarBasicComp = (function () {
385
438
) ;
386
439
} )
387
440
. setPropertyViewFn ( ( children ) => {
441
+ let licence = children . licenceKey . getView ( ) ;
388
442
return (
389
443
< >
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 >
392
453
< Section name = { sectionNames . advanced } >
393
454
{ children . editable . propertyView ( {
394
455
label : trans ( "calendar.editable" ) ,
@@ -397,10 +458,15 @@ let CalendarBasicComp = (function () {
397
458
label : trans ( "calendar.defaultDate" ) ,
398
459
tooltip : trans ( "calendar.defaultDateTooltip" ) ,
399
460
} ) }
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
+ } ) }
404
470
{ children . firstDay . propertyView ( {
405
471
label : trans ( "calendar.startWeek" ) ,
406
472
} ) }
@@ -424,8 +490,12 @@ let CalendarBasicComp = (function () {
424
490
tooltip : trans ( "calendar.eventMaxStackTooltip" ) ,
425
491
} ) }
426
492
</ 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 >
429
499
</ >
430
500
) ;
431
501
} )
0 commit comments