I wrote a dojo to show the issue: https://dojo.telerik.com/omIxeDUx/8

Reproduce steps:

- Open the dojo

- Select an event of any date greater than the first date (fixed 2022-10-10)

- Click the refresh button

- You will see that the start date changed and some events will not be shown.

EDIT

For those who have the same problem, I'm make a workaround (I dont know if will work for any context), I just remove the refresh button of the scheduler and then add a new button which onclick event will just call the datasource.read() function.

The following dojo has this work around: https://dojo.telerik.com/omIxeDUx/9

I had implemented this example: https://dojo.telerik.com/omIxeDUx

When I'm using kendo scheduler with view "Agenda", I need to separate events on same date by group, so I'm using the resources + group option.

With that said, I'm having problem when I need to get the selected event on change event trigger. But for some reason, depending on which event's row you select, the e.events[0] attribute is returning another event, which is not the selected one.

I'm trying to find what I'm doing wrong, the example alerts to window the meetingID of e.events[0] when change event triggers. If you see by the description of event, the ID is different.

Can anyone help me with this problem?

EDIT:

If you are experiencing the same problem, here is a workaround.  I'd notice that I can get the selected item by the UID of the selected row, and just ignore the e.events. Here is the following implementation: https://dojo.telerik.com/omIxeDUx/7 (notice that depending on the version you using, the "class" of selected item may be "k-state-selected" instead of "k-selected")

change: function (e) {
    var selected = document.querySelector(".k-scheduler-content tr.k-selected");
    if (selected) {
        var data = $(selected).find("[data-uid]").data();
        var selectedItem = this.dataSource.getByUid(data.uid);
        alert("Kendo event: " + e.events[0].meetingID + "\nSelected event: " + selectedItem.meetingID);
    }
}

Best regards,

I want to add lunar calendar date after all scheduler dates

like in month view will add lunar calendar date after scheduer date

I am using the Scheduler and making a custom edit screen. I am following the example here.

Each scheduled event can have a category. These are selectable via dropdown. Consider the following portion of the template:

<div class="k-edit-label">
   <label for="category">Category</label>
</div>
<div data-container-for="category" class="k-edit-field">
   <!-- HERE IS WHERE THE DROPDOWN IS -->
</div>

In the example linked, a simple <select> element is used. But I am looking to add a real Kendo dropdown, not a basic select. So I defined it as follows:

var categoryEditorDropdown = Html.Kendo().DropDownList()
   .AutoBind(true)
   .BindTo(categories)
   .DataTextField(nameof(Category.Description))
   .DataValueField(nameof(Category.Id))
   .HeaderTemplate("Custom defined template which is why I need this over a select")
   .OptionLabelTemplate("Custom defined template which is why I need this over a select")
   .Name("category")
   .ToClientTemplate();

Back to my editor template, for the commented green line I tried both the following, and both gave template errors:

<div data-container-for="category" class="k-edit-field">
   <!-- Both fail with a template error -->
   @categoryEditorDropdown
   @Html.Raw(categoryEditorDropdown)
</div>

Next, I made a separate script:

<script id="editEventCategoryTemplate" type="text/x-kendo-template">
   // Tried both of these and again both fail when editing the event
   @categoryEditorDropdown
   @Html.Raw(categoryEditorDropdown)
</script>

And I updated the editor to try and use it:

<div data-container-for="category" class="k-edit-field">
   #= kendo.render(kendo.template($("\\#editEventCategoryTemplate").html())) #
</div>

For both tests here the page renders but then throws the same invalid template error when I try to edit an event.

How can I embed templates into each other. I need far more than category here. There are 6 templates in total needed for 6 different fields.

I have two Kendo Schedulers. In the first one the WorkDayStart and WorkDayEnd should be custom to the day(s) being viewed. They are not static at one single time. If I am viewing one single day, I am sure I could inject some Javascript to find these and update them, then rerender the scheduler. But when viewing a week that would not help. Really they need to be a function. Is this possible?

The second scheduler is grouped by a resource of an Employee. So in this case it is more complicated. I have this one locked down to viewing only a single day view (or other views that don't include slots that may be closed like Agenda). But the columns here are dependent on the employee's availability for the day selected. So again a function is needed.

Alternatively, digging in the kendo.all.js, I see a property called "slotTemplate" but this doesn't seem to be exposed in MVC. Is there a workaround using this?

[EDIT]: I finally found the SlotTemplate as part of the views in MVC. Will play around here and possibly I can solve this on my own.

[EDIT 2]: I did get SlotTemplate working, but the real solution is to fix the WorkDayStart and WorkDayEnd. Let's say this is a program for a store. Bob logs in. Bob sees his own schedule on one tab, and the store schedule on another tab. Bob works different hours per day. The store is open different hours per day. It's not always the same. When viewing a week we need to be expanded to the most open day. When viewing a single day we should match that day.

Here's a SlotTemplate tagged in CSHTML:

views.DayView(v => v.Selected(true)).SlotTemplateId("shopSlotTemplate");

<script id="mySlotTemplate" type="text/x-kendo-template">
   #= getSlotTemplate(data, @loggedInEmployeeId) #
</script>

<script id="shopSlotTemplate" type="text/x-kendo-template">
   #= getSlotTemplate(data) #
</script>

<script id="acSlotTemplate" type="text/x-kendo-template">
   #= getSlotTemplate(data, 0) #
</script>

function getSlotTemplate(data, employeeId) {

   // Get employee ID if not passed in. If still not found then this scheduler is not grouped this way.
   if (employeeId === undefined) {
      employeeId = data.resources().EmployeeId;
   }

   let isClosed = isShopClosed(shopSchedule.Shop, data.date);

   if ((!isClosed) && (employeeId > 0) && (shopSchedule["Employee" + employeeId] !== undefined)) {
      isClosed = isShopClosed(shopSchedule["Employee" + employeeId], data.date);
   }

   return "<div class=\"" + (isClosed ? "k-nonwork-hour" : "") + "\">&nbsp;</div>";
}

This required new CSS since the TD element has margins.

div.k-scheduler-content > table > tbody > tr > td > div {
   margin: -4px -0.5em;
   height: calc(100% + 8px);
   width: calc(100% + 1em);
}

The end result is that the grid for the scheduler appears how I want it.

But working hours are still inaccurate. They are based on a single date and don't change as I move between days.

Hello

I need your support, please, for the Scheduler (Kendo JQuery UI v2022.2.510)
I have 2 problems: the special characters in the description (example: euro symbol) and the multilines description of the appointments.

I would like to show next invoices to be paid.

The scheduler must be on mounth show, and all event are all day event.

On the event I need to show the number of document, buisness name and the amounth.

I'm trying to implement more filds in schema but the program ignore that.

I also tried to insert html tag in the description filed    
(example: 

<span class='IntestazioneDocumento'>PA / 1234567890 del 01/01/2000</span>
<span class='aDitta'>Alla ditta Business</span>
<span class='nRata'>Payment 1 di 1</span>
<span class='importo'>Tot. documento 123,45 &euro;</span>

)

but the tasg are showed as text.

In every case, the height of the result cell is too short to show all information.

I use the code

	kendo.ui.progress($("#scheduler"), false);
	
	urlData = url
	
    $("#scheduler").kendoScheduler({
        height: 600,
        views: [
            "day",
            "week",
            { type: "month", selected: true},
            "year"
        ],
        timezone: "Europe/Rome",
		allDayEventTemplate: $("#event-template").html(),
		eventTemplate: $("#event-template").html(),
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: urlData,
					type: "POST",
					contentType: "application/json; charset=utf-8",
					dataType: " json"
                },
                update: {
                },
                create: {
                },
                destroy: {
                }
            },
            schema: {
                model: {
                    id: "taskId",
                    fields: {
                        taskId: { from: "TaskID", 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: { type: "html", from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        ownerId: { from: "OwnerID", defaultValue: '' },
                        isAllDay: { type: "boolean", from: "IsAllDay" },
						IntestazioneDocumento: { from: "IntestazioneDocumento" },
						RagioneSociale: { from: "RagioneSociale" },
						
                    }
                }
            }
        },
		editable: false,
        resources: [
            {
                field: "ownerId",
                title: "Owner",
                dataSource: [
                    { text: "CENTRAL", value: 0, color: "#0000ff" },
                    { text: "LOGGIA", value: 1, color: "#f8a398" },
                    { text: "GIOTTO", value: 2, color: "#2572c0" },
                    { text: "P_COMM", value: 3, color: "#118640" }
                ]
            }
        ]
    });
    $("input[ name=showFarm ]").change(function(e) {
        var checked = $.map($("input[ name=showFarm ]:checked"), function(checkbox) {
            return parseInt($(checkbox).val());
        });

        var scheduler = $("#scheduler").data("kendoScheduler");

        scheduler.dataSource.filter({
            operator: function(task) {
				return $.inArray(task.ownerId, checked) >= 0
            }
        });
    });
});

I want the editor to open up with the "Title" field pre-focused and with the "No title" text selected. 

the below code does not seem to be working.

I am using a custom edit template

 edit: function (e) {

                var input = e.container.find("title");
                input.select();
                input.focus(function (e) {
                    input.select();
                });

                input.focus();

}

Hi,

i use

kendo.common-bootstrap.min.css
kendo.default-v2.min.css (for k-icon k-i-gear k-icon-xl)
kendo.highcontrast.min.css

now Scheduler Background color and text color of days in a week  and alldays are white

also this problem exist in following themes

Highcontrast,Black,MetroBlack,Moonlight

sample

thank you

Hi there,

I have a question about timeline view on  https://demos.telerik.com/kendo-ui/scheduler/timeline. 

When I change the start-time for the event for the series cycle by daily, the expiration date on cycle will get the focus automatically.

For example, there is an event repeating after 5 occurrences by daily, but when I change the start-time, the focus on "after 5 occurrences"  will  shift to the expiration date.

Can you tell me how to solve this problem?Thanks so much!

Hi there,

I have a question about timeline view on https://demos.telerik.com/kendo-ui/scheduler/timeline. When I create a series  event, the series  event before the day will be disappeared by moving or  resizing the event of one day among the whole  series  event. 

For example, I create a series event between 2022-07-21 and 2022-07-23.  In 2022-07-22 view,  I move or resizing the series  event ,  then the   event in 2022-07-21 is disappeared .  Actually, I want to change the whole series  event between  2022-07-21 and 2022-07-23 by changing the event in 2022-07-22.

Would you tell me how to solution this problem?

Thank you so much !