Creating full-calendar-react :: error dateProfileGenerator is undefined - reactjs

Trying to make Full-Calendar component for reactjs, and fill it up with events retrieved from firestore database (Retrieving the events when changing the month).
But no matter what i do, i receive the error about dateProfileGenerator, so the code below is the code that i use just i deleted the part where i retrieve from the db, and still does not work.
import React from 'react';
import FullCalendar from '#fullcalendar/react';
import dayGridPlugin from '#fullcalendar/daygrid';
import interactionPlugin from '#fullcalendar/interaction';
Receiving this error:
TypeError: dateProfileGenerator is undefined
Here is the code i am trying to run.
const DemoCalendar = () => {
return (
<FullCalendar
headerToolbar={{
left: 'prev, next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek, timeGridDay, listMonth'
}}
initialDate={new Date()}
navLinks="true"
businessHours="true"
editable="false"
selectable="true"
events={[
{
title: 'Business',
start: '2021-05-05T10:00:00',
end: '2021-05-06T10:30:00',
constraint: 'businessHours',
color: '#257e4a'
},
{
groupId: 'available',
start: '2021-05-06T10:00:00',
end: '2021-05-06T10:30:00',
display: 'background'
}
]}
plugins={[dayGridPlugin, interactionPlugin]}
initialView="dayGridMonth"
/>
);
};
};
Thanks in advance.

I also encountered this error using React. I still don't know what's wrong, but it works after I moved my main code to the React project example here:
https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/react
I then installed #fullcalendar/list additionally, which is not included in the original example.
My guess is I might have mistyped something or I didn't not install #fullcalendar/list correctly. For your case I think you may have forgotten to enter this line of code
import listPlugin from '#fullcalendar/list'
If not, you can try to modify the React example project. Maybe moving your code to a new project also works. Reinstalling the whole node_modules doesn't help.
Update: Changing the folder name helps when I encountered another error today.

Related

Stripe publish key stored in .env can't be read by React

I'm building an e-commerce site, the Cart page holds the checkout process's button.
I created an .env file inside front-side folder, then pasted in my Publishable key:
.env code:
REACT_APP_STRIPE = pk_test_51LJh5TCx0CP76PWrc0hRSESvbF00x8voeXAS...
Cart.jsx page code:
import StripeCheckout from "react-stripe-checkout";
const KEY = process.env.REACT_APP_STRIPE;
//...
<StripeCheckout
name="ShopTn"
image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWHNj9PK7N9WLGXRF5FDbA7XdtjH6caLiwnBW2__PWC3crRyS_XiocBVKnP9GONqvVp9A"
description={`Your total is ${cart.total} DT`}
billingAddress
shippingAddress
amount={cart.taotal * 100}
currency="TTD"
token={onToken}
stripeKey={KEY}
>
<Button
style={{
border: "none",
width: 120,
borderRadius: 5,
padding: "20px",
backgroundColor: "black",
color: "white",
fontWeight: "600",
cursor: "pointer",
}}
>
CHECKOUT NOW
</Button>
</StripeCheckout>
Warning errors i'm receiving:
I'm getting this error in console.dev:
Warning: Failed prop type: The prop stripeKey is marked as required in ReactStripeCheckout, but its value is undefined.
Edit (Please ignore this edit part):
upon pressing CHECKOUT NOW button, i'm expecting to open stripe checkout interface directly, but i'm getting this JS alert saying:
Stripe Checkout is missing the required key parameter. Please contact the website owner or support#stripe.com.
Edit:
I tried put my publishable key in JSX (like this code below) and it works fine:
const KEY = "pk_test_51LJh5TCx0CP76PWrc0hRSESuLLs9TSjpI7bUnDdgu4r0w";
The first error you are receiving is about a .map you are using in the Cart method that is not settings key property to each element created Read this for more information.
You have a spelling mistake in amount={cart.taotal * 100}.
And verify that the .env variables are getting loaded, for example by putting them into the JSX and verify their content.
Edit:
The code is all working correctly, the problem was solved by restarting the project after editing the .env, as it doesen't reload the key if using nodemon or similars (unlike next.js).

Material UI material-table TablePagination issue. (React)

I am using material-table. The TablePagination is not working. It throws an error in console.
I tried installing the package as per the documentation.
https://material-table.com/#/docs/install
npm install material-table --save
npm install #material-ui/core --save
And I get getting this errors:
Material-UI: The key caption provided to the classes prop is not
implemented in ForwardRef(TablePagination). You can only override one
of the following: root,toolbar,spacer,selectLabel,selectRoot,select,selectIcon,input,menuItem,displayedRows,actions.
Warning: Failed prop type: The prop onPageChange is marked as
required in ForwardRef(TablePagination), but its value is
undefined.
Warning: Unknown event handler property onChangePage. It will be
ignored.
Warning: Unknown event handler property onChangeRowsPerPage. It will
be ignored.
versions:
"#material-ui/core": "^5.0.0-alpha.24",
"material-table": "^1.69.2",
If I try to paginate it throws error in console.
Uncaught TypeError: _this.props.onChangePage is not a function
Sample Code:
<MaterialTable
icons={tableIcons}
columns={columns}
data={editable}
title="Orders"
localization={{
toolbar: {
searchPlaceholder: 'Filter',
searchTooltip: 'filters the given text'
},
header: {
actions: 'Actions'
}
}}
actions={[
{
icon: 'save',
tooltip: 'Save User',
onClick: (event, rowData) =>
alert('You saved ' + rowData.name)
}
]}
options={{
actionsColumnIndex: -1,
selection: true,
exportButton: true,
showFirstLastPageButtons: true,
pageSize: 5,
padding: 'dense',
pageSizeOptions: [5, 20, 50]
}}
/>
I came across the same issue. For me, it is caused due to latest version of #material/core#4.12.1, Due to deprecated methods in TablePagination. As material-table uses this and not upgraded these deprecated methods it is throwing the error.
I was able to solve this by downgrading #material-ui/core version to 4.11.4 and keeping the material-table version to 1.69.3. On the other hand, as #knock-out has mentioned. You can create your own material-table component. Just change the -version
Hope this is helpful!
For me I managed to solve this by removing an old material-ui module and installing a new one
npm remove material-table
npm install #material-table/core
And then in the code
replace
import MaterialTable from 'material-table';
with
import MaterialTable from '#material-table/core';
kudos to #Chris Livdahl answer
I'm finding that the material-table repository is not kept up-to-date with the latest Material UI changes. Instead, take a look at the fork of material-table here: https://github.com/material-table-core/core, support for Material UI v4, with a "next" version in the works for v5.
Changing the code was very easy to adapt to the new repository. Follow the instructions here: https://material-table-core.com/docs

React Calendly Package infinitely loading

I am currently using the react-calendly package and everything is working as expected. I am able to pick a date, etc. and post the event to the calendar. The only issue is below the calendar there are 3 gray dots showing the widget is loading. They never go away, the widget appears to be in a constant state of loading. Is there a reason this is happening? Or maybe could offer a separate solution as opposed to the package I am using. Click https://m44fc.csb.app/ to see what I am talking about. Here is the code pen if you would like to test a solution https://codesandbox.io/s/dreamy-dewdney-m44fc?file=/src/App.js
My code is as follows:
import React, { useState } from 'react'
import { InlineWidget } from 'react-calendly'
function App() {
return (
<>
<InlineWidget
url='https://calendly.com/myURL'
utm={{
utmCampaign: 'Spring Sale 2019',
utmContent: 'Shoe and Shirts',
utmMedium: 'Ad',
utmSource: 'Facebook',
utmTerm: 'Spring'
}}
/>
</>
)
}
export default App
getting the following issue in my chrome dev tools:
Resolve this issue by updating the attributes of the cookie:
Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.
Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests
Is there something I need to do to resolve these?
Looks like the React component is missing an important style property. We'll look into patching it, but in the meantime the workaround is to pass the following styles yourself when you're using the component:
<InlineWidget
url="https://calendly.com/robert-612/complimentary-consultation"
utm={{
utmCampaign: "Spring Sale 2019",
utmContent: "Shoe and Shirts",
utmMedium: "Ad",
utmSource: "Facebook",
utmTerm: "Spring"
}}
styles={{
minWidth: "320px",
height: '630px',
position: 'relative',
}}
/>
The minWidth and height values are taken from the component's defaults, the position: relative is what was missing. This should ensure that the widget always covers the loading dots, no matter what the page size is.

FullCalendar React header custom buttons not showing

I'm trying to add some icons to the header as buttons, I've tried using both bootstrap and fontawesome as mentioned in the docs but I get an empty square instead of the icon. When using the bootstrap theme I get 'undefined', when using the standard I get the below.
Here's my code:
const customButtons = {
custom1: {
icon: "fa-times",
click: function() {
alert('test');
}
}
}
<CustomCalendar
customCalendarRef={customCalendarRef}
select={(e: any) => processClick(e)}
customButtons={customButtons}
themeSystem="standard"
header={{
right: '',
center: '',
left: 'prev,next today custom1'
}}
/>
Result:
How can I show an icon as a button in the header?
I'm also using fullcalendar in my react app so I've tried using your code. First there's one thing you forgot, wich is fontawesome icons also needs the "fa" class, so the correct would be fa fa-times, not only fa-times.
But then there's another issue which is the icon comes with custom fullcalendar classes when rendered:
So a solution you might use is to add this to your css somewhere:
.fc-icon.fa {
font: normal normal normal 14px/1 FontAwesome !important;
}
It worked for me:
Edited:
The string of the fontawesome classes should start with a blank space otherwise the 'fa' class will concatenate with the fullcalendar class. So: icon: ' fa fa-times'

TypeError: StyleSheet.create is not a function

I'm trying to create some styles for my react component like this:
var styles = StyleSheet.create({
/*Pinout*/
/*GPIO Shapre*/
gpio_outer: {
background: '#222222',
borderRadius: 5,
height: 26,
width: 26,
},
})
I'm adding it like
After compiling the code and try to run on the browser I get this from the browser console:
TypeError: StyleSheet.create is not a function
Do you know what can be happening? Thanks in advance
StyleSheet is a part of React-Native, not a part of regular ReactJS. You can however instantiate a style object and use that like you would in RN.
render() {
const style = {
margin: '0.5em',
paddingLeft: 0,
listStyle: 'none'
};
return <ul style={style}>item</ul>;
}
A quick google search also led me to find a few react js libraries that give you the abstraction you're looking for.
Radium
react-style
Good info source
You should import StyleSheet correctly from react-native. You probably haven't written it correctly. Check this one:
import { View, Text, StyleSheet } from 'react-native';
Are you requiring StyleSheet properly?
You can try to check this tutorial https://www.toptal.com/ios/cold-dive-into-react-native-a-beginners-tutorial

Resources