or
1 answer
57 views
Hello team,
I have a requirement in Kendo Scheduler. I want to make some text bold in appointments displayed in the scheduler. Please refer highlighted area in the screenshot below. I tried to set datasource using HTML tags for that particular text but it is showing HTML as it is , because it is not appending HTML tag using append function of jquery.
I am using eventTemplate feature of the Scheduler.
Code Example of same is here
Please help!
Also, facing one more issue. When bind records of around 100 groups then it shows result like this.
I tried with some work around but still has few issues. Tried to set width of the columns using below code. It increase size but appointments size not increasing refer below.
var minColumnWidth = 200;var columns = $(".k-scheduler-header .k-scheduler-table > tbody > tr:last-child > th").length;
var availableWidth = $("#Scheduler").width() - $(".k-scheduler-layout > tbody > tr > td:first-child").width() - parseInt($(".k-scheduler-header").css("padding-right")) - 1;
var width = Math.max(columns * minColumnWidth, availableWidth);
$(".k-scheduler-content .k-scheduler-table").width(width);
$(".k-scheduler-header .k-scheduler-table").width(width);
Neli
Telerik team
answered
on
13 Jun 2023
1 answer
67 views
Hi
I have a Requirement where only one attendee is allowed to schedule his appointments , there are many attendee exists. so I want to show only one attendee in dropdown list and I have populated with single attendee in dropdown list but after that create event is not working in Scheduler. please help me to sort out this issue or please provide me option so that I can disable attendee dropdown list.
Thanks & Regards
Neli
Telerik team
answered
on
12 Jun 2023
1 answer
52 views
Hi, we have a requirement to customise the month view of the scheduler. We are developing a system for users to log their on-call hours and overtime. Our pay month starts on the 24th through to the 23rd of the following month.
Is there a way customise the month view so that if Jan is selected it displays from Jan 24th through to Feb 23rd... if Feb is selected it displays from Feb 24th to March 23rd etc.
When viewing a month any dates outside the range should be disabled so for example if viewing May 2023 where May 24th is a Wednesday and the week begins on Mondays then May 22nd and 23rd would be disabled and as Jun 23rd is a Friday June 24th and 25th would be disabled.
Many thanks
Attached are examples I was able to do using FullCalendar JS by AR Shaw but I would prefer to use Kendo.
Nikolay
Telerik team
answered
on
16 May 2023
1 answer
49 views
When I select time slot and then I will go to scheduler calendar, everything is ok. But then when I select one day earlier and open scheduler calendar it's showing previous date. It's reproduceable in latest version https://demos.telerik.com/kendo-ui/scheduler/index (https://dojo.telerik.com/EcalidON) with an option (selectable: true)
Green circle shows it works correctly. (image above)
Red circle shows it doesn't work correctly. (image above)
I observed it happens when I click one day before previous selection.
Neli
Telerik team
answered
on
08 May 2023
1 answer
108 views
Hi,
I want to hide the date row in the scheduler when grouping is used. How can I achieve this?
Martin
Telerik team
answered
on
02 May 2023
1 answer
422 views
I have a kendo scheduler with day, week and month views. when user selects the cell it there is widget to click with startdate and enddate.
This works fine for day and week, except month.
When selecting the month it gives the "Uncaught TypeError: Cannot read properties of undefined (reading 'value')".
Kendo scheduler :
View.scheduler = $(this.schedulerElementWithHash).kendoScheduler({
allDaySlot: false,
date: Model.startDate,
startTime: Model.startTime,
endTime: Model.endTime,
workDayStart: Model.workDayStart,
workDayEnd: Model.workDayEnd,
majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'H:mm')#</strong>"),
snap: false,
majorTick: 60,
selectable: true,
editable: {
destroy: true
},
messages: {
deleteWindowTitle: "Delete",
destroy: "UnSchedule"
},
navigate: function (e) {
//if (e.action == 'previous' || e.action == 'next') {
// // added some delay to make sure that the view start/end date has been updated prior to reading
// setTimeout(function () {
// View.scheduler.dataSource.read();
// }, 100);
//}
if (e.action == 'previous' || e.action == 'next') {
View.scheduler.dataSource.options.serverFiltering = true;
}
View.schedulerNavigated = e.action == 'changeWorkDay';
if (e.action == 'changeView') {
View.setCalendarWidth(e.view);
}
},
height: 800,
eventTemplate: $("#visit-schedule-template").html(),
views: [
{ type: "day", selected: SchedulerView.isDaySelected, dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd-MMM')#</span>" },
{ type: "week", selected: SchedulerView.isWeekSelected, showWorkHours: true, dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd-MMM')#</span>" },
{ type: "month", selected: SchedulerView.isMonthSelected, showWorkHours: false }
],
groupHeaderTemplate: $("#groupHeaderTemplate").html(),
//timezone: "Etc/UTC",
dataSource: {
//filter: {
// logic: 'or'
//},
batch: true,
serverFiltering: true,
transport: {
read: function (options) {
if (View.schedulerNavigated) {
console.log("read schedulerNavigated = true");
options.success(View.scheduler.dataSource.data());
return;
}
var scheduler = $(View.schedulerElementWithHash).data("kendoScheduler");
var view = scheduler.view();
var startDate = moment(view.startDate()).startOf('day').utc().format();
var endDate = moment(view.endDate()).endOf('day').utc().format();
Controller.visitService.getScheduleCalenderEntries(startDate, endDate).done(function (response) {
options.success(response);
})
},
update: function (options) {
$.ajax({
url: "/iapis/visits/update",
data: kendo.stringify(options.data.models),
type: "POST",
contentType: 'application/json',
success: function (response) {
var resp = response.Data.map(d => d.map(v => ({
id: v.Id,
crewId: v.crewId,
end: v.end,
start: v.start,
title: v.title
})));
options.success(resp);
}
});
},
create: function (options) {
options.success(null);
},
destroy: function (options) {
options.success(null);
},
parameterMap: function (options, operation) {
console.log('options', options);
if (operation !== "read" && options.models) {
return kendo.stringify(options.models);
}
//return {
// filter: ['ScheduledDate~isnotnull~undefined~and~CrewId~eq~13']
//};
}
},
schema: {
//timezone: "Etc/UTC",
parse: function (response) {
console.log('parse response', response);
if (View.schedulerNavigated) {
console.log("parse schedulerNavigated = true");
View.schedulerNavigated = false;
return response;
}
// store transformed user data
var visitsData = [];
if (response.length > 0) {
for (var i = 0; i < response.length; i++) {
var item = response[i];
// Only add if there is Start and End Date
if (item.start && item.end) {
var lastVisitStr = View.getLastVisitConverted(item.lastVisited);
var slot = {
id: item.id,
title: item.type == 'visit' ? item.apairy : 'Break',
start: item.start,
//startTimezone: 'Etc/UTC',
end: item.end,
//endTimezone: 'Etc/UTC',
completed: item.completed,
calculatedDuration: item.calculatedDuration,
crewId: item.crewId,
crew: item.crew,
type: item.type,
apiary: item.apairy,
apiaryId: item.apiaryId,
//lastVisited: item.LastVisited,
lastVisited: lastVisitStr,
ago: View.calcDaysAgo(lastVisitStr), // a day
status: item.status,
taskCount: item.tasksCount.toLocaleString(),
latitude: item.latitude,
longitude: item.longitude,
apiaryOffroadTime: item.apiaryOffroadTime,
apiaryOffroadDistance: item.apiaryOffroadDistance,
color: item.color,
crewColor: item.crewColor ? item.crewColor : Model.defaultCrewColor,
distance: item.distance,
durationMinutes: item.durationMinutes,
onroadTime: item.onroadTime,
onroadDistance: item.onroadDistance,
offroadTime: item.offroadTime,
offroadDistance: item.offroadDistance,
visitFirst: item.visitFirst,
visitFirstLat: item.visitFirstLatitude,
visitFirstLong: item.visitFirstLongitude,
visitLast: item.visitLast,
visitLastLat: item.visitLastLatitude,
visitLastLong: item.visitLastLongitude,
visitStatus: item.visitStatus,
previousVisitId: item.previousVisitId,
nextVisitId: item.nextVisitId,
fromVisitId: item.fromVisitId,
toVisitId: item.toVisitId,
};
if (item.type == 'visit' && item.groupIds) {
slot.groupIds = item.groupIds.split(',');
slot.groupIds = _.map(slot.groupIds, function (e) {
try {
return parseInt(e)
} catch (err) {
//do nothing
console.log('error parsing group id');
}
});
}
if (item.type == 'break') {
slot.defaultBreakSlotColor = Model.defaultBreakSlotColor
}
visitsData.push(slot);
}
else {
// Read all items modified and set Dirty = True
var dirtySlots = [];
for (var j = 0; j < item.length; j++) {
//var slotModified = item[item.length - 1];
slotModified = item[j];
var slot = _.find(View.scheduler.dataSource.data(), function (e) {
return e.id == slotModified.id;
});
if (slot) {
dirtySlots.push(slot);
}
if (slotModified.id == 0) {
slotModified.end = new Date(slotModified.end);
slotModified.start = new Date(slotModified.start);
if (slotModified.end.getMinutes() > 30) {
slotModified.end.setMinutes(30);
}
if (slotModified.end.getMinutes() < 30) {
slotModified.end.setMinutes(0);
}
if (slotModified.start.getMinutes() < 30) {
slotModified.start.setMinutes(0);
}
if (slotModified.start.getMinutes() > 30) {
slotModified.start.setMinutes(30);
}
}
visitsData.push({
id: slotModified.id,
title: slotModified.title,
start: slotModified.start,
end: slotModified.end,
crewId: slotModified.crewId,
dirty: true
});
}
setTimeout(function () {
dirtySlots.forEach(function (slot) {
slot.dirty = true;
});
}, 500);
}
} //end for loop, done adding items to array
//update resources the first time
if (Model.crewsInVisit && Model.crewsInVisit.length == 0) {
View.scheduler.dataSource.options.serverFiltering = false;
Model.crewsInVisit = Controller.getCrewsFromVisit(visitsData);
console.log('grouped crews', Model.crewsInVisit);
var crewRecords = _.chain(Model.crewsInVisit)
.filter(function (item) {
return item.value !== 'null';
});
Model.crewsInVisit = crewRecords._wrapped;
//update Crew multiselect
View.bindCrewMultiSelect();
View.renderRegionsMultiselect();
Controller.refreshResources();
}
$(".k-loading-image").hide();
$(".k-loading-mask").hide();
View.scheduler.refresh();
return visitsData;
}
else {
console.log('Model.allCrews', Model.allCrews);
if (Model.allCrews.length === 0 || Model.allCrews.length < 0) {
abp.message.info('', 'Please add at least one crew to iAPIS settings!!');
}
return visitsData;
}
}
}
},
group: {
resources: ["Crew"]
},
resources: [
{
field: "crewId",
name: "Crew",
dataSource: Model.crewsInVisit,
//dataColorField: 'none',
title: "Crew",
multiple: false,
}
],
dataBound: function (e) {
console.log('data bound');
$('k-loading-mask').hide();
Controller.colorVisitAccordingToStates();
var scroll_l = 0, scroll_t = 0;
var tenantId = abp.session.tenantId;
var ScrollX = "ScrollX";
var ScrollY = "ScrollY";
if (this.viewName()) {
var strDate = $(".k-lg-date-format").html();
if (strDate.indexOf(',') > 0) {
var strSplit = strDate.split('-');
var dateFormat = 'ddd dd-MMM-yyyy';
if (this.viewName() === "month") {
dateFormat = 'MMM-yyyy'
}
var dateConverted = kendo.toString(kendo.parseDate(strSplit[0].trim()), dateFormat);
if (strSplit.length == 2) {
dateConverted += " - " + kendo.toString(kendo.parseDate(strSplit[1].trim()), dateFormat);
}
$(".k-lg-date-format").html(dateConverted);
$(".k-sm-date-format").html(dateConverted);
}
}
if (localStorage.getItem(ScrollX.concat(tenantId)) && localStorage.getItem(ScrollY.concat(tenantId))) {
scroll_l = localStorage.getItem(ScrollX.concat(tenantId));
scroll_t = localStorage.getItem(ScrollY.concat(tenantId));
$('#schedulers .k-scheduler-content').scrollLeft(scroll_l);
$('#schedulers .k-scheduler-content').scrollTop(scroll_t);
}
$('.k-scheduler-content').scroll(function () {
if ($('#schedulers .k-scheduler-content').html().length) {
scroll_l = $('#schedulers .k-scheduler-content').scrollLeft();
scroll_t = $('#schedulers .k-scheduler-content').scrollTop();
localStorage.setItem(ScrollX + tenantId, scroll_l.toString());
localStorage.setItem(ScrollY + tenantId, scroll_t.toString());
}
});
if (app.utils.iapis.getUrlParameters) {
var visitId = app.utils.iapis.getUrlParameters('visitId');
if (visitId) {
var uid = $('div[visit-Id=' + visitId + ']').parent().attr('data-uid');
if (uid) {
var contentDiv = View.scheduler.element.find("div.k-scheduler-content");
var contentDivPosition = contentDiv.position();
var eventDiv = $(".k-event[data-uid=" + uid + "]");
var eventDivOffset = eventDiv.offset();
contentDiv.scrollLeft(eventDivOffset.left + contentDiv.scrollLeft() - contentDivPosition.left*2.25);
contentDiv.scrollTop(eventDivOffset.top + contentDiv.scrollTop() - contentDivPosition.top);
}
}
}
setTimeout(function () {
View.scheduler.view().table.on("mousedown", function (e) {
if (e.which === 3) {
var slot = View.scheduler.slotByElement($(e.target));
View.scheduler.select({ start: slot.startDate, end: slot.endDate });
}
});
}, 1);
// Create Date Header Tooltip
var mouseX = 0;
var mouseY = 0;
var onMouseUpdateDateTooltip = function (e) {
mouseX = e.screenX;
mouseY = e.screenY;
};
document.addEventListener('mousemove', onMouseUpdateDateTooltip, false);
console.log('creating tooltip');
$(".k-scheduler-date-group").kendoTooltip({
filter: "span",
width: 250,
content: function (e) {
var date = e.target.html();
var calendarDate = moment(View.scheduler.view().startDate());
var referenceDate = moment.utc(date + '-' + calendarDate.format('YYYY'));
var crewGroupCells = $('.k-scheduler-group-cell');
var dateIndex = e.target.parent().index();
var selectedView = View.scheduler.view().title.toLowerCase();
var crew = null;
if (selectedView == 'week') {
dateIndex = Math.floor(dateIndex / 7);
}
if (dateIndex >= 0) {
var hoveredGroup = $(crewGroupCells[dateIndex]).find('.crew-group');
var crewId = hoveredGroup.attr('id').replace('C', '');
crew = Model.allCrews.find(x => x.value == crewId);
}
if (crew && referenceDate.isValid()) {
var tooltipContent = $('.k-tooltip-content');
var tooltipInCache = View.tooltipCache[crew.value + '_' + referenceDate.format('DD-MMM-YYYY')];
if (tooltipInCache) {
return tooltipInCache;
}
else
{
Controller.visitService.getVisitCrewData(referenceDate, crew.value)
.done(function (response) {
if (response.length == 1) {
var crew = response[0];
var tooltip = "<h5>" + crew.crewName + "</h5>" +
"<p><b>Vehicle: </b>" + (crew.vehicle == null ? 'None' : crew.vehicle) +
"<p><b>Workers: </b>";
if (crew.crewMembersList && crew.crewMembersList.length > 0) {
tooltip += "<ul>";
_.forEach(crew.crewMembersList, function (worker) {
tooltip += "<li>" + worker.workerName + " (" + worker.workerMPE + "%)";
_.forEach(worker.tasksMPE, function (workerTask) {
tooltip += "<br> - " + workerTask.taskName + " (" + workerTask.taskMPE + "%)";
});
tooltip += "</li>";
});
tooltip += "</ul>";
}
else {
tooltip += "None";
}
tooltipContent.html(tooltip);
View.tooltipCache[crew.crewId + '_' + referenceDate.format('DD-MMM-YYYY')] = tooltip;
}
else {
tooltipContent.html('Error Loading!');
}
})
.catch(function (err) {
tooltipContent.html('Error Loading!');
console.error('Error Loading Tooltip: ' + err);
});
return 'Loading...';
}
}
else {
return 'Error Loading!';
}
},
show: function () {
this.refresh();
}
});
View.setScheduleDropArea(this);
},
})
.data("kendoScheduler");Cell select event :
setTimeout(function () {
View.scheduler.view().table.on("mousedown", function (e) {
if (e.which === 3) {
var slot = View.scheduler.slotByElement($(e.target));
View.scheduler.select({ start: slot.startDate, end: slot.endDate });
}
});
}, 1);
The data is correct when selecting the cell but "
View.scheduler.select({ start: slot.startDate, end: slot.endDate });"
gives the
kendo.all.js:313050 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
at init._setResourceValue (kendo.all.js:313050:21)
at init._resourceBySlot (kendo.all.js:313050:21)
at init._select (kendo.all.js:313050:21)
at init.select (kendo.all.js:313050:21)
at HTMLTableElement.<anonymous> (schedule.js?v=tx40wPU-Cw8se20BEdtsj55bdCvwHSPJLBm64UIbYaQ:2214:48)
at HTMLTableElement.dispatch (app-layout-libs.min.js?v=5e4tlbUYEHnHcS5q_Z-XKjK0gw8I56pGLzYM0eJF0IE:5977:27)
at elemData.handle (app-layout-libs.min.js?v=5e4tlbUYEHnHcS5q_Z-XKjK0gw8I56pGLzYM0eJF0IE:5781:28)
Any idea about what could be the issue?
Martin
Telerik team
answered
on
18 Apr 2023
2 answers
96 views
I have web application in which there is expandable menu on the left side shown in image. On expanding or closing side menu scheduler events are move on to another slot (basically all events shifting little bit from starting point of slots). Any solutions for this. i am using kendo mvc for .net.
Anton Mironov
Telerik team
answered
on
31 Mar 2023
1 answer
89 views
Some users do not see very clearly which is the today in the scheduler and asked if the header could be colored.
I have found that the cells has the class "k-today" but the header does not have it.
Is there a way to know which of the header cells is the cell for the today?
Ivan Zhekov
Telerik team
answered
on
23 Mar 2023
1 answer
115 views
I want to trigger an event add when a user highlights a time range on a scheduler.
I can pick up when the user lets go of the mouse on the calendar using
scheduler.wrapper.on("mouseup touchend", ".k-scheduler-table td, .k-event", function (e) {
});
but i can't figure out how to get the selected slot range from there.
seem to be able to get the end time of the selected range via the slotbyelement(e.target), but i can't figure out how to get the start time.
Martin
Telerik team
answered
on
15 Mar 2023
1 answer
121 views
Hello,
I'm trying to implement a tooltip that shows how many and what kind of events the resource has for the day when hovering mouse cursor over resource. I was able to do this in day/week/month views by using a custom group header template but I'm having a hard time trying to implement it in agenda view because I'm not able to make a custom template for resource group header, only event date, event time and event custom templates are available as far as I'm aware. Basically what I need is the ability, when hovering over a resource, to know what resource and what date it is to get the relevant information.
Any help is greatly appreciated! Thank you!
