BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<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));