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.
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
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?
I'm using a Symfony-based react application and am trying to include a datepicker using the react-datepicker module.
I can create the datepicker object, but it does not appear to be styled correctly - when I click to select the date, there is just a vertical list of numbers that go to the top of the page (I've seen lots of people experience this online, often because they have not imported the datepicker css).
I am importing the react-datepicker.css file and if I inspect my datepicker object in the browser it says: class="react-datepicker-wrapper", so I presume that the import is working.
I am wondering whether I also need to do something else to another file within my application, perhaps to the webpack file, or maybe something else Symfony-related, but I'm a real novice with those things and am a bit stuck.
Your help would be much appreciated! Code below!
import DatePicker from "react-datepicker";
import "../../../node_modules/react-datepicker/dist/react-datepicker.css";
class MyWidget extends Component {
constructor(props) {
super(props);
this.state = {
startDate: new Date()
}
}
handleCalendarClose() {
console.log("Calendar closed")
}
handleCalendarOpen() {
console.log("Calendar opened")
}
setStartDate(startDate) {
this.setState({
startDate: startDate
});
};
render() {
const { startDate } = this.state;
return (
<div>
From: <DatePicker
selected={startDate}
onChange={startDate => this.setStartDate(startDate)}
onCalendarClose={this.handleCalendarClose}
onCalendarOpen={this.handleCalendarOpen}
/>
</div>
);
}
}
}
From the docs at: https://github.com/Hacker0x01/react-datepicker
You will also need to require the CSS file from this package (or
provide your own). The example below shows how to include the CSS from
this package if your build system supports requiring CSS files
(Webpack is one that does).
add this line to your code...
import "react-datepicker/dist/react-datepicker.css";
For example...
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
const Example = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
);
};
Import like this, it is working for me
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
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}/>