Hi there -
Love your documentation, love the codebase. Quick question, I am running your Scheduler inside react, and have followed your tutorial (https://dhtmlx.com/blog/use-dhtmlx-scheduler-component-react-js-library-demo/) to create it. I’m having issue with actually getting the lightbox to show even with default values.
When I click “onClick”, the correct ID shows and the logs do say that the event was triggered, but no lightbox shows up. What am I doing wrong or missing? Thanks!
import React, { Component } from 'react';
import 'dhtmlx-scheduler';
import 'dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css';
const scheduler = window.scheduler;
export default class Scheduler extends Component {
initSchedulerEvents() {
if (scheduler._$initialized) {
return;
}
const onDataUpdated = this.props.onDataUpdated;
scheduler.attachEvent("onClick", function (id, e){
scheduler.showLightbox(id);
return true;
});
scheduler.attachEvent('onEventAdded', (id, ev) => {
if (onDataUpdated) {
onDataUpdated('create', ev, id);
}
});
scheduler.attachEvent('onEventChanged', (id, ev) => {
if (onDataUpdated) {
onDataUpdated('update', ev, id);
}
});
scheduler.attachEvent('onEventDeleted', (id, ev) => {
if (onDataUpdated) {
onDataUpdated('delete', ev, id);
}
});
scheduler._$initialized = true;
}
componentDidMount() {
scheduler.skin = 'material';
scheduler.xy.scale_width = 70;
scheduler.config.header = [
'day',
'week',
'month',
'date',
'prev',
'today',
'next'
];
scheduler.config.hour_date = '%g:%i %A';
//scheduler.config.lightbox_recurring = 'series';
scheduler.config.responsive_lightbox = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.details_on_create = true;
scheduler.config.lightbox.sections=[
{ name:"description", height:50, type:"textarea", map_to:"text", focus:true},
];
this.initSchedulerEvents();
const { events } = this.props;
scheduler.init(this.schedulerContainer, new Date(2020, 5, 10), "week");
scheduler.clearAll();
scheduler.parse(events);
}
shouldComponentUpdate(nextProps) {
return this.props.timeFormatState !== nextProps.timeFormatState;
}
componentDidUpdate() {
scheduler.render();
}
setTimeFormat(state) {
scheduler.config.hour_date = state ? '%H:%i' : '%g:%i %A';
scheduler.templates.hour_scale = scheduler.date.date_to_str(scheduler.config.hour_date);
}
render() {
const { timeFormatState } = this.props;
this.setTimeFormat(timeFormatState);
return (
<div
ref={ (input) => { this.schedulerContainer = input } }
style={ { width: '100%', height: '100%' } }
></div>
);
}
}