CSS STYLE FIX

[Alex]

Good morning , 

I have a request done by my final customer. 

He asked me if it's possible to see the shift of the night (22-06) in one row instead to split in 2 rows.

Thanks Alex

Actual

Wanted

[Ashokkumar Karuppasamy]

Hi Alex

we suggest using the Schedule Timeline Day view. Set the interval to 31 days and enable the time scale with a 1440-minute interval per day. This will display the schedule similar to the Month view, and with this approach, you can achieve your requirement. The attached code snippet and sample demonstration are provided below. Please try the solution and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-znxbhmnn-rbcibn5s?file=index.js

    const  timeScale = {

        enable: true,

        interval: 1440,

        slotCount: 1,

      }

    return (<div className='schedule-control-section'>

            <div className='col-lg-12 control-section'>

                <div className='control-wrapper'>

                    <ScheduleComponent cssClass='timeline-resource-grouping' width='100%'  height='650px' selectedDate={new Date(2023, 0, 4)}  timeScale={timeScale} currentView='TimelineDay'eventSettings={{ dataSource: data }} group={{ resources: ['Projects', 'Categories'] }}>

                        <ResourcesDirective>

                            <ResourceDirective field='TaskId' title='Category' name='Categories' allowMultiple={true} dataSource={categoryData} textField='text' idField='id' groupIDField='groupId' colorField='color'/>

                        </ResourcesDirective>

                        <ViewsDirective>

                            <ViewDirective option='TimelineDay' interval={31}/>

                        </ViewsDirective>

                        <Inject services={[TimelineViews, TimelineMonth, Agenda, Resize, DragAndDrop, TimelineWeek]}/>

                    </ScheduleComponent>

                </div>

            </div>

        </div>);

 

Regards,
Ashok

[Alex]

Hi Ashok,

my customer doesn't like the visualization:

As I print in my first image He want to see only header with day not with hour otherwise i have large bar not small box

Thanks

 

[Alex]

Excusme another indication: the user want to select month not DAY in the picker on the corner

Thanks Alex

[Swathi Ravi]

Hi Alex,

Sorry for the misunderstanding.

You can achieve the desired layout using the snippet shared below, where we have customized the timeline day view with time scale and date header templates. Note that this approach allows selection by date only, not by month.

Sample: Tan1fif2 (forked) - StackBlitz

const TimelineGrouping = () => {

    const data = extend([], dataSource.resourceData.concat(dataSource.timelineResourceData), null, true);

    const categoryData = [

        { text: 'Nancy', id: 1, groupId: 1, color: '#df5286' },

        { text: 'Steven', id: 2, groupId: 1, color: '#7fa900' },

        { text: 'Robert', id: 3, groupId: 2, color: '#ea7a57' },

        { text: 'Smith', id: 4, groupId: 2, color: '#5978ee' },

        { text: 'Michael', id: 5, groupId: 3, color: '#df5286' },

        { text: 'Root', id: 6, groupId: 3, color: '#00bdae' }

    ];

    const timeScale = {

        enable: true,

        interval: 1440,

        slotCount: 2,

    }

    const endHour = "20:00";

    const instance = new Internationalization();

    const getDateHeaderText = (value) => {

        return instance.formatDate(value, { skeleton: 'd' });

    }

    const dateHeaderTemplate = (props) => {

        return (<div><div>{getDateHeaderText(props.date)}</div></div>);

    }

    return (<div className='schedule-control-section'>

        <div className='col-lg-12 control-section'>

            <div className='control-wrapper'>

                <ScheduleComponent cssClass='timeline-resource-grouping' width='100%' endHour={endHour} height='650px' selectedDate={new Date(2023, 0, 1)} timeScale={timeScale} currentView='TimelineDay' eventSettings={{ dataSource: [] }} group={{ resources: ['Projects', 'Categories'] }} dateHeaderTemplate={dateHeaderTemplate}>

                    <ResourcesDirective>

                        <ResourceDirective field='TaskId' title='Category' name='Categories' allowMultiple={true} dataSource={categoryData} textField='text' idField='id' groupIDField='groupId' colorField='color' />

                    </ResourcesDirective>

                    <ViewsDirective>

                        <ViewDirective option='TimelineDay' interval={31} />

                    </ViewsDirective>

                    <Inject services={[TimelineViews, TimelineMonth, Agenda, Resize, DragAndDrop, TimelineWeek]} />

                </ScheduleComponent>

            </div>

        </div>

    </div>);

};

index.css:

.timeline-resource-grouping.e-schedule .e-timeline-view .e-date-header-wrap tr:nth-child(2),

.timeline-resource-grouping.e-schedule .e-timeline-month-view .e-date-header-wrap tr:nth-child(2) {

    display: none;

}

.timeline-resource-grouping.e-schedule .e-timeline-view .e-date-header-wrap table col, 

.timeline-resource-grouping.e-schedule .e-timeline-view .e-content-wrap table col, 

.timeline-resource-grouping.e-schedule .e-timeline-month-view .e-date-header-wrap table col, 

.timeline-resource-grouping.e-schedule .e-timeline-month-view .e-content-wrap table col {

    width: 80px;

}

Regards,

Swathi

[Alex]

Good afternoon Swathi,

thanks i try to improve the layout and I will show to final customer.

I will give you a feedback

Thanks

[Alex]

Good afternoon Swathi,

thanks i try to improve the layout and I will show to final customer.

I will give you a feedback

Thanks

[Alex]

Good afternoon Swathi,

thanks i try to improve the layout and I will show to final customer.

I will give you a feedback

Thanks

[Ashokkumar Karuppasamy]

Hi Alex,

Thanks for the update. We will wait to hear from you.

Regards,

Ashok

[Alex]

Good Morning Ashok,

I'm use a workaround. 

I set Monthly view

I set start time 0 and end time 1 so the user see the interface as he wants. 

But when I open the modal the datetime is correct by using a custom template that it doesn't show the two incorrect datetime used as workaround.

Thanks a lot

[Alex]

Good Morning Ashok,

I'm use a workaround. 

I set Monthly view

I set start time 0 and end time 1 so the user see the interface as he wants. 

But when I open the modal the datetime is correct by using a custom template that it doesn't show the two incorrect datetime used as workaround.

Thanks a lot

[Ashokkumar Karuppasamy]

Hi Alex,

We suspect that the issue may be related to the editor template you are using. To help us understand and address the issue more effectively, could you please provide additional details? This will ensure our understanding aligns with your expectations and allows us to offer the best possible assistance.

We would greatly appreciate it if you could share more information about your scenario, along with a sample that replicates the issue. Additionally, please provide details about the situations where you are facing these issues. If possible, sharing code snippets and videos would help us gain better clarity.

Regards,

Ashok

[Alex]

Good morning  Ashok

I gave to you all the info that you need.

The component doesn't make what the final customer wants.

Is not a problem as i wrote I use a workaround that set StartTime = 00:00 and EndTime:01:00.

So the event stay alligned and for me works.

With the template instead I show the correct timining.

It's not necessary any other help 

Thanks

Alex

[Ashokkumar Karuppasamy]

Hi Alex

Thanks for the update. Let us know if you need any furthur assiatnce.

Regard,
Ashok