Telerik Forums
Kendo UI for jQuery Forum
0 answers
3 views

<script>


    // Global variables
    var ArrWorkStationProductTaskMappingList = [];
    var ArrTechncinList = [];
    var scheduler;
    var currentEditingEvent = null;
    var localEvents = [];
    var nextId = 1;

    // Sample data for demonstration
    var sampleWorkStationData = [
        { WorkStationID: "WS001", WorkStationName: "Wall 1", ProdCode: "PROD001", TaskID: "T001", TaskName: "Task 1", Duration: 2.5 },
        { WorkStationID: "WS002", WorkStationName: "Wall 2", ProdCode: "PROD002", TaskID: "T002", TaskName: "Task 2", Duration: 3.0 },
        { WorkStationID: "WS003", WorkStationName: "Floor (B)", ProdCode: "PROD003", TaskID: "T003", TaskName: "Task 3", Duration: 1.5 },
         { WorkStationID: "WS004", WorkStationName: "Black Front", ProdCode: "PROD004", TaskID: "T004", TaskName: "Task 4", Duration: 1.5 },
         { WorkStationID: "WS004", WorkStationName: "Floor (Light 1)", ProdCode: "PROD005", TaskID: "T005", TaskName: "Task 5", Duration: 1.5 }

    ];

    var sampleTechnicianData = [
        { TechnicianName: "John Doe", TechnicianUserID: "USER001", TechnicianMail: "john@example.com" },
        { TechnicianName: "Jane Smith", TechnicianUserID: "USER002", TechnicianMail: "jane@example.com" },
        { TechnicianName: "Bob Johnson", TechnicianUserID: "USER003", TechnicianMail: "bob@example.com" }
    ];

    // Initialize sample data
    ArrWorkStationProductTaskMappingList = sampleWorkStationData;
    ArrTechncinList = sampleTechnicianData;

    // Initialize sample events
    localEvents = [
        {
            ScheduleID: 1,
            Status: "Active",
            ScheduleBatchID: "BATCH001",
            ResourceID: "WS001",
            ResourceName: "Wall 1",
            ResourceMappedForID: "T001",
            ResourceMappedForName: "Task 1",
            JobNo: "JOB001",
            ProdCode: "PROD001",
            JobDetailUniqueID: "JD001",
            Prod_Name: "Product 1",
            ScheduleCode: "SCH001",
            FromDate: "2025/7/15",
            ToDate: "2025/7/15",
            FromTime: "09:00",
            ToTime: "11:00",
            title: "Workstation Task - Product 1",
            IsAllDayEvent: false,
            description: "Sample workstation task for Product 1",
            TypeID: 1,
            start: new Date("2025/7/15 09:00"),
            end: new Date("2025/7/15 11:00"),
            resource: "WS001",
            resourceType: 1
        },
        {
            ScheduleID: 2,
            Status: "Active",
            ScheduleBatchID: "BATCH002",
            ResourceID: "USER001",
            ResourceName: "John Doe",
            ResourceMappedForID: "S001",
            ResourceMappedForName: "Sample 1",
            JobNo: "JOB001",
            ProdCode: "PROD001",
            JobDetailUniqueID: "JD002",
            Prod_Name: "Product 1",
            ScheduleCode: "SCH002",
            FromDate: "2025/7/15",
            ToDate: "2025/7/15",
            FromTime: "10:00",
            ToTime: "12:00",
            title: "Technician Task - John Doe",
            IsAllDayEvent: false,
            description: "Sample technician task",
            TypeID: 2,
            start: new Date("2025/7/15 10:00"),
            end: new Date("2025/7/15 12:00"),
            resource: "USER001",
            resourceType: 2
        },
        {
            ScheduleID: 3,
            Status: "Active",
            ScheduleBatchID: "BATCH003",
            ResourceID: "WS002",
            ResourceName: "Wall 2",
            ResourceMappedForID: "T002",
            ResourceMappedForName: "Task 2",
            JobNo: "JOB002",
            ProdCode: "PROD002",
            JobDetailUniqueID: "JD003",
            Prod_Name: "Product 2",
            ScheduleCode: "SCH003",
            FromDate: "2025/7/15",
            ToDate: "2025/7/15",
            FromTime: "13:00",
            ToTime: "15:00",
            title: "Workstation Task - Product 2",
            IsAllDayEvent: false,
            description: "Another workstation task for Product 2",
            TypeID: 1,
            start: new Date("2025/7/15 13:00"),
            end: new Date("2025/7/15 15:00"),
            resource: "WS002",
            resourceType: 1
        }
    ];

    $(document).ready(function () {
        // Initialize controls
        $("#ddlViewType").val($("#hdViewType").val());
        $("#txtProductCodes").val($("#hdcurrentTestCodeToAllocate").val());

        // Initialize scheduler
        initializeScheduler();

        populateResourceDropdown();


        // Event handlers
        $("#btnRefreshScheduler").click(function () {
            $("#hdViewType").val($("#ddlViewType").val());
            $("#hdcurrentTestCodeToAllocate").val($("#txtProductCodes").val());
            refreshScheduler();
        });

        $("#btnSaveSchedule").click(saveScheduleEvent);


    });



    // Add this function to validate and fix event resourceType values
    function validateAndFixEvents() {
        console.log("Validating events...");

        localEvents.forEach(function (event, index) {
            var correctResourceType = null;

            // Check if it's a workstation resource
            var workstationData = getFilteredWorkstationData();
            var isWorkstation = workstationData.some(function (ws) {
                return ws.WorkStationID === event.ResourceID;
            });

            if (isWorkstation) {
                correctResourceType = 1;
            } else {
                // Check if it's a technician resource
                var isTechnician = ArrTechncinList.some(function (tech) {
                    return tech.TechnicianUserID === event.ResourceID;
                });

                if (isTechnician) {
                    correctResourceType = 2;
                }
            }

            if (correctResourceType && event.resourceType !== correctResourceType) {
                console.log("Fixing event " + index + " resourceType from " + event.resourceType + " to " + correctResourceType);
                event.resourceType = correctResourceType;
                event.resource = event.ResourceID; // Make sure resource field matches ResourceID
            }
        });

        console.log("Events after validation:", localEvents);
    }






    function initializeScheduler() {

        validateAndFixEvents();


        var resources = buildResourcesArray();
        var dataSource = buildDataSource();

        if (scheduler && typeof scheduler.destroy === "function") {
            scheduler.destroy();
            $("#scheduler").empty(); // Optional
        }

        scheduler = $("#scheduler").kendoScheduler({
            date: new Date("2025/7/15"),
            startTime: new Date("2025/7/15 08:00"),
            endTime: new Date("2025/7/15 18:00"),
            height: 800,
            eventHeight: 50,
            majorTick: 60,
            views: [
                "day",
                "week",
                "month",
                {
                    type: "timeline",
                    selected: true,
                    startTime: new Date("2025/7/15 08:00"),
                    endTime: new Date("2025/7/15 18:00"),
                    workDayStart: new Date("2025/7/15 08:00"),
                    workDayEnd: new Date("2025/7/15 18:00"),
                    majorTick: 60,
                    minorTickCount: 2,
                    showWorkHours: true
                },
                {
                    type: "timelineWeek",
                    startTime: new Date("2025/7/15 08:00"),
                    endTime: new Date("2025/7/15 18:00"),
                    workDayStart: new Date("2025/7/15 08:00"),
                    workDayEnd: new Date("2025/7/15 18:00"),
                    majorTick: 60,
                    minorTickCount: 2,
                    showWorkHours: true
                }
            ],
            timezone: "Etc/UTC",
            dataSource: dataSource,
            resources: resources,
            group: {
                resources: ["resourceType", "resource"],
                orientation: "vertical"
            },
            /*eventTemplate: $("#event-template").html(),*/
            add: function (e) {
                e.preventDefault();
                openScheduleModal(null, e.event);
            },
            edit: function (e) {
                e.preventDefault();
                openScheduleModal(e.event, null);
            },
            remove: function (e) {
                if (confirm("Are you sure you want to delete this event?")) {
                    console.log("Deleting event:", e.event);
                    // The scheduler will handle the delete automatically
                } else {
                    e.preventDefault();
                }
            },
            dataBound: function (e) {

                // Add tooltips
                $(".k-event").each(function () {
                    var uid = $(this).attr("data-uid");
                    var event = scheduler.dataSource.getByUid(uid);
                    //if (event) {
                    //    $(this).attr("title", buildTooltipContent(event));
                    //}
                });
            }
        }).data("kendoScheduler");
    }



    function buildResourcesArray() {
        var resources = [];
        var viewType = $("#hdViewType").val();

        console.log("Building resources for view type:", viewType);

        // Build the resource type grouping first
        var resourceTypeData = [];

        if (viewType === "B" || viewType === "W") {
            resourceTypeData.push({
                text: "Workstation",
                value: 1,
                color: "#2572c0"
            });
        }

        if (viewType === "B" || viewType === "T") {
            resourceTypeData.push({
                text: "Technician",
                value: 2,
                color: "#f8a398"
            });
        }

        // Add resourceType as the first resource for grouping
        resources.push({
            field: "resourceType",
            name: "resourceType",
            title: "Resource Type",
            dataSource: resourceTypeData
        });

        // Build individual resources with correct resourceType values
        var allResources = [];

        // Add workstations
        if (viewType === "B" || viewType === "W") {
            var workstationData = getFilteredWorkstationData();
            console.log("Adding workstations:", workstationData);

            workstationData.forEach(function (item) {
                allResources.push({
                    text: item.WorkStationName,
                    value: item.WorkStationID,
                    color: "#2572c0",
                    resourceType: 1  // CRITICAL: This must match the resourceType value above
                });
            });
        }

        // Add technicians
        if (viewType === "B" || viewType === "T") {
            console.log("Adding technicians:", ArrTechncinList);

            ArrTechncinList.forEach(function (item) {
                allResources.push({
                    text: item.TechnicianName,
                    value: item.TechnicianUserID,
                    color: "#f8a398",
                    resourceType: 2  // CRITICAL: This must match the resourceType value above
                });
            });
        }

        // Add the individual resources
        resources.push({
            field: "resource",
            name: "resource",
            title: "Resource",
            valuePrimitive: true,
            dataSource: allResources,
            group: "resourceType"  // This tells Kendo to group by resourceType
        });

        console.log("Final resources array:", resources);
        console.log("All individual resources:", allResources);

        return resources;
    }

    function getFilteredWorkstationData() {
        var productCodes = $("#hdcurrentTestCodeToAllocate").val();
        var filteredData = ArrWorkStationProductTaskMappingList;

        if (productCodes && productCodes.trim() !== "") {
            var codes = productCodes.split(',').map(function (code) {
                return code.trim();
            });
            filteredData = ArrWorkStationProductTaskMappingList.filter(function (item) {
                return codes.indexOf(item.ProdCode) !== -1;
            });
        }

        // Get distinct workstations
        var distinctWorkstations = [];
        var seen = {};

        filteredData.forEach(function (item) {
            var key = item.WorkStationID; // + "_" + item.TaskID;
            if (!seen[key]) {
                seen[key] = true;
                distinctWorkstations.push(item);
            }
        });

        return distinctWorkstations;
    }

    function buildDataSource() {
        return new kendo.data.SchedulerDataSource({
            batch: true,
            transport: {
                read: function (options) {
                    try {
                        options.success(localEvents);
                    } catch (error) {
                        console.error('Error reading events:', error);
                        options.error(error);
                    }
                },
                create: function (options) {
                    try {
                        var newEvents = options.data.models || [options.data];

                        newEvents.forEach(function (event) {
                            event.ScheduleID = nextId++;
                            localEvents.push(event);
                        });

                        options.success(newEvents);

                    } catch (error) {
                        console.error('Error creating events:', error);
                        options.error(error);
                    }
                },
                update: function (options) {
                    try {
                        var updatedEvents = options.data.models || [options.data];

                        updatedEvents.forEach(function (updatedEvent) {
                            var index = localEvents.findIndex(function (e) {
                                return e.ScheduleID === updatedEvent.ScheduleID;
                            });

                            if (index !== -1) {
                                localEvents[index] = updatedEvent;
                            }
                        });

                        options.success(updatedEvents);

                    } catch (error) {
                        console.error('Error updating events:', error);
                        options.error(error);
                    }
                },
                destroy: function (options) {
                    try {
                        var deletedEvents = options.data.models || [options.data];

                        deletedEvents.forEach(function (deletedEvent) {
                            var index = localEvents.findIndex(function (e) {
                                return e.ScheduleID === deletedEvent.ScheduleID;
                            });

                            if (index !== -1) {
                                localEvents.splice(index, 1);
                            }
                        });

                        options.success(deletedEvents);

                    } catch (error) {
                        console.error('Error deleting events:', error);
                        options.error(error);
                    }
                }
            },
            schema: {
                model: {
                    id: "ScheduleID",
                    fields: {
                        ScheduleID: { type: "number" },
                        title: { from: "title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", validation: { required: true } },
                        end: { type: "date", validation: { required: true } },
                        resource: { nullable: true },
                        resourceType: { nullable: true },
                        isAllDay: { type: "boolean", from: "IsAllDayEvent", defaultValue: false },
                        description: { type: "string" },
                        Status: { type: "string" },
                        ScheduleBatchID: { type: "string" },
                        ResourceID: { type: "string" },
                        ResourceName: { type: "string" },
                        ResourceMappedForID: { type: "string" },
                        ResourceMappedForName: { type: "string" },
                        JobNo: { type: "string" },
                        ProdCode: { type: "string" },
                        JobDetailUniqueID: { type: "string" },
                        Prod_Name: { type: "string" },
                        ScheduleCode: { type: "string" },
                        FromDate: { type: "string" },
                        ToDate: { type: "string" },
                        FromTime: { type: "string" },
                        ToTime: { type: "string" },
                        TypeID: { type: "number" }
                    }
                }
            }
        });
    }

    function refreshScheduler() {
        initializeScheduler();
        populateResourceDropdown();
    }

    function openScheduleModal(event, newEvent) {
        currentEditingEvent = event;

        // Populate resource dropdown
        populateResourceDropdown();

        if (event) {
            // Edit mode
            $("#modalTitle").text("Edit Schedule Event");
            $("#eventId").val(event.ScheduleID);
            $("#eventTitle").val(event.title);
            $("#eventStart").val(formatDateTimeLocal(event.start));
            $("#eventEnd").val(formatDateTimeLocal(event.end));
            $("#eventResource").val(event.ResourceID);
            $("#eventDescription").val(event.description || "");
            $("#eventTypeId").val(event.TypeID);
            $("#eventResourceId").val(event.ResourceID);
        } else {
            // Add mode
            $("#modalTitle").text("Add Schedule Event");
            $("#eventId").val("");
            $("#eventTitle").val("");
            $("#eventStart").val(formatDateTimeLocal(newEvent.start));
            $("#eventEnd").val(formatDateTimeLocal(newEvent.end));
            $("#eventResource").val("");
            $("#eventDescription").val("");
            $("#eventTypeId").val("");
            $("#eventResourceId").val("");
        }

        $('#scheduleModal').modal('show');
    }



    function populateResourceDropdown() {
        var dropdown = $("#eventResource");
        dropdown.empty();
        dropdown.append('<option value="">Select Resource</option>');

        var resources = buildResourcesArray();
        if (resources.length > 1) {
            var groupedResources = {
                Workstations: [],
                Technicians: []
            };

            resources[1].dataSource.forEach(function (item) {
                if (item.resourceType === 1) {
                    groupedResources.Workstations.push(item);
                } else if (item.resourceType === 2) {
                    groupedResources.Technicians.push(item);
                }
            });

            // Append Workstations
            if (groupedResources.Workstations.length > 0) {
                var wsGroup = $('<optgroup label="Workstations"></optgroup>');
                groupedResources.Workstations.forEach(function (ws) {
                    wsGroup.append('<option value="' + ws.value + '">' + ws.text + '</option>');
                });
                dropdown.append(wsGroup);
            }

            // Append Technicians
            if (groupedResources.Technicians.length > 0) {
                var techGroup = $('<optgroup label="Technicians"></optgroup>');
                groupedResources.Technicians.forEach(function (tech) {
                    techGroup.append('<option value="' + tech.value + '">' + tech.text + '</option>');
                });
                dropdown.append(techGroup);
            }
        }
    }



    function saveScheduleEvent() {
        //if (!$("#scheduleForm")[0].checkValidity()) {
        //    $("#scheduleForm")[0].reportValidity();
        //    return;
        //}

        var startDate = new Date($("#eventStart").val());
        var endDate = new Date($("#eventEnd").val());
        var selectedResource = $("#eventResource").val();

        // Determine TypeID based on selected resource
        var typeId = 1; // default to workstation
        var resourceName = "";
        var resourceMappedForID = "";
        var resourceMappedForName = "";

        // Find the selected resource details
        var resources = buildResourcesArray();
        var resourceData = resources[1].dataSource.find(function (r) { return r.value === selectedResource; });

        if (resourceData) {
            typeId = resourceData.resourceType;
            resourceName = resourceData.text;

            if (typeId === 1) {
                // Workstation
                resourceMappedForID = resourceData.taskId;
                resourceMappedForName = resourceData.taskName;
            } else {
                // Technician
                resourceMappedForID = resourceData.technicianUserId;
                resourceMappedForName = resourceData.text;
            }
        }

        var eventData = {
            ScheduleID: $("#eventId").val() || nextId++,
            Status: "Active",
            ScheduleBatchID: "BATCH" + new Date().getTime(),
            ResourceID: selectedResource,
            ResourceName: resourceName,
            ResourceMappedForID: resourceMappedForID,
            ResourceMappedForName: resourceMappedForName,
            JobNo: $("#hdJobNo").val(),
            ProdCode: $("#hdcurrentTestCodeToAllocate").val().split(',')[0] || "",
            JobDetailUniqueID: $("#hdSelectedJobIDs").val().split(',')[0] || "",
            Prod_Name: "Product Name",
            ScheduleCode: "SCH" + new Date().getTime(),
            FromDate: kendo.toString(startDate, "yyyy/M/d"),
            ToDate: kendo.toString(endDate, "yyyy/M/d"),
            FromTime: kendo.toString(startDate, "HH:mm"),
            ToTime: kendo.toString(endDate, "HH:mm"),
            title: $("#eventTitle").val(),
            IsAllDayEvent: false,
            description: $("#eventDescription").val(),
            TypeID: typeId,
            start: startDate,
            end: endDate,
            resource: selectedResource,
            resourceType: typeId
        };

        if (currentEditingEvent) {
            // Update existing event
            var existingEvent = scheduler.dataSource.get(currentEditingEvent.ScheduleID);
            for (var key in eventData) {
                existingEvent.set(key, eventData[key]);
            }
        } else {
            // Add new event
            scheduler.dataSource.add(eventData);
        }

      
        $('#scheduleModal').modal('hide');
    }

    function formatDateTimeLocal(date) {
        var d = new Date(date);
        var month = ('0' + (d.getMonth() + 1)).slice(-2);
        var day = ('0' + d.getDate()).slice(-2);
        var hours = ('0' + d.getHours()).slice(-2);
        var minutes = ('0' + d.getMinutes()).slice(-2);
        return d.getFullYear() + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
    }



</script>


<input type="hidden" id="hdViewType" value="B" />
<input type="hidden" id="hdcurrentTestCodeToAllocate" value="PROD001,PROD002,PROD003,PROD004,PROD005" />
<input type="hidden" id="hdJobNo" value="JOB001" />
<input type="hidden" id="hdSelectedJobIDs" value="JD001,JD002" />


     <div class="resource-controls">
         <div class="row">
             <div class="col-md-3">
                 <label for="ddlViewType">View Type:</label>
                 <select id="ddlViewType" class="form-control" style="height: 38px;">
                     <option value="B">Both (Workstation & Technician)</option>
                     <option value="W">Workstation Only</option>
                     <option value="T">Technician Only</option>
                 </select>
             </div>
             <div class="col-md-3" style="display:none">
                 <label for="txtProductCodes">Product Codes:</label>
                 <input type="text" id="txtProductCodes" class="form-control" placeholder="PROD001,PROD002,PROD003,PROD004,PROD005" />
             </div>
             <div class="col-md-3">
                 <button id="btnRefreshScheduler" class="btn btn-primary" style="margin-top: 25px;">Refresh Scheduler</button>
             </div>
         </div>
     </div>

     <div class="scheduler-container">
         <div id="scheduler" style="width:100%"></div>
     </div>
hi here i have inserted my code , i have workstation and technician two groups, and i want to show the workstation list under the workstation group and technician list under the techncian group, this works fine when i selecting the viewtype as T ot W but in B i have to give the both list but i mentioned the resourcetype as the list belongs to which group , but still calender is showing both list in both group , i am trying this implementation in 2025 version 

anyone please give me the solution for this 
naseer
Top achievements
Rank 1
 updated question on 15 Jul 2025
2 answers
25 views

I have a recurring event with exceptions in one timezone and am trying to display the schedule in another timezone.

The events all display correctly with corresponding daylight saving adjustments however the exceptions get lost once the event timezone transitions into (or out of) summer time.

Running following code in the dojo correctly hides the 17th of April occurrence IF the timezone is set to "Europe/London" but displays the entry when set to "Pacific/Auckland".


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/11.0.2/default/default-ocean-blue.css"/>

    <style>body {font-family: Helvetica, Arial, sans-serif;font-size: 14px}</style>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    
    
    
    <script src="https://kendo.cdn.telerik.com/2025.2.520/js/kendo.all.min.js"  ></script>
</head>
<body>
        <div id="scheduler"></div>
    <script>
      var version = kendo.version;
      $.getScript( 'https://kendo.cdn.telerik.com/'+version+'/js/kendo.timezones.min.js', function( data, textStatus, jqxhr ) {
        $("#scheduler").kendoScheduler({       
          date: new Date("2025/3/20"),
          height: 600,
          views: ["week"],
          editable: false,
          //timezone: "Europe/London",
          timezone: "Pacific/Auckland",
          dataSource: [
           {
              title: "Event Europe/London",             
              start: new Date("2025-03-20T14:00:00.000Z"),
              end: new Date("2025-03-20T14:30:00.000Z"),
              startTimezone: "Europe/London",
              endTimezone: "Europe/London",
              recurrenceRule: "FREQ=WEEKLY;BYDAY=TH;WKST=MO;",
              recurrenceException: "20250417T130000Z"
            }
          ]
        });
      });
    </script>
    
</body>
</html>

 

hkdave95
Top achievements
Rank 2
Iron
 answered on 24 Jun 2025
7 answers
61 views
$("#scheduler").kendoScheduler({
    date: new Date("2022/6/13"),
    timezone: "Etc/UTC", // Setting the timezone is recommended when binding to a remote service.
    dataSource: {
        batch: true, // Enable the batch updates.
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/tasks",
                dataType: "jsonp"
            },
            update: {
                url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
                dataType: "jsonp"
            },
            create: {
                url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
                dataType: "jsonp"
            },
            destroy: {
                url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
Les Baker
Top achievements
Rank 1
Iron
 answered on 02 Dec 2024
1 answer
45 views

Hi everyone,

I have problems on binding data from json to Kendo UI for Jquery scheduler, here is my code:

Html/JS


    		$("#scheduler").kendoScheduler({
				timezone: "Europe/Rome",
				ongoingEvents: true,
				editable: false, /*must be read-only*/
				views: [
					{
						type: "month"
					}
				],
				dataSource: {
					batch: true,
					transport: {
						read: {
							url: "/ajax/scheduler-view.php",
							dataType: "json"
						}
					}
				},
				schema: {
					   model: {
						 fields: {
						   id: { type: "number", field: "id" },
						   title: { field: "title"  },
						   start: { type: "date", field: "start" },
						   end: { type: "date", field: "end" },
						   description: { field: "description" },
						   isAllDay: { type: "boolean", field: "isAllDay" }
						 }
					   }
					 }
			});

and here is the JSON:


[{"id":1,"title":"mio titolo","description":"","startTimezone":"Europe\/Rome","start":"\/Date(1729786479)\/","end":"\/Date(1729872879)\/","endTimezone":"Europe\/Rome","isAllDay":true}]

I tryied many ways, but I cannot see the event in the scheduler (that is rendered ok, but empty).

Any suggestion?

Thank you

Alessandro
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 24 Oct 2024
4 answers
898 views

I have two Kendo scheduler timelines that are displayed one above the other. I want to keep the horizontal scroll position of the two timelines in sync by hooking into the scroll position for one timeline when scrolling in the other, but I can't see a way of doing this. Does anyone know of a way?

Also, in order to have a vertical correlation between the two timelines, I'd like to force the timelines to have a vertical scrollbar, even when one isn't needed: when a scrollbar is present in one of the timelines but not the other, the times don't align vertically because the scrollbar's width forces the compression of the time intervals. Again, any help would be appreciated.

ikram
Top achievements
Rank 1
Iron
 answered on 20 Oct 2024
1 answer
56 views

Hi,

in here https://demos.telerik.com/kendo-ui/scheduler/timeline  I want to select a date range. For example, if I choose the start date, I want to select the second date only if it's greater than the first one, to form a range. I mean, I want to select the first cell, and then when I select the second cell, I want to have the range selected between them. I don't want to drag the mouse or use the Shift key to do it.

thanks

Martin
Telerik team
 answered on 18 Oct 2024
1 answer
69 views

Hi,

I have a requirement to highlight a particular attendee with a red border in the dropdown list. The idea is to indicate that this attendee is not available at that specific date and time when someone opens the appointment pop-up (refer to the attachment). I know color option is there but i want to add red border to particular attendee. there can be situation where red border can be added to more then one attendee. Please help me understand how I can achieve this.

Thanks!

Martin
Telerik team
 answered on 01 Oct 2024
2 answers
250 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?

Morten
Top achievements
Rank 2
Iron
Iron
Iron
 updated answer on 28 Sep 2024
1 answer
43 views

hello 

i am using the horizontal resources grouping in Kendo UI Scheduler and I want to adjust the header attendee name same like word wrap css property so that last name will come after first name.

Neli
Telerik team
 answered on 25 Sep 2024
1 answer
62 views

Hi,

I have the Scheduler (Day View), I need to show my time slots (I will get it from API) in the header.

 

I need to show them in the header :

 

 

This API Response :

 

Neli
Telerik team
 answered on 21 Aug 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?