diff --git a/knowledge-base/images/scheduler-timeline-view-line.png b/knowledge-base/images/scheduler-timeline-view-line.png new file mode 100644 index 000000000..3f310543b Binary files /dev/null and b/knowledge-base/images/scheduler-timeline-view-line.png differ diff --git a/knowledge-base/scheduler-display-indicator-at-the-current-time.md b/knowledge-base/scheduler-display-indicator-at-the-current-time.md new file mode 100644 index 000000000..7e335895a --- /dev/null +++ b/knowledge-base/scheduler-display-indicator-at-the-current-time.md @@ -0,0 +1,93 @@ +--- +title: Display an indicator at the current time +description: Using JavaScript to display an indicator at the current time when the Scheduler is configured to represent a 24 hours Timeline view. +type: how-to +page_title: Display an indicator at the current time in Timeline view | Scheduler +slug: scheduler-display-indicator-at-the-current-time +res_type: kb +--- + +## ENVIRONMENT + + + + + + +
ProductTelerik WebForms Scheduler for ASP.NET AJAX
+ +## DESCRIPTION + +Using JavaScript to display an indicator at the current time when the Scheduler is configured to represent a 24 hours Timeline view. + +![Indicator of the current time in TimeLine view mode](images/scheduler-timeline-view-line.png "Indicator of the current time in TimeLine view mode") + +## SOLUTION + +First, configure the Scheduler to have 24 time slots in the Timeline view: + +- Set the **NumberOfSlots** property to **24**. +- Set the **ColumnHeaderDateFormat** property to **HH:mm** and the **SlotDuration** to **01:00:00** + +Example + +````ASPX + + + + + + + + +```` + +Create an event listener using the [Sys.Application.load Event](https://learn.microsoft.com/en-us/previous-versions/bb383829(v=vs.100)?redirectedfrom=MSDN) and run the following JS code in the event handler, which creates a vertical line at the current time. + +Example + +````JS +function markCurrentTime() { + var scheduler = $find("<%= RadScheduler1.ClientID %>"); // Find your RadScheduler control + var schedulerTable = $(scheduler.get_element()).find('.rsAllDayTable'); // Find the scheduler table + var schedulerOffset = schedulerTable.offset().left; // Get the offset of the scheduler table + var schedulerWidth = schedulerTable.width(); // Get the width of the scheduler table + + var currentTime = new Date(); // Get the current time + + var minutesSinceStartOfDay = currentTime.getHours() * 60 + currentTime.getMinutes(); // Calculate the position of the current time within the scheduler + var pixelsPerMinute = schedulerWidth / (24 * 60); // Assuming your scheduler shows a full 24-hour day + var currentPosition = minutesSinceStartOfDay * pixelsPerMinute; + + $(".current-time-indicator").remove(); // Remove the class so that it doesn't create multiple instances of lines + + var schedulerDate = scheduler.get_selectedDate(); // Get the selected date + + var verticalHeader = $(".rsVerticalHeaderWrapper")[0].getBoundingClientRect() // Get the information about the size of the element + var width = verticalHeader.width; // Get the width of the Resource Header + + if (schedulerDate.getDate() === currentTime.getDate() && + schedulerDate.getMonth() === currentTime.getMonth() && + schedulerDate.getFullYear() === currentTime.getFullYear()) { // Check to see if it's for today's date + var $currentTimeIndicator = $('
') // Create the vertical line element + .addClass('current-time-indicator') + .css({ + 'position': 'absolute', + 'top': 0, + 'left': schedulerOffset + currentPosition - width, // Subtract the widthn of the vertical header + 'height': schedulerTable.height(), + 'width': '5px', + 'background-color': 'red' + }); + + schedulerTable.append($currentTimeIndicator); // Append the line to the scheduler + setTimeout(markCurrentTime, 60000); + } +} + Sys.Application.add_load(markCurrentTime); // Call the function on when the page is fully loaded +```` + + \ No newline at end of file