I am having a hard time using a custom toolbar with react-big-calendar and typescript. I am trying to access the original methods of 'next, prev' 'month, day, week' views. I have extensively read... https://github.com/intljusticemission/react-big-calendar/issues/623 https://github.com/intljusticemission/react-big-calendar/issues/818 http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-components
The custom UI is rendering fine, without errors, Now I need access to the original methods so I can manipulate the calendar.
The main problem is that my button is firing, but not actually navigating anything.
Some Issues that I think is...
-- I'm not actually using the navigateMethod like I think
--The default date and date inside BigCalendar isn't actually changing because I'm overwriting it with the same day every time I click?
-- I need to implement this example from their docs?
Custom views can be any React component, that implements the following interface:
interface View {
static title(date: Date, { formats: DateFormat[], culture: string?, ...props }): string
static navigate(date: Date, action: 'PREV' | 'NEXT' | 'DATE'): Date
}
Does anyone have an example I could look at???
Here is my full source code.
import React from 'react'
import { MainContent } from '../../../common/templates/partials'
import BigCalendar from 'react-big-calendar'
import ToolBar from 'react-big-calendar'
import Icon from 'app/common/components/Icon'
import moment from 'moment'
const styles = require('./CalendarUI.scss')
BigCalendar.momentLocalizer(moment) // or globalizeLocalizer
const events = [
{
start: new Date(),
end: new Date(),
title: 'Some title',
},
]
class CustomToolbar extends ToolBar {
render() {
// tslint:disable-next-line:no-console
console.log(this.props, this)
/* tslint:disable-next-line */
const {label, onNavigate} = this.props as any
return (
<div className="rbc-toolbar">
<div>
{/* tslint:disable-next-line */}
<button onClick={() => this.props.onNavigate ? onNavigate(null as any, 'PREV') : undefined}>
<Icon icon="B" />
</button>
<label className="label-date">{label}</label>
{/* tslint:disable-next-line */}
<button onClick={() => this.props.onNavigate ? onNavigate(null, 'NEXT') : undefined}>
<Icon icon="A" />
</button>
</div>
<div>
<span className="rbc-btn-group">
<button>Month</button>
<button>Day</button>
<button>Week</button>
</span>
<button className="btn btn-back">
<Icon icon="R" />
</button>
<button className="btn btn-back">
<Icon icon="meet_now" />
</button>
</div>
</div>
)
}
}
const logger = (data: string) =>
// tslint:disable-next-line:no-console
console.log(data)
const CalendarUI = () => (
<MainContent>
<div className={styles.calendarContainer}>
<BigCalendar
defaultDate={moment().toDate()}
defaultView="month"
events={events}
components={{ toolbar: CustomToolbar }}
startAccessor="startDate"
endAccessor="endDate"
onView={logger}
date={moment().toDate()}
/>
</div>
</MainContent>
)
export default CalendarUI
I figured it out creating a CustomToolbar component. Check out the following code:
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
export interface ICustomTooolbarProps {
view: string;
views: string[];
label: any;
localizer: any;
onNavigate: (action: any) => void;
onView: (view: any) => void;
onViewChange: (view: any) => void;
messages: any;
}
export const navigateContants = {
PREVIOUS: 'PREV',
NEXT: 'NEXT',
TODAY: 'TODAY',
DATE: 'DATE'
};
export const views = {
MONTH: 'month',
WEEK: 'week',
WORK_WEEK: 'work_week',
DAY: 'day',
AGENDA: 'agenda'
};
const CustomToolbar: React.SFC<ICustomTooolbarProps> = (props) => {
function navigate(action) {
props.onNavigate(action);
}
function viewItem(view) {
props.onViewChange(view);
}
function viewNamesGroup(messages) {
const viewNames = props.views;
const view = props.view;
if (viewNames.length > 1) {
return viewNames.map((name) => (
<button
type="button"
key={name}
className={css({ 'rbc-active': view === name })}
onClick={viewItem.bind(null, name)}>
{messages[name]}
</button>
));
}
}
return (
<div className="rbc-toolbar">
<span className="rbc-btn-group">
<button type="button" onClick={navigate.bind(null, navigateContants.TODAY)}>
Current month
</button>
<button type="button" onClick={navigate.bind(null, navigateContants.PREVIOUS)}>
Previous month
</button>
<button type="button" onClick={navigate.bind(null, navigateContants.NEXT)}>
Next month
</button>
</span>
<span className="rbc-toolbar-label">{props.label}</span>
<span className="rbc-btn-group">{viewNamesGroup(props.messages)}</span>
</div>
);
};
export default CustomToolbar;
And here is the code of the BigCalendar using this component
<BigCalendar
popup
onNavigate={(focusDate, flipUnit, prevOrNext) => this.updateCalendarData(focusDate, prevOrNext)}
onSelectEvent={(data) => this.showModalInfo(data)}
events={this.state.data}
views={['month', 'week', 'agenda']}
components={{ toolbar: CustomToolbar }} // <- Custom toolbar
/>
Hope it helps ;)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With