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... .html#prop-ponents
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 ponent, 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 '../../../mon/templates/partials'
import BigCalendar from 'react-big-calendar'
import ToolBar from 'react-big-calendar'
import Icon from 'app/mon/ponents/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}
ponents={{ toolbar: CustomToolbar }}
startAccessor="startDate"
endAccessor="endDate"
onView={logger}
date={moment().toDate()}
/>
</div>
</MainContent>
)
export default CalendarUI
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./intljusticemission/react-big-calendar/issues/623 https://github./intljusticemission/react-big-calendar/issues/818 http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-ponents
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 ponent, 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 '../../../mon/templates/partials'
import BigCalendar from 'react-big-calendar'
import ToolBar from 'react-big-calendar'
import Icon from 'app/mon/ponents/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}
ponents={{ toolbar: CustomToolbar }}
startAccessor="startDate"
endAccessor="endDate"
onView={logger}
date={moment().toDate()}
/>
</div>
</MainContent>
)
export default CalendarUI
2 Answers
Reset to default 2I figured it out creating a CustomToolbar ponent. 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 ponent
<BigCalendar
popup
onNavigate={(focusDate, flipUnit, prevOrNext) => this.updateCalendarData(focusDate, prevOrNext)}
onSelectEvent={(data) => this.showModalInfo(data)}
events={this.state.data}
views={['month', 'week', 'agenda']}
ponents={{ toolbar: CustomToolbar }} // <- Custom toolbar
/>Hope it helps ;)
Not positive on the TS parts, but I recently implemented a custom Toolbar myself. I copied the original Toolbar, and then adjusted it to do what I required. My custom stuff isn't that important, but this should show you how they originally implemented the navigate bits.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import ToolbarDateHeader from './ToolbarDateHeader.ponent';
import { Icon, Button, ButtonGroup, ButtonToolbar } from '../app';
const navigate = {
PREVIOUS: 'PREV',
NEXT: 'NEXT',
TODAY: 'TODAY',
DATE: 'DATE'
};
const propTypes = {
view: PropTypes.string.isRequired,
views: PropTypes.arrayOf(PropTypes.string).isRequired,
label: PropTypes.node.isRequired,
localizer: PropTypes.object,
onNavigate: PropTypes.func.isRequired,
onView: PropTypes.func.isRequired
};
export default class Toolbar extends Component {
static propTypes = propTypes;
render() {
let {
localizer: { messages },
label,
date
} = this.props;
return (
<ButtonToolbar>
<ButtonGroup>
<Button onClick={this.navigate.bind(null, navigate.TODAY)}>
{messages.today}
</Button>
<Button onClick={this.navigate.bind(null, navigate.PREVIOUS)}>
<Icon glyph="caret-left" />
</Button>
<Button onClick={this.navigate.bind(null, navigate.NEXT)}>
<Icon glyph="caret-right" />
</Button>
</ButtonGroup>
<ToolbarDateHeader date={date} onChange={this.toThisDay}>
{label}
</ToolbarDateHeader>
<ButtonGroup className="pull-right">
{this.viewNamesGroup(messages)}
</ButtonGroup>
</ButtonToolbar>
);
}
toThisDay = date => {
this.props.onView('day');
// give it just a tick to 'set' the view, prior to navigating to the proper date
setTimeout(() => {
this.props.onNavigate(navigate.DATE, date);
}, 100);
};
navigate = action => {
this.props.onNavigate(action);
};
view = view => {
this.props.onView(view);
};
viewNamesGroup(messages) {
let viewNames = this.props.views;
const view = this.props.view;
if (viewNames.length > 1) {
return viewNames.map(name => (
<Button
key={name}
className={cn({
active: view === name,
'btn-primary': view === name
})}
onClick={this.view.bind(null, name)}
>
{messages[name]}
</Button>
));
}
}
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742387484a4434348.html
评论列表（0条）