Context
We're using Scheduler component and a custom list of items. We're also using the Draggable component to let the items to be dropped into the Scheduler component. You can find the layout of the implementation in the attachment.
The configuration of the items is the following:
$(element)
.find(`.${NS}customer-list__draggable`)
.kendoDraggable({
hint: () => {
var draggableElem = $(`
<span class="ui-draggable ${NS}customer-list__dragging">
${scope.customer.name} <br>
</span>
`);
draggableElem.css({
borderLeft: `3px solid ${scope.customer.displayColor}`
});
return draggableElem;
},
dragstart: event => {
// prevent dragging on agenda view
if ($rootScope.scheduler.viewName() === "agenda") {
event.preventDefault();
}
},
autoScroll: false,
containment: "window",
cursorOffset: { right: 0, top: 0, left: 0, bottom: 0 },
distance: 50,
group: "schedulerCustomerGroup"
});
The configuration of the Drop are is the following:
scheduler.view().table.kendoDropTargetArea({
group: 'schedulerCustomerGroup',
filter: '.k-scheduler-table td, .k-scheduler-header-all-day td, .k-event',
dragenter: (e) => {
var offset = $(e.dropTarget).offset(),
slot = scheduler.slotByPosition(offset.left, offset.top);
$(slot.element).css('background', '#bce8f1');
},
dragleave: (e) => {
var offset = $(e.dropTarget).offset(),
slot = scheduler.slotByPosition(offset.left, offset.top);
$(slot.element).css('background', '');
},
drop: (event) => {
var offset = $(event.dropTarget).offset(),
slot = scheduler.slotByPosition(offset.left, offset.top),
dragElem = event.draggable.element[0],
customer = _.find($rootScope.customers, {id: $(dragElem).data('customerId')});
$(slot.element).css('background', '');
scheduler.addEvent({
title: customer.name,
start: slot.startDate,
end: slot.endDate,
description: '',
customerId: customer.id,
streetAddr: customer.streetAddr,
city: customer.city,
state: customer.state,
country: customer.country,
zip: customer.zip,
phone: customer.phone,
lat: customer.lat,
long: customer.long,
accountId: customer.accountId,
contactId: customer.d_tx_uid,
isAllDay: slot.isDaySlot,
});
}
});
You can notice the group setting is the same in both configurations: schedulerCustomerGroup.
The filter configured in the kendoDropTargetArea is the following:
As you can see, the filter include all the cells in the Scheduler component.
Problem
The problem I'm having is when using the Work Week, and resizing the browser to an specific dimension, some cells are not being detected as drop area.
As you can see, I cannot drop the item in Wed 2/21.
A workaround is to resize the browser, but that's not a final solution I'm expecting to have.
I see the same issue on your pages
so my question is whether there is any way to prevent this, because when there are many columns, the last borders are seriously damaged as you can see:
Since printing from the scheduler uses the current view, I was would like to make the view be 2 months.
Am trying to show multiple projects and only 30 days worth isn't quite doing it.
SIMILARLY,
if I'm in near the end of the month, showing the Timeline Month view only shows me a few days into the future - I don't care about past days.
Is there a way to set the STARTING DATE in a month view?
IF SO, perhaps specifying an ENDING DATE is the answer to my first question (Start + 60).
Thx
Jaymer...
Hi Team,
I am using Kendo Scheduler in my project. I want to start my week and month from Monday. Currently they are starting from Sunday.
Will you please suggest me a way to solve this.
Thanks
Hi I want to auto close the Popup box whenever any conflict is found in scheduler or when I press OK in warning box. it could either be a edit popup box or create new event popup box. I want both will be auto close after warning message. PFA the same
Regards
Pankaj
Hi
I have tested the demo Scheduler Restriction and find its not giving accurate result when we manipulate date and time. I have added event with daily repeat occurrence (PFA the same 1.png) and open another event window with different date and time and change it manually with different date but same time whose already added (PFA the same 2.png) , hit save then its added successfully. (PFA the same 3.png) which is wrong according to this behaviour. its works fine when we open popup window on same date but only change time manually, problem is with changing date and time both to different ones. Hope you understand this. please resolve this asap.
Regards
Pankaj
If so can you please provide some examples for
Kendo Scheduler for Angular with custom dates range
multiple months examples 1,2,3 months view at same time.
(And does it support multiple months examples 1,2,3 months view at same time.)
Hi, How can I check if an event exists in Kendo Scheduler, including recurring registration?
Please help me, thansk!
Hi
I am trying to set break time like lunch,Tea time to restrict appointment for particular time. All works fine when I Set Major Tick to 60, but its not working properly when Setting Major ticks to 30.
This setting not apply between 3:30PM to 3:45PM when set MajorTick:30 (PFA the same)
My Code for this is as follows:-
function onDataBound(e) {
var scheduler = e.sender;
var slots = $('.k-scheduler-content td[role=gridcell]');
for (var i = 0; i < slots.length; i += 1) {
var currentSlot = $(slots[i]);
var slotData = scheduler.slotByElement(currentSlot);
var items = '';
$.each(BreakTimeList, function (i, item) {
//Trying to set it 3:00PM to 3:30PM and 3:30PM to 4:00 PM
//But this setting not apply between 3:30PM to 3:45PM when MajorTick set to 30
if ((slotData.startDate.getHours() >= 3 && slotData.startDate.getMinutes() >= 00)
&& (slotData.endDate.getHours() <= 3 && slotData.endDate.getMinutes() <= 30)) {
currentSlot.html('<i class="fa fa-stopwatch"></i>');
}
});
}
}
Regards
Pankaj
Hi team
Facing issue related to design. When bind records of around 100 groups then it shows result like this.
I tried with some workaround but still have a few issues. Tried to set the width of the columns using the below code. It increases size but the appointments size not increasing refer to below.
var minColumnWidth = 200;