How to get selected cell date in the div in the timeline view?
In the calendarview, for the selected cell date it's having date-date in the div as shown in the image attached
Likewise, whether its possible to get selected cell date in scheduler timeline view?
Hey prasath,
Thanks for reaching out.
By your description, you're looking for https://bryntum.com/products/calendar/docs/api/Scheduler/view/TimelineBase#property-selectedCell or https://bryntum.com/products/calendar/docs/api/Scheduler/view/TimelineBase#property-selectedCells properties, If you want to retrieve the currently selected cell (please pay attention on how selectionMode is configured).
Depending on what you're trying to achieve, perhaps this feature would be something you can look into https://bryntum.com/products/calendar/docs/api/Scheduler/feature/ScheduleContext.
Best regards,
Márcio
How to ask for help? Please read our Support Policy
Hi Marcio,
In the month view, the data-date attribute is present in the calendar cells as shown in the image attached, making it accessible for automation testing. However, in the scheduler's timeline view, Bryntum might not include a data-date attribute directly in the cell elements.
To achieve the same functionality in the timeline view, Kindly provide us the way?
Hi,
In scheduler we can't set date to each cell because it is a canvas. But you can get the date of the cell using scheduleContext feature https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/ScheduleContext
Please try in this demo https://bryntum.com/products/scheduler/examples/basic/
With the code below
import { Scheduler, Rectangle } from '../../build/scheduler.module.js?482861';
import shared from '../_shared/shared.module.js?482861';
//region Data
const
resources = [
{ id : 'r1', name : 'Mike' },
{ id : 'r2', name : 'Linda' },
{ id : 'r3', name : 'Don' },
{ id : 'r4', name : 'Karen' },
{ id : 'r5', name : 'Doug' },
{ id : 'r6', name : 'Peter' },
{ id : 'r7', name : 'Sam' },
{ id : 'r8', name : 'Melissa' },
{ id : 'r9', name : 'John' },
{ id : 'r10', name : 'Ellen' }
],
events = [
{
id : 1,
resourceId : 'r1',
startDate : new Date(2017, 0, 1, 10),
endDate : new Date(2017, 0, 1, 12),
name : 'Click me',
iconCls : 'b-fa b-fa-mouse-pointer'
},
{
id : 2,
resourceId : 'r2',
startDate : new Date(2017, 0, 1, 12),
endDate : new Date(2017, 0, 1, 13, 30),
name : 'Drag me',
iconCls : 'b-fa b-fa-arrows-alt'
},
{
id : 3,
resourceId : 'r3',
startDate : new Date(2017, 0, 1, 14),
duration : 2,
durationUnit : 'h',
name : 'Double click me',
eventColor : 'purple',
iconCls : 'b-fa b-fa-mouse-pointer'
},
{
id : 4,
resourceId : 'r4',
startDate : new Date(2017, 0, 1, 8),
endDate : new Date(2017, 0, 1, 11),
name : 'Right click me',
iconCls : 'b-fa b-fa-mouse-pointer'
},
{
id : 5,
resourceId : 'r5',
startDate : new Date(2017, 0, 1, 15),
endDate : new Date(2017, 0, 1, 17),
name : 'Resize me',
iconCls : 'b-fa b-fa-arrows-alt-h'
},
{
id : 6,
resourceId : 'r6',
startDate : new Date(2017, 0, 1, 16),
endDate : new Date(2017, 0, 1, 19),
name : 'Important meeting (read-only)',
iconCls : 'b-fa b-fa-exclamation-triangle',
eventColor : 'red',
readOnly : true
},
{
id : 7,
resourceId : 'r6',
startDate : new Date(2017, 0, 1, 6),
endDate : new Date(2017, 0, 1, 8),
name : 'Sports event',
iconCls : 'b-fa b-fa-basketball-ball'
},
{
id : 8,
resourceId : 'r7',
startDate : new Date(2017, 0, 1, 9),
endDate : new Date(2017, 0, 1, 11, 30),
name : 'Dad\'s birthday!',
iconCls : 'b-fa b-fa-birthday-cake',
// Custom styling from data
style : 'background-color : teal; font-size: 18px',
// Prevent default styling
eventStyle : 'none'
}
];
//endregion
const scheduler = new Scheduler({
appendTo : 'container',
resources,
events,
startDate : new Date(2017, 0, 1, 6),
endDate : new Date(2017, 0, 1, 20),
viewPreset : 'hourAndDay',
rowHeight : 50,
barMargin : 5,
multiEventSelect : true,
columns : [
{ text : 'Name', field : 'name', width : 130 }
],
features : {
scheduleContext : {
triggerEvent : 'click',
renderer : (context, element) => {
// element.innerText = '😎';
// console.log(context, element);
// console.log('date', context.date);
}
}
}
});
window.getSelectedCellDate = () => {
const cell = document.querySelector('.b-schedule-selected-tick');
if (!cell) {
return null;
}
const { x, y } = Rectangle.from(cell);
const date = scheduler.getDateFromCoordinate(x, 'ceil');
console.log(date);
};
Best regards,
Tasnim
How to ask for help? Please read our Support Policy
Please elaborate your problem. What's the question? You need to change DOM or you need to get date on cellclick? And what from these two makes problems for you?
All the best,
Alex Lazarev
How to ask for help? Please read our Support Policy
We do not write the code in bounds of forum support. If you need help with development, contact us via bryntum.com/services
Hi Alex,
Yes, We need in DOM which will be display in div attributes right. Because it needs to be accessible for automation testing. In bryntum calendar monthview, on cellclick we can able to get data-date attribute likewise we need in scheduler timeline view either data-date or id. Kindly help on this.
Hi,
This is not possible because scheduler doesn't have date cells.
As you can see in the image that it's a single div element that is representing the whole row.
If you could let us know what are you trying to test, we might be able to help!
Best regards,
Tasnim
How to ask for help? Please read our Support Policy
