Name of Scheduler

Scheduler
#1

How can i put name on the top of scheduler.

#2

Hello @vshubh ,

Could you please clarify, what do you mean by “top of scheduler”?
If you want to place some content under the scheduler’s container, you can place it under the scheduler’s HTML container, as follows:

<div>Name</div>
<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;">
	<div class="dhx_cal_navline">
		<div class="dhx_cal_prev_button">&nbsp;</div>
		<div class="dhx_cal_next_button">&nbsp;</div>
		<div class="dhx_cal_today_button"></div>
		<div class="dhx_cal_date"></div>
		<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
		<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
		<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
	</div>
	<div class="dhx_cal_header">
	</div>
	<div class="dhx_cal_data">
	</div>
</div>

Demo:
http://snippet.dhtmlx.com/5/7b5545672

If you want to return the name in some of the scheduler cells, you can do it with the templates functionality, here the list of scheduler’s templates:
https://docs.dhtmlx.com/scheduler/api__refs__scheduler_templates.html

#3

Yes i want this only but how can i do it in react project.

#4

Hello @vshubh,

I do not specialize in react, but basically, all that you have to do, is to return the component with the name under the scheduler’s component, as follows(app.js):

 render() {
        const { currentTimeFormatState } = this.state;
        return (
            <div>
                <MyComponents.AppName color="blue" />
                <div className='scheduler-container'>
                    <Scheduler
                        events={data}
                        timeFormatState={currentTimeFormatState}
                        onDataUpdated={this.logDataUpdate}
                    />
                </div>
            </div>
        );
    }

Screencast:
https://recordit.co/y6u2Qk2ryJ