Skip to content

Commit a1918e5

Browse files
freddysundownerfreddysundowner
committed
"add premium and free calendar options drop down"
1 parent 0e95abd commit a1918e5

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
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
30+
import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
31+
import adaptivePlugin from "@fullcalendar/adaptive";
32+
3033
import FullCalendar from "@fullcalendar/react";
3134
import dayGridPlugin from "@fullcalendar/daygrid";
3235
import timeGridPlugin from "@fullcalendar/timegrid";
@@ -36,7 +39,8 @@ import allLocales from "@fullcalendar/core/locales-all";
3639
import { EventContentArg, DateSelectArg } from "@fullcalendar/core";
3740
import momentPlugin from "@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
import dayjs from "dayjs";
5559

60+
function filterViews() {}
61+
5662
const childrenMap = {
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
let CalendarBasicComp = (function () {
7485
return new UICompBuilder(childrenMap, (props) => {
7586
const theme = 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+
let defaultView = 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+
let licence = children.licenceKey.getView();
425442
return (
426443
<>
427444
<Section name={sectionNames.basic}>
@@ -435,16 +452,21 @@ let CalendarBasicComp = (function () {
435452
</Section>
436453
<Section name={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-
export const DefaultViewOptions = [
784+
785+
export const DefaultWithPremiumViewOptions = [
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+
] as const;
807+
808+
export const DefaultWithFreeViewOptions = [
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
const weekHeadContent = (info: DayHeaderContentArg) => {
844890
const text = 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)