Scheduler Misaligned slot after moving an event or deleting an event

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 08 Apr 2021 11:05 by ADMIN

OUSSAMA

Created on: 18 Mar 2021 16:23

Category: Kendo UI for jQuery

Type: Bug Report

Scheduler Misaligned slot after moving an event or deleting an event

Hello ,

I've been struggling to fix a problem , but it seems it's a bug from Kendo

the scenario is , when I had two events for same resources (I made a vertical grouping for ressources) then I moved on of the events to another slot it moved but the slots misaligned and the same thing when I remove an event

I will include a screenShot to see that

Attached Files:

5 comments

ADMIN

Martin

Posted on: 08 Apr 2021 11:05

Hello,

Thank you for sharing the video.

Please set the height configuration to resolve the problem. Here is a small video to demonstrate the difference.

Let me know how that works for you.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

OUSSAMA

Posted on: 01 Apr 2021 14:58

I have managed to record a video that show you the problem

the problem comes when you have two events in the same attendes just watch the video and you will Understand

ADMIN

Martin

Posted on: 01 Apr 2021 14:02

Hello,

Here is the modified Dojo with the code you shared along with a video how it behaves on my side. You can see that the cells are not misaligning once I move an event. Could you please let me know if I am missing something?

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

OUSSAMA

Posted on: 25 Mar 2021 16:27

I have modified the Dojo Exemple I will put the code here and you can replace the dojo exemple that you sent me and then try to move two events to same attendes and the move one of the two event to another slot

<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" />

<script src="https://kendo.cdn.telerik.com/2021.1.224/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.timezones.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>


</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script>
let workDuration = 8;
let Unit = 0.5;
let planningUnit = "Heure";
let slotUnit = planningUnit === 'Heure' ? (workDuration * Unit) * 60 : (24 * 60);
$(function() {
$("#scheduler").kendoScheduler({
majorTick: slotUnit,
majorTimeHeaderTemplate: kendo.template("<span class='sch-Titre'>#=kendo.toString(date, 'HH:mm')# - #=kendo.toString(new Date(moment(date).add(slotUnit, 'minutes').format()), 'HH:mm')#</span>"),

views: [
"timelineMonth"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Attendees"],
orientation: "vertical"
},
resources: [
{
field: "attendees",
name: "Attendees",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Attendees"
}
]
});
});


</script>



</body>
</html>

ADMIN

Martin

Posted on: 25 Mar 2021 12:24

Hello,

Thank you for the shared screenshots. Unfortunately they are not enough for me to replicate the issue. Could you please modify this example so that I can observe the problem? I will then be happy to provide more information on the matter.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.