Hi,
Is there an example of a scheduler consuming a web service for meetings that doesn't expect all meetings to be returned.
I am migrating from a server side based application that used ASP.NET AJAX and that version of the scheduler required you to implement a provider that implemented a GetAppointments( RadScheduler owner ) where the owner object had the start and end dates of the visibile scheduler.
I would like to run a client side page with a Kendo UI for jQuery scheduler and then perform a web service call equivalent to the above GetAppointments. But all the examples I have found return all meetings which is not possible since we are reading from a database with many years of meetings.
The documentation
read: {
dataType:
"jsonp"
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