showLightbox in react application


#1

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>
	);
}

}


#2

Hello @sbanas,
sorry for the delay. Please, try to change the version of “react-scripts” to “3.4.1”, remove the node-modules from your app and then install them again. It should work properly.