Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
143048 | Mar 1,2019 05:13 PM UTC | Mar 25,2019 03:37 AM UTC | React - EJ 2 | 6 |
![]() |
Tags: Schedule |
<ScheduleComponent height='650px' className={classes.calendar} ref={schedule => this.scheduleObj = schedule}
showHeaderBar = {true}
group={{ byDate: true, allowGroupEdit: true, resources: ['Owners'] }}
resourceHeaderTemplate= { this.resourceHeaderTemplate }
dateHeaderTemplate= { this.dateHeaderTemplate }
eventRendered={this.eventRendered}
actionComplete={this.actionComplete}
actionBegin={this.onActionBegin}
navigating = {this.onSwitchDate}
eventSettings={{ dataSource: eventsArray }} >
<ResourcesDirective>
<ResourceDirective field='resourceIds' title='Assignee' name='Owners' allowMultiple={true} dataSource={users} textField='name' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option='Week' eventTemplate={this.eventTemplate } />
</ViewsDirective>
<Inject services={[ Week ]} />
</ScheduleComponent>
class Calendar extends React.Component {headerTemplate = (event) => {grouping={byDate: true, allowGroupEdit: true, resources: ['Owners']}
if ( !event || !event.Id) {
return null
}
const {classes} = this.props
return (<Router history={this.props.history} location={this.props.location}>
<div className={classes.eventPopupHeader}>
...... <Link className={classes.jobLink} to={`/jobs/${event.job && event.job.id}/edit`}>{event.title}</Link>
</div>
</Router>);
}render() {return <ScheduleComponent height={fullHeight? '100%': "650px" } className={classes.calendar} ref={this.setScheduleObj}</ScheduleComponent>}
showHeaderBar={true}
firstDayOfWeek={1} timezone={tz}
resourceHeaderTemplate={this.resourceHeaderTemplate}
dateHeaderTemplate={this.dateHeaderTemplate}
eventRendered={this.eventRendered}
allowDragAndDrop={true} allowResizing={true}
quickInfoTemplates={{
header: this.headerTemplate,
content: this.contentTemplate,
footer: this.footerTemplate,
}} popupOpen={this.onPopupOpen}
actionComplete={this.actionComplete}
actionBegin={this.onActionBegin}
navigating={this.onSwitchDate}
eventSettings={{dataSource: d}} group={this.groupSettings}>
<ResourcesDirective>
<ResourceDirective field='resourceIds' title='Assignee' name='Owners' allowMultiple={true}
dataSource={users} textField='name' idField='id' colorField='color'>
</ResourceDirective>
</ResourcesDirective>
<ViewsDirective>
<ViewDirective option='Week' eventTemplate={this.eventTemplate}/>
</ViewsDirective>
<Inject services={[Week, Resize, DragAndDrop]}/>}}
export default withStyles(styles)(withRouter(Calendar));
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.