Resource Grouping

[Pedro]

Hello, wourld like to know if is possible to divide a column day in two columns , like in the picture.
Example:
On day 1 : Having two columns, one saying Day, and another one saying Night, and the same for the other days.
Must have the resources on the left side too.
Something like the last image(The days divided)(Grouping resources by date)

On the last image i couldnt replicate with the resources on the left side

Thanks,

Pe

 

[Pedro]

Another question, is On the first image on day 3, the first resource, if it is possible to hide the Night event on the column of the day 4
Basically, it is possible to hide events on a day column if that event has start date on another date?
Thanks

[Swathi Ravi]

Hi Pedro,

Sample: https://stackblitz.com/edit/react-mc34wc-6xgc8c?file=index.js

Hello, would like to know if is possible to divide a column day in two columns , like in the picture. On day 1 : Having two columns, one saying Day, and another one saying Night, and the same for the other days.

You can achieve your requirement by using the Schedule's timescale property, as shown in the below snippet.

Api: https://ej2.syncfusion.com/angular/documentation/api/schedule#timescale

https://ej2.syncfusion.com/angular/documentation/api/schedule/views/#timescale

https://ej2.syncfusion.com/angular/documentation/api/schedule/views/#interval

[index.js]

const timeScale = { enable:true, interval: 1440, slotCount: 2 };

function getDateHeaderText(value) {

    var skeleton = value.getDate() === 1 ? 'MMMd' : 'd';

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

}

function 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 timeScale={timeScale}  dateHeaderTemplate={dateHeaderTemplate.bind(this)}>

                        <ViewsDirective>

                            <ViewDirective option='TimelineDay' timeScale={{enable: false }} interval={30}/>

                        </ViewsDirective>

                    </ScheduleComponent>

                </div>

            </div>

 </div>);

Basically, it is possible to hide events on a day column if that event has start date on another date?

You can achieve your requirement by using the Schedule’s eventRendered event, as shown in the below snippet.

Api: https://ej2.syncfusion.com/angular/documentation/api/schedule#eventrendered

[index.js]

function OnEventRendered(args) {

        var Start = args.data.StartTime;

        var End = args.data.EndTime;

        if(Start.getDate() != End.getDate())

        {

            args.element.style.width = '48px';

        }

    }

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

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

                <div className='control-wrapper'>

                    <ScheduleComponent eventRendered={OnEventRendered.bind(this)}></ScheduleComponent>

                </div>

            </div>

</div>);

Regards,

Swathi Ravi

[Pedro]

Hello Swathi,

Thanks for the answer

Regarding for the first question, using timescale, i as wable to make it work using timelineWeek but not with timelineMonth, is is possible with the timelineMonth?

Thanks

[Pedro]

Other thing, with your code of the first question is giving me the error TypeError: Cannot set properties of undefined (setting 'viewClass')

[Pedro]

Hi again, were able to check in your sample correctly now, but if put timelineMonth doesnt work, and on timeline day is possible to get currentMonth lenght days ?
Thanks again

[Vijay Ravi]

Hi Pedro,

Sample: https://stackblitz.com/edit/react-mc34wc-junv4s?file=index.js,index.css

You can achieve your requirement by using the TimelineDay views with intervals and timeScale options. Also we used  dateHeaderTemplate to customize the header and binding the navigating event to get the currentMonth days length to change the interval property in views during the date navigation.

Note

: Not possible to achieve these requirement in TimelineMonth View.

[app.component.ts]

function TimelineGrouping() {

    function dateHeaderTemplate(props) {

        return (

            <div>

                <div className="date">{getDateHeaderText(props.date)}</div>

                <div><span className="day">Day</span><span className="night">Night</span></div>

            </div>

        );

    }

    function onNavigating(args) {

        const { view, currentDate } = args;

        if (scheduleObj.currentView === 'TimelineDay') {

          const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();

          scheduleObj.views[0].interval = daysInMonth;

          scheduleObj.dataBind();

        }

      }

 

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

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

            <div className='control-wrapper'>

                <ScheduleComponent ref={(schedule) => scheduleObj = schedule} cssClass='timelineresource- dateHeaderTemplate={dateHeaderTemplate.bind(this)} 

navigating={onNavigating.bind(this)}

                >

                    <ViewsDirective>

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

                    </ViewsDirective>

 

Regards,

Vijay Ravi