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
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
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
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
Other thing, with your code of the first question is giving me the error
TypeError: Cannot set properties of undefined (setting 'viewClass')
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
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