Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita1918e5

Browse files
"add premium and free calendar options drop down"
1 parent0e95abd commita1918e5

File tree

5 files changed

+227
-35
lines changed

5 files changed

+227
-35
lines changed

‎client/packages/lowcoder-comps/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
"type":"module",
55
"license":"MIT",
66
"dependencies": {
7+
"@fullcalendar/adaptive":"^6.1.11",
78
"@fullcalendar/core":"^6.1.6",
89
"@fullcalendar/daygrid":"^6.1.6",
910
"@fullcalendar/interaction":"^6.1.6",
1011
"@fullcalendar/list":"^6.1.9",
1112
"@fullcalendar/moment":"^6.1.6",
1213
"@fullcalendar/react":"^6.1.6",
1314
"@fullcalendar/resource":"^6.1.11",
15+
"@fullcalendar/resource-timegrid":"^6.1.11",
1416
"@fullcalendar/resource-timeline":"^6.1.11",
1517
"@fullcalendar/timegrid":"^6.1.6",
1618
"@types/react":"^18.2.45",

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ import { default as Input } from "antd/es/input";
2727
import{trans,getCalendarLocale}from"../../i18n/comps";
2828
import{createRef,useContext,useRef,useState}from"react";
2929
importresourceTimelinePluginfrom"@fullcalendar/resource-timeline";
30+
importresourceTimeGridPluginfrom"@fullcalendar/resource-timegrid";
31+
importadaptivePluginfrom"@fullcalendar/adaptive";
32+
3033
importFullCalendarfrom"@fullcalendar/react";
3134
importdayGridPluginfrom"@fullcalendar/daygrid";
3235
importtimeGridPluginfrom"@fullcalendar/timegrid";
@@ -36,7 +39,8 @@ import allLocales from "@fullcalendar/core/locales-all";
3639
import{EventContentArg,DateSelectArg}from"@fullcalendar/core";
3740
importmomentPluginfrom"@fullcalendar/moment";
3841
import{
39-
DefaultViewOptions,
42+
DefaultWithFreeViewOptions,
43+
DefaultWithPremiumViewOptions,
4044
FirstDayOptions,
4145
Wrapper,
4246
Event,
@@ -53,13 +57,20 @@ import {
5357
}from"./calendarConstants";
5458
importdayjsfrom"dayjs";
5559

60+
functionfilterViews(){}
61+
5662
constchildrenMap={
5763
events:jsonValueExposingStateControl("events",defaultData),
5864
onEvent:ChangeEventHandlerControl,
5965

6066
editable:withDefault(BoolControl,true),
6167
defaultDate:withDefault(StringControl,"{{ new Date() }}"),
62-
defaultView:dropdownControl(DefaultViewOptions,"timeGridWeek"),
68+
defaultFreeView:dropdownControl(DefaultWithFreeViewOptions,"timeGridWeek"),
69+
defaultPremiumView:dropdownControl(
70+
DefaultWithPremiumViewOptions,
71+
"timeGridWeek"
72+
),
73+
6374
firstDay:dropdownControl(FirstDayOptions,"1"),
6475
showEventTime:withDefault(BoolControl,true),
6576
showWeekends:withDefault(BoolControl,true),
@@ -69,7 +80,7 @@ const childrenMap = {
6980
style:styleControl(CalendarStyle),
7081
licenceKey:withDefault(StringControl,""),
7182
};
72-
83+
7384
letCalendarBasicComp=(function(){
7485
returnnewUICompBuilder(childrenMap,(props)=>{
7586
consttheme=useContext(ThemeContext);
@@ -94,7 +105,8 @@ let CalendarBasicComp = (function () {
94105

95106
const{
96107
defaultDate,
97-
defaultView,
108+
defaultFreeView,
109+
defaultPremiumView,
98110
showEventTime,
99111
showWeekends,
100112
showAllDay,
@@ -309,8 +321,10 @@ let CalendarBasicComp = (function () {
309321
}catch(error){
310322
initialDate=undefined;
311323
}
312-
313-
324+
letdefaultView=defaultFreeView;
325+
if(licenceKey!=""){
326+
defaultView=defaultPremiumView;
327+
}
314328

315329
return(
316330
<Wrapper
@@ -337,6 +351,8 @@ let CalendarBasicComp = (function () {
337351
listPlugin,
338352
momentPlugin,
339353
resourceTimelinePlugin,
354+
resourceTimeGridPlugin,
355+
adaptivePlugin,
340356
]}
341357
headerToolbar={headerToolbar}
342358
moreLinkClick={(info)=>{
@@ -362,7 +378,7 @@ let CalendarBasicComp = (function () {
362378
setLeft(left);
363379
}}
364380
buttonText={buttonText}
365-
schedulerLicenseKey={licenceKey}
381+
schedulerLicenseKey={"CC-Attribution-NonCommercial-NoDerivatives"}
366382
views={views}
367383
eventClassNames={()=>(!showEventTime ?"no-time" :"")}
368384
slotLabelFormat={slotLabelFormat}
@@ -422,6 +438,7 @@ let CalendarBasicComp = (function () {
422438
);
423439
})
424440
.setPropertyViewFn((children)=>{
441+
letlicence=children.licenceKey.getView();
425442
return(
426443
<>
427444
<Sectionname={sectionNames.basic}>
@@ -435,16 +452,21 @@ let CalendarBasicComp = (function () {
435452
</Section>
436453
<Sectionname={sectionNames.advanced}>
437454
{children.editable.propertyView({
438-
label:trans("calendar.editable"),
439-
})}
455+
label:trans("calendar.editable"),
456+
})}
440457
{children.defaultDate.propertyView({
441458
label:trans("calendar.defaultDate"),
442459
tooltip:trans("calendar.defaultDateTooltip"),
443460
})}
444-
{children.defaultView.propertyView({
445-
label:trans("calendar.defaultView"),
446-
tooltip:trans("calendar.defaultViewTooltip"),
447-
})}
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+
})}
448470
{children.firstDay.propertyView({
449471
label:trans("calendar.startWeek"),
450472
})}

‎client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx‎

Lines changed: 70 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -205,9 +205,14 @@ export const Wrapper = styled.div<{
205205
flex-direction: inherit;
206206
}
207207
.fc-day-today .fc-daygrid-day-number {
208-
background-color:${(props)=>props.$theme?.primary ?props.$theme.primary :props.$style.background};
208+
background-color:${(props)=>
209+
props.$theme?.primary ?props.$theme.primary :props.$style.background};
209210
color:${(props)=>
210-
contrastText(props.$theme?.primary||"",props.$theme?.textDark|| "#000000",props.$theme?.textLight||"#ffffff")};
211+
contrastText(
212+
props.$theme?.primary||"",
213+
props.$theme?.textDark||"#000000",
214+
props.$theme?.textLight||"#ffffff"
215+
)};
211216
}
212217
.fc-daygrid-day-events {
213218
padding: 1px 0 5px 0;
@@ -330,7 +335,8 @@ export const Wrapper = styled.div<{
330335
height: 20px;
331336
padding-left: 15px;
332337
font-weight: 500;
333-
background-color:${(props)=>lightenColor(props.$style.background,0.1)};
338+
background-color:${(props)=>
339+
lightenColor(props.$style.background,0.1)};
334340
}
335341
}
336342
}
@@ -368,7 +374,7 @@ export const Wrapper = styled.div<{
368374
}
369375
&:hover {
370376
.event-remove {
371-
opacity:${(props)=>props.$editable ?1 :undefined};
377+
opacity:${(props)=>(props.$editable ?1 :undefined)};
372378
}
373379
}
374380
}
@@ -398,15 +404,17 @@ export const Wrapper = styled.div<{
398404
// border-radius, bg
399405
.fc-theme-standard .fc-list {
400406
background-color:${(props)=>props.$style.background};
401-
border-radius:${(props)=>`0 0${props.$style.radius}${props.$style.radius}`};
407+
border-radius:${(props)=>
408+
`0 0${props.$style.radius}${props.$style.radius}`};
402409
border-color:${(props)=>props.$style.border};
403410
border-top-color:${(props)=>
404411
toHex(props.$style.border)==="#D7D9E0"
405412
?"#E1E3EB"
406413
:lightenColor(props.$style.border,0.03)};
407414
}
408415
.fc-scrollgrid-liquid {
409-
border-radius:${(props)=>`0 0${props.$style.radius}${props.$style.radius}`};
416+
border-radius:${(props)=>
417+
`0 0${props.$style.radius}${props.$style.radius}`};
410418
overflow: hidden;
411419
border-right-width: 1px;
412420
border-bottom-width: 1px;
@@ -459,7 +467,8 @@ export const Wrapper = styled.div<{
459467
margin-bottom: 0;
460468
border: 1px solid${(props)=>props.$style.border};
461469
border-bottom: none;
462-
border-radius:${(props)=>`${props.$style.radius}${props.$style.radius} 0 0`};
470+
border-radius:${(props)=>
471+
`${props.$style.radius}${props.$style.radius} 0 0`};
463472
background-color:${(props)=>props.$style.background};
464473
}
465474
.fc-toolbar-title {
@@ -488,7 +497,9 @@ export const Wrapper = styled.div<{
488497
border-color:${(props)=>
489498
toHex(props.$style.headerBtnBackground)==="#FFFFFF"
490499
?"#D7D9E0"
491-
:backgroundToBorder(genHoverColor(props.$style.headerBtnBackground))};
500+
:backgroundToBorder(
501+
genHoverColor(props.$style.headerBtnBackground)
502+
)};
492503
}
493504
}
494505
&:not(:disabled):focus {
@@ -500,7 +511,8 @@ export const Wrapper = styled.div<{
500511
&,
501512
&:hover {
502513
background-color:${(props)=>props.$style.headerBtnBackground};
503-
border-color:${(props)=>backgroundToBorder(props.$style.headerBtnBackground)};
514+
border-color:${(props)=>
515+
backgroundToBorder(props.$style.headerBtnBackground)};
504516
color:${(props)=>
505517
toHex(props.$style.btnText)==="#222222"
506518
?"#B8B9BF"
@@ -518,7 +530,8 @@ export const Wrapper = styled.div<{
518530
font-size: 14px;
519531
margin-left: 8px;
520532
background-color:${(props)=>props.$style.headerBtnBackground};
521-
border-color:${(props)=>backgroundToBorder(props.$style.headerBtnBackground)};
533+
border-color:${(props)=>
534+
backgroundToBorder(props.$style.headerBtnBackground)};
522535
color:${(props)=>props.$style.btnText};
523536
&.fc-today-button {
524537
min-width: 52px;
@@ -538,8 +551,8 @@ export const Wrapper = styled.div<{
538551
toHex(props.$style.headerBtnBackground)==="#FFFFFF"
539552
?"#EFEFF1"
540553
:isDarkColor(props.$style.headerBtnBackground)
541-
?props.$style.headerBtnBackground
542-
:darkenColor(props.$style.headerBtnBackground,0.1)};
554+
?props.$style.headerBtnBackground
555+
:darkenColor(props.$style.headerBtnBackground,0.1)};
543556
border-radius: 4px;
544557
margin-left: 16px;
545558
.fc-button-primary {
@@ -585,10 +598,13 @@ export const Wrapper = styled.div<{
585598
}
586599
.fc-day-today.fc-col-header-cell {
587600
background-color:${(props)=>
588-
isDarkColor(props.$style.background) ?"#ffffff19" :toHex(props.$theme?.primary!)+"19"};
601+
isDarkColor(props.$style.background)
602+
?"#ffffff19"
603+
:toHex(props.$theme?.primary!)+"19"};
589604
a {
590605
color:${(props)=>
591-
!isDarkColor(props.$style.background)&&darkenColor(props.$theme?.primary!,0.1)};
606+
!isDarkColor(props.$style.background)&&
607+
darkenColor(props.$theme?.primary!,0.1)};
592608
}
593609
}
594610
.fc-col-header-cell-cushion {
@@ -649,7 +665,8 @@ export const Event = styled.div<{
649665
box-shadow:${(props)=>!props.isList&&"0 0 5px 0 rgba(0, 0, 0, 0.15)"};
650666
border: 1px solid${(props)=>props.$style.border};
651667
display:${(props)=>props.isList&&"flex"};
652-
background-color:${(props)=>!props.isList&&lightenColor(props.$style.background,0.1)};
668+
background-color:${(props)=>
669+
!props.isList&&lightenColor(props.$style.background,0.1)};
653670
overflow: hidden;
654671
font-size: 13px;
655672
line-height: 19px;
@@ -671,7 +688,9 @@ export const Event = styled.div<{
671688
.event-time {
672689
color:${(props)=>
673690
!props.isList&&
674-
(isDarkColor(props.$style.text) ?lightenColor(props.$style.text,0.2) :props.$style.text)};
691+
(isDarkColor(props.$style.text)
692+
?lightenColor(props.$style.text,0.2)
693+
:props.$style.text)};
675694
margin-left: 15px;
676695
white-space: pre-wrap;
677696
margin-top: 2px;
@@ -710,14 +729,15 @@ export const Event = styled.div<{
710729
}
711730
}
712731
&.past {
713-
background-color:${(props)=>isDarkColor(props.$style.background)&&props.$style.background};
732+
background-color:${(props)=>
733+
isDarkColor(props.$style.background)&&props.$style.background};
714734
&::before {
715735
background-color:${(props)=>
716736
toHex(props.$style.text)==="#3C3C3C"
717737
?"#8B8FA3"
718738
:isDarkColor(props.$style.text)
719-
?lightenColor(props.$style.text,0.3)
720-
:props.$style.text};
739+
?lightenColor(props.$style.text,0.3)
740+
:props.$style.text};
721741
}
722742
&::before,
723743
.event-title,
@@ -758,9 +778,34 @@ export enum ViewType {
758778
WEEK="timeGridWeek",
759779
DAY="timeGridDay",
760780
LIST="listWeek",
781+
TIMEGRID="timeGridDay",
761782
}
762783

763-
exportconstDefaultViewOptions=[
784+
785+
exportconstDefaultWithPremiumViewOptions=[
786+
{
787+
label:trans("calendar.month"),
788+
value:"dayGridMonth",
789+
},
790+
{
791+
label:trans("calendar.week"),
792+
value:"timeGridWeek",
793+
},
794+
{
795+
label:trans("calendar.timeline"),
796+
value:"resourceTimeline",
797+
},
798+
{
799+
label:trans("calendar.day"),
800+
value:"timeGridDay",
801+
},
802+
{
803+
label:trans("calendar.list"),
804+
value:"listWeek",
805+
},
806+
]asconst;
807+
808+
exportconstDefaultWithFreeViewOptions=[
764809
{
765810
label:trans("calendar.month"),
766811
value:"dayGridMonth",
@@ -815,7 +860,7 @@ export const defaultData = [
815860
id:"1",
816861
title:"Coding",
817862
start:dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT),
818-
end:dayjs().hour(11).minute(30).second(0).format(DATE_TIME_FORMAT),
863+
end:dayjs().hour(12).minute(30).second(0).format(DATE_TIME_FORMAT),
819864
color:"#079968",
820865
},
821866
{
@@ -831,6 +876,7 @@ export const buttonText = {
831876
today:trans("calendar.today"),
832877
month:trans("calendar.month"),
833878
week:trans("calendar.week"),
879+
timeline:trans("calendar.timeline"),
834880
day:trans("calendar.day"),
835881
list:trans("calendar.list"),
836882
};
@@ -843,7 +889,9 @@ export const headerToolbar = {
843889
constweekHeadContent=(info:DayHeaderContentArg)=>{
844890
consttext=info.text.split(" ");
845891
return{
846-
html:`<span class="week-head${info.isPast&&"past"}${info.isToday&&"today"}">
892+
html:`<span class="week-head${info.isPast&&"past"}${
893+
info.isToday&&"today"
894+
}">
847895
<span class="week">${text[0]}</span>
848896
<span class="day">${text[1]}</span>
849897
</span>`,

‎client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ export const en = {
127127
week:"Week",
128128
day:"Day",
129129
list:"List",
130+
timeline:"TimeLine",//added by fred
130131
monday:"Monday",
131132
tuesday:"Tuesday",
132133
wednesday:"Wednesday",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp