I'm trying to use React Full Calendar inside my project and though the calendar gets rendered in the correct way, the styling is a bit off. Here's how it is looking currently:
As you can see, in the header toolbar, the month word isn't aligned in the middle which is the same for other words and icons. Maybe, the size of the button itself is looking small in height.
The functionality of the button is working correctly but the styling isn't how it is that they are showing in documentation.
Here's the link to how it should actually look: https://fullcalendar.io/docs/toolbar-demo
Here's how I've included the FullCalendar:
import React, { Component } from 'react'
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import interactionPlugin from "#fullcalendar/interaction";
import timeGridPlugin from "#fullcalendar/timegrid";
import "#fullcalendar/common/main.css";
import "#fullcalendar/daygrid/main.css";
import "#fullcalendar/timegrid/main.css";
class TimelineScheduler3 extends Component {
handleDateClick = (arg) => { // bind with an arrow function
alert(arg.dateStr)
}
render() {
return (
<FullCalendar
plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
initialView="dayGridMonth"
weekends={true}
dateClick={this.handleDateClick}
headerToolbar={{
left: 'dayGridMonth,timeGridWeek,timeGridDay',
center: 'title',
right: 'prevYear,prev,next,nextYear'
}}
events={
[
{ title: 'event 1', date: '2021-05-05' },
{ title: 'event 2', date: '2021-05-07' }
]}
/>
)
}
}
export default TimelineScheduler3;
Is some import missing from my end or is the styling of my application overriding styling of FullCalendar?
Related
I am using FullCalendar and wanted to modify some of the styles within the component. I'm implementing it in a react project, but once I added the styled wrapper that will overwrite the internal styles my calendar loses the timeGridPlugin and does not show any times.
I followed this StackOverflow post already: is it possible Customise FullCalendar with css in react?
A condensed version of my code:
import styled from "#emotion/styled";
import FullCalendar, { formatDate } from "#fullcalendar/react";
import dayGridPlugin from "#fullcalendar/daygrid";
import timeGridPlugin from "#fullcalendar/timegrid";
import interactionPlugin from "#fullcalendar/interaction";
export const StyleWrapper = styled.div`
.fc-toolbar-title {
color: red;
}
`;
render() {
return (
<div
style={{
height: "100vh",
padding: "2em",
fontFamily: `'Quicksand', sans-serif`,
}}
data-testid="FullCalender"
>
<StyleWrapper>
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
headerToolbar={{
start: "prev,next today",
center: "title",
end: "dayGridMonth,timeGridWeek,timeGridDay",
}}
initialView="timeGridWeek"
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
weekends={true}
select={this.handleSelectSlot}
eventClick={this.handleSelectEvent}
eventDrop={this.handleEventDrop}
height={"90%"}
/>
</StyleWrapper>
</div>
);
}
My question: How to add styling without affecting the timeGridPlugin?
When I comment out <StyleWrapper></StyleWrapper>, then the timeGridPlugin works: (https://i.stack.imgur.com/UgdYX.png)
With StyleWrapper: (https://i.stack.imgur.com/imzWv.png)
i'm new to ReactJs and i'm trying to class component of FullCalendar to a functional component i watched some tutorials but when i did it i keep getting this error
Uncaught TypeError: Cannot read properties of null (reading 'getApi')
and i searched for a functional component for the FullCalendar but i didn't find anything useful
this is my class component:
import React from "react";
import FullCalendar from "#fullcalendar/react";
import './Fullcalendar.css'
import dayGridPlugin from "#fullcalendar/daygrid";
import interactionPlugin from "#fullcalendar/interaction"; // needed for dayClick
export default class DemoApp extends React.Component {
calendarComponentRef = React.createRef();
state = {
calendarWeekends: true,
calendarEvents: [
// initial event data
{ title: "Event Now", start: "2022-03-21", backgroundColor: "red" }
]
};
render() {
setTimeout(() => {
let calendarApi = this.calendarComponentRef.current.getApi();
calendarApi.gotoDate(this.props.date); // call a method on the Calendar object
});
return (
<div>
<div className="demo-app">
<div className="demo-app-calendar">
<FullCalendar
id="fullCalendar"
contentHeight={720}
firstDay={1}
defaultView="dayGridMonth"
plugins={[dayGridPlugin, interactionPlugin]}
ref={this.calendarComponentRef}
events={this.state.calendarEvents}
/>
</div>
</div>
</div>
);
}
}
and this is what i did to converted to a functional component:
import React, { useRef } from "react";
import FullCalendar from "#fullcalendar/react";
import './Fullcalendar.css'
import dayGridPlugin from "#fullcalendar/daygrid";
import interactionPlugin from "#fullcalendar/interaction"; // needed for dayClick
function Fullcalendar({date}) {
const calendarComponentRef = useRef(null);
setTimeout(() => {
let calendarApi = calendarComponentRef.current.getApi();
calendarApi.gotoDate(date);
});
return (
<div>
<div className="demo-app">
<div className="demo-app-calendar">
<FullCalendar
id="fullCalendar"
contentHeight={720}
firstDay={1}
defaultView="dayGridMonth"
plugins={[dayGridPlugin, interactionPlugin]}
ref={calendarComponentRef}
/>
</div>
</div>
</div>
)
}
export default Fullcalendar
i tried and i searched but i don't know what i have to do.
It seems that you are setting a timeout which has no time associated, so it will run immediately. It tries to get the calendar component, but that seems to be before you've even returned the calendar component from your function, so I would expect that the calendar object doesn't exist yet, which is why your code can't find it.
Also, all you're doing with that API object is immediately setting the calendar date, but that's something you can do directly within the calendar options, if you want the calendar to start at a specific date.
Why not simply add
initialDate={date}
to the options in the <FullCalendar section instead?
I had your same problem. We can reach this api only after your component finishes rendering calendar. So when I put it in useEffect, it worked!
import React, { useRef } from "react";
import FullCalendar from "#fullcalendar/react";
import './Fullcalendar.css'
import dayGridPlugin from "#fullcalendar/daygrid";
import interactionPlugin from "#fullcalendar/interaction"; // needed for dayClick
function Fullcalendar({date}) {
const calendarComponentRef = useRef();
useEffect(() => {
let calendarApi = calendarComponentRef.current.getApi();
calendarApi.gotoDate(date);
});
return (
<div>
<div className="demo-app">
<div className="demo-app-calendar">
<FullCalendar
id="fullCalendar"
contentHeight={720}
firstDay={1}
defaultView="dayGridMonth"
plugins={[dayGridPlugin, interactionPlugin]}
ref={calendarComponentRef}
/>
</div>
</div>
</div>
)
}
export default Fullcalendar
Im try change my full calendar date format AM,PM to 24hours. I read official documentation and find titleFormat={hour12:false} its the solution for 24hours format. But i try this not working. Maybe who faced such a problem can help.
This my reactJs component code
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import interactionPlugin from '#fullcalendar/interaction'
import timeGridPlugin from '#fullcalendar/timegrid';
import "#fullcalendar/daygrid/main.css";
import "#fullcalendar/timegrid/main.css";
export default class Calendar extends Component {
// declare any necessary functions such as handleDateClick, etc.
render() {
const events = [{ title: "today's event", date: new Date() }];
return <FullCalendar
initialView='timeGridWeek'
headerToolbar={{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek'
}}
titleFormat={{
hour12: false
}}
events={events}
plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
allDaySlot={false}
editable={true}
timeFormat="H:mm"
/>
}
}
if (document.getElementById('calendar')) {
ReactDOM.render(<Calendar />, document.getElementById('calendar'));
}
View:
If you're using the v5 (latest) of fullcalendar, the option you're looking for is eventTimeFormat:{ hour12: false } I believe. If you're using a different version it'll probably be something else.
I have a simple section in which I am showing a calendar for my users using the FullCalendar API. I want to disable only the dates from the previous month in ReactJS.
selectAllow docs
Here is working demo using jQuery. I want the same but in ReactJS - JSFiddle
The expected result
Here is what I have tried so far using the FullCalendar documentation
Here is my component
import React, { useState, useEffect, useContext, useRef } from 'react';
import { Calendar as FullCalendar } from '#fullcalendar/core';
import googleCalendarPlugin from '#fullcalendar/google-calendar';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import interactionPlugin from '#fullcalendar/interaction';
import momentPlugin from '#fullcalendar/moment';
import moment from 'moment'
const Calendar = (movieProps) => {
const [calendar, setCalendar] = useState('');
const calendarRef = useRef('');
useEffect(() => {
if (calendarRef.current && !calendar) {
setCalendar(new FullCalendar(calendarRef.current, {
plugins: [dayGridPlugin, momentPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin],
columnHeader: false,
fixedWeekCount: false,
backgroundColor: 'transparent',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,listYear',
},
selectable: true,
//disable past date of previous month
selectAllow: function(selectInfo) {
var ms = moment().startOf("month");
return ms.isSameOrBefore(selectInfo.start);
},
events: [{
title: 'Womens History Month ',
start: '2020-03-01',
description: ' support for womens rights and progress throughout the month of March.Get this video',
url: 'dev91b558163211cf9d2e7d1efe6c3e32035973fdf9',
classNames: ['event1']
}
],
}));
}
}, [calendarRef.current]);
return (
<>
<CalendarContainer ref={calendarRef}>
{calendar && calendar.render ? calendar.render(): null}
</CalendarContainer>
</>
)
}
export default Calendar;
NOTE: am using FullCalendar v4, MomentJS is loaded; I can see it in the console.
Unfortunately, my solution is not working at all.
What do I need to do to achieve what I want?
I think you didn't install #fullcalendar/interaction
the selectable prop can't work without it
first you need to install it use it npm i #fullcalendar/interaction
then import it import interactionPlugin from '#fullcalendar/interaction';
after that, you should add this element to the plugins Prop, like this
<FullCalendar
plugins={[ interactionPlugin, dayGridPlugin ]}
initialView="dayGridMonth"
selectable={true}
dateClick={alert('hasgadf')}
/>
and the last thing you need to add selectable={true} like the example above
you should see this doc
https://fullcalendar.io/docs/selectable
const selectionHandler = (selectInfo) => {
var currentTime = moment()
return currentTime.isBefore(selectInfo.start)
}
<FullCalendar ...props selectAllow={selectionHandler}/>
I'm starting to understand to work with Material Ui with React, I'm getting difficult to customize the components.
I have this example of the AppBar:
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
const styles = {
title: {
cursor: 'pointer',
},
};
const AppBarExampleIconButton = () => (
<AppBar
title={<span styles={styles.title}>Portofolio</span>}
iconElementRight={<FlatButton label="Save" />} />
);
export default AppBarExampleIconButton;
I can customize the title, but I want to customize the AppBar, in the documentation the Style object Override the inline-styles of the root element. But I'm not understanding out it works, could someone help me?
Depend on of what you try to do you can customize the AppBar in a multiple way. One of them is if you only want to change the color etc to make a theme.js file and import it inside MuiThemeProvider
You do this in the root file of your app. Ex
// Material Setup
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
// Our Own Theme
import theme from './layout/theme';
const Root = () =>
<MuiThemeProvider muiTheme={getMuiTheme(theme)}>
<YourApp />
</MuiThemeProvider>;
SO if you want to do this inline like you say you make a object inside your styles object who is the css you want to apply to the appbar.
const styles = {
appbar: {
backgroundColor: 'blue'
}
}
And you call it as a props for the AppBar component
<AppBar style={styles.appbar} />
Also if you look at the docs here you can see the title have is own style props for him call titleStyle
Hope that can help you figured out.