By default, Timelines are split by years, which means:
I have two events, one on 2010 and another in 2011. My timeline will be split in two parts using a marker containing the year. Something like this:
But what if I have multiple events on the same day with different timestamps? I want to be able to split the timeline by hours or even minutes. I see this is achievable on other widgets like Scheduler.
Hi,
I'm working on kendo ui timelien, i need to show month name below the event name in scrollbar.
E.g: 4 events, in that 2 events in jan and next 2 events in may then i need to show 2 jan event with below jan month name and show 2 may event with below may month name.
Hi,
I'm using the .open() method on a timeline. When opening an event with this method, the little triangular caret on the event card is not consistently displayed.
This is what I expect to see. The triangle is displayed when I click on an event.
When an event is opened via the .open() method, the caret is not usually displayed (but sometimes it is, this is not consistent).
Code:
// eventData comes from an ajax call, this function is invoked in the callback
function initTimeline(eventData) {
$("#timeline").unbind();
$("#timeline").html('');
$("#timeline").removeClass();
timeline = $("#timeline").kendoTimeline({
eventTemplate: kendo.template($("#eventTemplate").html()),
dateFormat: "MMMM yyyy",
orientation: timelineOrientation,
collapsibleEvents: true,
dataSource: {
data: eventData,
schema: {
model: {
fields: {
date: {
type: "date"
},
}
}
}
},
dataBound: function (e) {
data = e.sender.dataSource.data();
// Create the timeline type filter menu
createTimelineFilterMenu();
// Initalize any timeline datatables
fInitAllDataTables();
},
change: function (e) {
setTimeout(fInitAllDataTables, 1000);
}
});
// this is called on button click, it opens the first event in the timeline
function goToFirst() {
var kendoTimeline = $("#timeline").data().kendoTimeline;
var firstEvent = kendoTimeline.element.find(".k-timeline-track-item:not(.k-timeline-flag-wrap):first");
kendoTimeline.open(firstEvent);
}
Hi There,
How to load event list above the timeline..
Loading data's based on lazy loading method.
Ex; Initially I want to load only 5 data's from API, then once I click next button (arrow) in timeline and again need to trigger API with another 5 records to load.
Hi,
I have a date in my database (25/08/2020). When I try to display it in the kendo grid, it is shown as 25/08/2020 (Expected) for me. But some of the users from USA are shown 24/08/2020. After some debugging, I found that the local timezone conversion is done based on the browsers timezone settings. Anyway we can exclude this automatic conversion globally?
Option available so far but not suitable:
1. Convert the date to string and display. This means I lose all the functions of using date type.
2. Have UTC time in both client and server. This is a tedious process as the application is huge and cannot do this change.
Hi Team,
I have requirement where we have to show all events in timelineweek view in single view without adding scroll to the page as per attached screenshot.Can you please how we can achieve this compress view in Kendo Scheduler?
Right now, I would be needing something like this below. To insert a base64 file in the timeline card item:
<div class="k-card-description">
<embed type="application/pdf" src="data:application/pdf;base64,sdfghasdfquqasdfjasdf">
</div>
Insert within the timeline item card, some way to view PDF files. I know there is also the PDF viewer component of Kendo.
Is there any way to do this?
Attempting w/o success to leverage timeline against existing data. Having difficulty getting it to work..Below is the stock example on the site with the date property in the array changed to 'date1'.. Added the dataDateField; 'date1' to account for the change. Also tried altering the schema in the datasource..
$(
"#timeline"
).kendoTimeline({
dataSource: {
data: [
{
"id"
: 1,
"title"
:
"Bowling tournament"
,
"subtitle"
:
"Location: Sterling Lanes"
,
"description"
:
"Summer Bowling tournament in Michigan"
,
"date1"
:
"2025-06-30T21:00:00.000Z"
,
"actions"
: [{
"text"
:
"Visit the Bowling tournament page"
}] },
{
"id"
: 2,
"title"
:
"Charlie's first football game"
,
"subtitle"
:
"Location: City Football Stadium"
,
"description"
:
"Call coach Williams"
,
"date1"
:
"2022-10-22T21:00:00.000Z"
},
{
"id"
: 3,
"title"
:
"Alex's Birthday"
,
"subtitle"
:
"Location: Alex's House"
,
"description"
:
"Buy birthday cake and some fruits"
,
"date1"
:
"2010-01-09T22:00:00.000Z"
,
"images"
: [{
"src"
:
"https://demos.telerik.com/kendo-ui/content/web/foods/4.jpg"
}, {
"src"
:
"https://demos.telerik.com/kendo-ui/content/web/foods/16.jpg"
}] },
{
"id"
: 4,
"title"
:
"Vacation in Mexico"
,
"subtitle"
:
"Location: Cabo San Lucas"
,
"description"
:
"Check-in for the flight"
,
"date1"
:
"2017-12-24T22:00:00.000Z"
}]
},
dataDateField:
'date1'
,
orientation:
"vertical"
});