Skip to content

Calendar Component - Bugfixes and Premium views #736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Mar 4, 2024
Merged
Prev Previous commit
Next Next commit
"add premium and free calendar options drop down"
  • Loading branch information
freddysundowner committed Feb 26, 2024
commit a1918e511c12a8f83f6481594a44f5ab2643bbcb
2 changes: 2 additions & 0 deletions client/packages/lowcoder-comps/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
"type": "module",
"license": "MIT",
"dependencies": {
"@fullcalendar/adaptive": "^6.1.11",
"@fullcalendar/core": "^6.1.6",
"@fullcalendar/daygrid": "^6.1.6",
"@fullcalendar/interaction": "^6.1.6",
"@fullcalendar/list": "^6.1.9",
"@fullcalendar/moment": "^6.1.6",
"@fullcalendar/react": "^6.1.6",
"@fullcalendar/resource": "^6.1.11",
"@fullcalendar/resource-timegrid": "^6.1.11",
"@fullcalendar/resource-timeline": "^6.1.11",
"@fullcalendar/timegrid": "^6.1.6",
"@types/react": "^18.2.45",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ import { default as Input } from "antd/es/input";
import { trans, getCalendarLocale } from "../../i18n/comps";
import { createRef, useContext, useRef, useState } from "react";
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
import adaptivePlugin from "@fullcalendar/adaptive";

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
Expand All @@ -36,7 +39,8 @@ import allLocales from "@fullcalendar/core/locales-all";
import { EventContentArg, DateSelectArg } from "@fullcalendar/core";
import momentPlugin from "@fullcalendar/moment";
import {
DefaultViewOptions,
DefaultWithFreeViewOptions,
DefaultWithPremiumViewOptions,
FirstDayOptions,
Wrapper,
Event,
Expand All @@ -53,13 +57,20 @@ import {
} from "./calendarConstants";
import dayjs from "dayjs";

function filterViews() {}

const childrenMap = {
events: jsonValueExposingStateControl("events", defaultData),
onEvent: ChangeEventHandlerControl,

editable: withDefault(BoolControl, true),
defaultDate: withDefault(StringControl, "{{ new Date() }}"),
defaultView: dropdownControl(DefaultViewOptions, "timeGridWeek"),
defaultFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
defaultPremiumView: dropdownControl(
DefaultWithPremiumViewOptions,
"timeGridWeek"
),

firstDay: dropdownControl(FirstDayOptions, "1"),
showEventTime: withDefault(BoolControl, true),
showWeekends: withDefault(BoolControl, true),
Expand All @@ -69,7 +80,7 @@ const childrenMap = {
style: styleControl(CalendarStyle),
licenceKey: withDefault(StringControl, ""),
};

let CalendarBasicComp = (function () {
return new UICompBuilder(childrenMap, (props) => {
const theme = useContext(ThemeContext);
Expand All @@ -94,7 +105,8 @@ let CalendarBasicComp = (function () {

const {
defaultDate,
defaultView,
defaultFreeView,
defaultPremiumView,
showEventTime,
showWeekends,
showAllDay,
Expand Down Expand Up @@ -309,8 +321,10 @@ let CalendarBasicComp = (function () {
} catch (error) {
initialDate = undefined;
}


let defaultView = defaultFreeView;
if (licenceKey != "") {
defaultView = defaultPremiumView;
}

return (
<Wrapper
Expand All @@ -337,6 +351,8 @@ let CalendarBasicComp = (function () {
listPlugin,
momentPlugin,
resourceTimelinePlugin,
resourceTimeGridPlugin,
adaptivePlugin,
]}
headerToolbar={headerToolbar}
moreLinkClick={(info) => {
Expand All @@ -362,7 +378,7 @@ let CalendarBasicComp = (function () {
setLeft(left);
}}
buttonText={buttonText}
schedulerLicenseKey={licenceKey}
schedulerLicenseKey={"CC-Attribution-NonCommercial-NoDerivatives"}
views={views}
eventClassNames={() => (!showEventTime ? "no-time" : "")}
slotLabelFormat={slotLabelFormat}
Expand Down Expand Up @@ -422,6 +438,7 @@ let CalendarBasicComp = (function () {
);
})
.setPropertyViewFn((children) => {
let licence = children.licenceKey.getView();
return (
<>
<Section name={sectionNames.basic}>
Expand All @@ -435,16 +452,21 @@ let CalendarBasicComp = (function () {
</Section>
<Section name={sectionNames.advanced}>
{children.editable.propertyView({
label: trans("calendar.editable"),
})}
label: trans("calendar.editable"),
})}
{children.defaultDate.propertyView({
label: trans("calendar.defaultDate"),
tooltip: trans("calendar.defaultDateTooltip"),
})}
{children.defaultView.propertyView({
label: trans("calendar.defaultView"),
tooltip: trans("calendar.defaultViewTooltip"),
})}
{licence == ""
? children.defaultFreeView.propertyView({
label: trans("calendar.defaultView"),
tooltip: trans("calendar.defaultViewTooltip"),
})
: children.defaultPremiumView.propertyView({
label: trans("calendar.defaultView"),
tooltip: trans("calendar.defaultViewTooltip"),
})}
{children.firstDay.propertyView({
label: trans("calendar.startWeek"),
})}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -205,9 +205,14 @@ export const Wrapper = styled.div<{
flex-direction: inherit;
}
.fc-day-today .fc-daygrid-day-number {
background-color: ${(props) => props.$theme?.primary ? props.$theme.primary : props.$style.background};
background-color: ${(props) =>
props.$theme?.primary ? props.$theme.primary : props.$style.background};
color: ${(props) =>
contrastText(props.$theme?.primary || "", props.$theme?.textDark || "#000000", props.$theme?.textLight || "#ffffff")};
contrastText(
props.$theme?.primary || "",
props.$theme?.textDark || "#000000",
props.$theme?.textLight || "#ffffff"
)};
}
.fc-daygrid-day-events {
padding: 1px 0 5px 0;
Expand Down Expand Up @@ -330,7 +335,8 @@ export const Wrapper = styled.div<{
height: 20px;
padding-left: 15px;
font-weight: 500;
background-color: ${(props) => lightenColor(props.$style.background, 0.1)};
background-color: ${(props) =>
lightenColor(props.$style.background, 0.1)};
}
}
}
Expand Down Expand Up @@ -368,7 +374,7 @@ export const Wrapper = styled.div<{
}
&:hover {
.event-remove {
opacity: ${(props) => props.$editable ? 1 : undefined};
opacity: ${(props) => (props.$editable ? 1 : undefined)};
}
}
}
Expand Down Expand Up @@ -398,15 +404,17 @@ export const Wrapper = styled.div<{
// border-radius, bg
.fc-theme-standard .fc-list {
background-color: ${(props) => props.$style.background};
border-radius: ${(props) => `0 0 ${props.$style.radius} ${props.$style.radius}`};
border-radius: ${(props) =>
`0 0 ${props.$style.radius} ${props.$style.radius}`};
border-color: ${(props) => props.$style.border};
border-top-color: ${(props) =>
toHex(props.$style.border) === "#D7D9E0"
? "#E1E3EB"
: lightenColor(props.$style.border, 0.03)};
}
.fc-scrollgrid-liquid {
border-radius: ${(props) => `0 0 ${props.$style.radius} ${props.$style.radius}`};
border-radius: ${(props) =>
`0 0 ${props.$style.radius} ${props.$style.radius}`};
overflow: hidden;
border-right-width: 1px;
border-bottom-width: 1px;
Expand Down Expand Up @@ -459,7 +467,8 @@ export const Wrapper = styled.div<{
margin-bottom: 0;
border: 1px solid ${(props) => props.$style.border};
border-bottom: none;
border-radius: ${(props) => `${props.$style.radius} ${props.$style.radius} 0 0`};
border-radius: ${(props) =>
`${props.$style.radius} ${props.$style.radius} 0 0`};
background-color: ${(props) => props.$style.background};
}
.fc-toolbar-title {
Expand Down Expand Up @@ -488,7 +497,9 @@ export const Wrapper = styled.div<{
border-color: ${(props) =>
toHex(props.$style.headerBtnBackground) === "#FFFFFF"
? "#D7D9E0"
: backgroundToBorder(genHoverColor(props.$style.headerBtnBackground))};
: backgroundToBorder(
genHoverColor(props.$style.headerBtnBackground)
)};
}
}
&:not(:disabled):focus {
Expand All @@ -500,7 +511,8 @@ export const Wrapper = styled.div<{
&,
&:hover {
background-color: ${(props) => props.$style.headerBtnBackground};
border-color: ${(props) => backgroundToBorder(props.$style.headerBtnBackground)};
border-color: ${(props) =>
backgroundToBorder(props.$style.headerBtnBackground)};
color: ${(props) =>
toHex(props.$style.btnText) === "#222222"
? "#B8B9BF"
Expand All @@ -518,7 +530,8 @@ export const Wrapper = styled.div<{
font-size: 14px;
margin-left: 8px;
background-color: ${(props) => props.$style.headerBtnBackground};
border-color: ${(props) => backgroundToBorder(props.$style.headerBtnBackground)};
border-color: ${(props) =>
backgroundToBorder(props.$style.headerBtnBackground)};
color: ${(props) => props.$style.btnText};
&.fc-today-button {
min-width: 52px;
Expand All @@ -538,8 +551,8 @@ export const Wrapper = styled.div<{
toHex(props.$style.headerBtnBackground) === "#FFFFFF"
? "#EFEFF1"
: isDarkColor(props.$style.headerBtnBackground)
? props.$style.headerBtnBackground
: darkenColor(props.$style.headerBtnBackground, 0.1)};
? props.$style.headerBtnBackground
: darkenColor(props.$style.headerBtnBackground, 0.1)};
border-radius: 4px;
margin-left: 16px;
.fc-button-primary {
Expand Down Expand Up @@ -585,10 +598,13 @@ export const Wrapper = styled.div<{
}
.fc-day-today.fc-col-header-cell {
background-color: ${(props) =>
isDarkColor(props.$style.background) ? "#ffffff19" : toHex(props.$theme?.primary!) + "19"};
isDarkColor(props.$style.background)
? "#ffffff19"
: toHex(props.$theme?.primary!) + "19"};
a {
color: ${(props) =>
!isDarkColor(props.$style.background) && darkenColor(props.$theme?.primary!, 0.1)};
!isDarkColor(props.$style.background) &&
darkenColor(props.$theme?.primary!, 0.1)};
}
}
.fc-col-header-cell-cushion {
Expand Down Expand Up @@ -649,7 +665,8 @@ export const Event = styled.div<{
box-shadow: ${(props) => !props.isList && "0 0 5px 0 rgba(0, 0, 0, 0.15)"};
border: 1px solid ${(props) => props.$style.border};
display: ${(props) => props.isList && "flex"};
background-color: ${(props) => !props.isList && lightenColor(props.$style.background, 0.1)};
background-color: ${(props) =>
!props.isList && lightenColor(props.$style.background, 0.1)};
overflow: hidden;
font-size: 13px;
line-height: 19px;
Expand All @@ -671,7 +688,9 @@ export const Event = styled.div<{
.event-time {
color: ${(props) =>
!props.isList &&
(isDarkColor(props.$style.text) ? lightenColor(props.$style.text, 0.2) : props.$style.text)};
(isDarkColor(props.$style.text)
? lightenColor(props.$style.text, 0.2)
: props.$style.text)};
margin-left: 15px;
white-space: pre-wrap;
margin-top: 2px;
Expand Down Expand Up @@ -710,14 +729,15 @@ export const Event = styled.div<{
}
}
&.past {
background-color: ${(props) => isDarkColor(props.$style.background) && props.$style.background};
background-color: ${(props) =>
isDarkColor(props.$style.background) && props.$style.background};
&::before {
background-color: ${(props) =>
toHex(props.$style.text) === "#3C3C3C"
? "#8B8FA3"
: isDarkColor(props.$style.text)
? lightenColor(props.$style.text, 0.3)
: props.$style.text};
? lightenColor(props.$style.text, 0.3)
: props.$style.text};
}
&::before,
.event-title,
Expand Down Expand Up @@ -758,9 +778,34 @@ export enum ViewType {
WEEK = "timeGridWeek",
DAY = "timeGridDay",
LIST = "listWeek",
TIMEGRID = "timeGridDay",
}

export const DefaultViewOptions = [

export const DefaultWithPremiumViewOptions = [
{
label: trans("calendar.month"),
value: "dayGridMonth",
},
{
label: trans("calendar.week"),
value: "timeGridWeek",
},
{
label: trans("calendar.timeline"),
value: "resourceTimeline",
},
{
label: trans("calendar.day"),
value: "timeGridDay",
},
{
label: trans("calendar.list"),
value: "listWeek",
},
] as const;

export const DefaultWithFreeViewOptions = [
{
label: trans("calendar.month"),
value: "dayGridMonth",
Expand Down Expand Up @@ -815,7 +860,7 @@ export const defaultData = [
id: "1",
title: "Coding",
start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT),
end: dayjs().hour(11).minute(30).second(0).format(DATE_TIME_FORMAT),
end: dayjs().hour(12).minute(30).second(0).format(DATE_TIME_FORMAT),
color: "#079968",
},
{
Expand All @@ -831,6 +876,7 @@ export const buttonText = {
today: trans("calendar.today"),
month: trans("calendar.month"),
week: trans("calendar.week"),
timeline: trans("calendar.timeline"),
day: trans("calendar.day"),
list: trans("calendar.list"),
};
Expand All @@ -843,7 +889,9 @@ export const headerToolbar = {
const weekHeadContent = (info: DayHeaderContentArg) => {
const text = info.text.split(" ");
return {
html: `<span class="week-head ${info.isPast && "past"} ${info.isToday && "today"}">
html: `<span class="week-head ${info.isPast && "past"} ${
info.isToday && "today"
}">
<span class="week">${text[0]}</span>
<span class="day">${text[1]}</span>
</span>`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export const en = {
week: "Week",
day: "Day",
list: "List",
timeline: "TimeLine", //added by fred
monday: "Monday",
tuesday: "Tuesday",
wednesday: "Wednesday",
Expand Down
Loading