I am testing React FullCalendar for a project and I am having difficulties with the resources/rooms. Basically they are not appearing and I get this warning in the console Unknown option 'resources'
I have tried using json and js object but none of them seems to work.
You can also view it in codesandox here
Any help is appreciated
export default function App() {
const lunch = new Date();
const events = [
{
title: "Lunch",
start: lunch
}
];
const resources = [
{
id: "1",
title: "Room 1"
},
{
id: "2",
title: "Display room"
},
{
id: "3",
title: "MR-Fujita"
}
]
return (
<div className="App">
<FullCalendar
events={events}
resources={resources}
headerToolbar={{
left: "dayGridMonth,timeGridWeek,timeGridDay",
center: "title",
right: "prevYear,prev,next,nextYear"
}}
plugins={[dayGridPlugin, timeGridPlugin]}
initialView="timeGridWeek"
height="100%"
/>
</div>
);
}
You need to include resourceTimeGridPlugin plugin in your project via the calendar options, e.g:
plugins={[dayGridPlugin, timeGridPlugin, resourceTimeGridPlugin ]}
See the example at: https://fullcalendar.io/docs/vertical-resource-view
Bear in mind that this is a premium feature so you'd need a valid license.
Related
I am trying to create FAQ page in my react project using below package:
https://www.npmjs.com/package/react-faq-component
I am able to show FAQ with 1 category.
I want to show questions/answers with different categories:
Code:
import React, { useState } from 'react';
import FaqData from 'react-faq-component';
function Faq() {
const [rows, setRowsOption] = useState(null);
const data = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
return (
<div>
<h2 className="section-title">My FAQ's</h2>
<div className="faq-style-wrapper">
<FaqData data={data} getRowOptions={setRowsOption} />
</div>
</div>
);
}
If any other demo/library can give me desired output, please suggest those as well.
As suggested by #Arkellys I have used one component per category & its worked for me. Thanks again #Arkellys.
I am adding answer below for more details:
import React, { useState } from 'react';
import FaqData from 'react-faq-component';
function Faq() {
const [rows, setRowsOption] = useState(null);
const data1 = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
const data2 = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
const data3 = {
title: 'FAQ (how it works)',
rows: [
{
title: 'How do I change my password?',
content: `Answer here.`,
},
{
title: 'How do I sign up?',
content:'Answer here.',
},
],
};
return (
<div>
<h2 className="section-title">My FAQ's</h2>
<div className="faq-style-wrapper">
<FaqData data={data1} getRowOptions={setRowsOption} />
<FaqData data={data2} getRowOptions={setRowsOption} />
<FaqData data={data3} getRowOptions={setRowsOption} />
</div>
</div>
);
}
I'm using TreeView, TreeItem of material ui.
I'm trying to style conditionally each node (selected, hover, focus).
actually what I'm trying to do is that only node that not disabledButton (props that come from outside) will be in right color.
only node that selectable will be in active color (expand node not means that node is selectable).
something like this example
I did this example, but the behavior is really weird, sometimes the "child-4" looks like the style of disabledButton even I sent the right props, maybe because it nested props, sometimes the other nested not get the right colors of the hover, focus and selected..
link for example (with colors)
example with different colors
I want it to be in real colors also with the theme (active should be like blue color, hover gray) so I created this example.
example with theme colors
sometimes it works as expected and sometimes is not.
I looked in this issue but it's not like my example but there it uses in classes but I don't want to send this way
After a little while this is what I got. I tried to match the design of the gif as good as possible.
I used this data which I derived from the question. This example has one disabled node and parent node (my-photo.jpg and zip directory). The data array can be expanded endlessly if it matches TreeData type.
export type TreeData = {
id: string;
name: string;
disabledButton: boolean;
children?: TreeData[];
};
const data: TreeData[] = [
{
id: "1",
name: "My Web Site",
disabledButton: false,
children: [
{
id: "2",
name: "images",
disabledButton: false,
children: [
{ id: "3", name: "logo.png", disabledButton: false },
{ id: "4", name: "body-back.png", disabledButton: false },
{ id: "5", name: "my-photo.jpg", disabledButton: true }
]
},
{
id: "6",
name: "resources",
disabledButton: false,
children: [
{
id: "7",
name: "pdf",
disabledButton: false,
children: [
{ id: "8", name: "brochure.pdf", disabledButton: false },
{ id: "9", name: "prices.pdf", disabledButton: false }
]
},
{
id: "10",
name: "zip",
disabledButton: true,
children: [{ id: "11", name: "test.zip", disabledButton: false }]
}
]
}
]
}
];
The CustomTreeView consists of CustomTreeItem that again makes use of CustomContent.
CustomContent is used to handle all events and to display another icon (folder) next to the expandIcon.
In the CustomTreeItem I set the width to fit-content to not select the whole row, but to match the example from the gif:
const CustomTreeItem = (props: TreeItemProps) => (
<TreeItem
ContentComponent={CustomContent}
{...props}
sx={{
width: "fit-content",
".MuiTreeItem-content": {
py: "2px",
width: "fit-content"
}
}}
/>
);
The interesting part is the styling of the CustomTreeView and its usage.
I have packed the classes into objects, which can be overwritten easily. The theming happens in the styles class which is in styles/Styles.ts.
// Styles.ts
import { createTheme } from "#mui/material";
export const getMuiTheme = () =>
createTheme({
palette: {
primary: {
main: "#2160dd"
},
secondary: {
main: "#d3d3d3"
}
}
});
// CustomTreeView.tsx
const classes = {
focused: {
bgcolor: "transparent",
py: "1px",
px: "7px",
border: `1px solid ${getMuiTheme().palette.secondary.main}`
},
selected: {
bgcolor: getMuiTheme().palette.primary.main,
color: "white"
}
};
const CustomTreeView = ({ data }: { data: TreeData[] }) => {
return (
<Box mt={2} ml={2} bgcolor="white" width="300px">
<ThemeProvider theme={getMuiTheme()}>
<TreeView
defaultCollapseIcon={<ArrowDropDownIcon />}
defaultExpandIcon={<ArrowRightIcon />}
defaultEndIcon={<InsertDriveFile />}
sx={{
".MuiTreeItem-root": {
".Mui-focused:not(.Mui-selected)": classes.focused,
".Mui-selected, .Mui-focused.Mui-selected, .Mui-selected:hover":
classes.selected
}
}}
>
{renderTreeData(data)}
</TreeView>
</ThemeProvider>
</Box>
);
};
To render arbitrarily nested data we make use of the recursive method renderTreeData. This way the data array can be expanded endlessly as long as it matches TreeData type.
export const renderTreeData = (data: TreeData[]) => {
return data.map((item) => (
<React.Fragment key={item.id}>
{item.children ? (
<CustomTreeItem
nodeId={item.id}
label={item.name}
disabled={item.disabledButton}
icon={<FolderOutlined />}
>
{renderTreeData(item.children)}
</CustomTreeItem>
) : (
<CustomTreeItem
nodeId={item.id}
label={item.name}
disabled={item.disabledButton}
icon={getFileIcon(item.name)}
/>
)}
</React.Fragment>
));
};
Live Demo
Trying to include AG Grid https://www.ag-grid.com/react-data-grid/ in a Remix project but it is not rendering.
No errors in terminal console or web console, In react project this works fine. So something with remix and complex components. Have tried wrapping in ClientOnly from remix-utils but no difference.
import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import{ClientOnly } from 'remix-utils';
export default function Grid() {
const [rowData] = useState([
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
]);
const [columnDefs] = useState([
{ field: 'make' },
{ field: 'model' },
{ field: 'price' }
])
return (
<ClientOnly>
<div className="ag-theme-alpine" style={{height: 400, width: 600}}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}>
</AgGridReact>
</div>
</ClientOnly>
);
}
Found the error. It was missing the
<Scripts />
tag in the root.tsx
In React application (using Next.js), I am trying to implement graph feature using recharts http://recharts.org/en-US/api/LineChart. My code is as below,
/index.js
const formatDate = (value) => {
return moment.unix(value).format('HH:MM A DD MM, YYYY')
}
const weeklyData = [
{ date: formatDate(1613619000), price: '1200.00' },
{ date: formatDate(1613617200), price: '1300.83' },
{ date: formatDate(1613615400), price: '1250.23' },
{ date: formatDate(1613611800), price: '500.55' },
{ date: formatDate(1613608200), price: '1600.23' },
{ date: formatDate(1613606400), price: '1850.93' },
{ date: formatDate(1613604600), price: '1750.23' },
{ date: formatDate(1613599200), price: '650.23' },
]
<LineChart
width={900}
height={250}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<Tooltip content={<CustomTooltip />} cursor={false} />
<Line type="monotone" dataKey="price" stroke="#4ec6f4" label="Shruthi" />
</LineChart>
/tooltip.js
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="tooltip">
<p className="tooltipLabel">{`$${payload[0].payload?.price}`}</p>
<p className="tooltipDesc">{`${payload[0]?.payload?.date}`}</p>
</div>
)
}
return null
}
CustomTooltip.propTypes = {
type: PropTypes.string,
payload: PropTypes.array,
label: PropTypes.string,
}
export default CustomTooltip
Right now YAxis is restricted to 1000 and graph(scaling) is displaying out of the box and its invisible.
Graph should be display within the container which I have set.
Here price is not fixed, it can be like 123456.88 or more than this.
In all scenario, how can I fix this issue?
try to convert price type to number or use values without single quotes.
Note: if possible, Post complete code for better response
I am trying to create a Pie Chart dashboard. Chart is getting drawn based on the value, but the legend is not getting displayed. I have tried the label as below.
Chart
Summary.js:
import React, { Component } from 'react';
import PieChart from 'react-minimal-pie-chart';
class Summary extends Component {
render()
{
return(
<PieChart className="chart-style" x={50} y={60} outerRadius={100} innerRadius={50}
data={[
{ value: 11, color: '#E38627',label: 'New' },
{ value: 12, color: '#C13C37',label: 'Closed' },
{ value: 8, color: '#6A2135',label: 'Reopened' },
]}
/>
);
}
}
export default Summary;
Adding this works for me.
label={(props) => { return props.dataEntry.title;}}
Example
<PieChart
label={(props) => { return props.dataEntry.title;}}
data={[{ title: "One", value: 10, color: "#E38627" },
{ title: "Two", value: 15, color: "#C13C37" },
{ title: "Three", value: 20, color: "#6A2135" },
]}
/>
Its works at least for display labels, but you can customize it for showing percentage as well.
A good way to solve it is to provide a label function
<PieChart ...
label={props => { return props.data[props.dataIndex].label;}}
/>
You can also just provide label={true} but then it will show te value not the label in the data array.