Problem to personalizzation event template in scheduler

[Denis]

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
            }
        });
    });
});

[Neli]

Hi Denis,

I noticed that there is a support thread regarding the same issue and my colleague Veselin has already replied in the thread. As it could be helpful to the other users in the Forum I will paste his reply here below as well.

In case you have additional questions, please continue the converstaion in a single thread.

Thank you for the snippet provided and for the detailed explanation of the case.

I am afraid that the Kendo Scheduler would automatically escape any HTML present in the fields of its events. That behavior is in place so that no scripts could be injected in its markup from the data source. Having that said, the description field could not be of type html. Instead, it needs to be a string:

description: { type: "string", from: "Description" },

Now, having that said, if you need to render some HTML structure within the EventTemplate, you will need to keep each part of the text in a separate field. Foer example, if you have the following values in your data item:

"Description": "€ description",
"IsAllDay": true,
"IntestazioneDocumento": "intestazione 
"RagioneSociale": "ragione sociale"

The above would be rendered in the template like this:

<script id="event-template" type="text/x-kendo-template">
  <div class="event-title">#: title #</div>
  <div class="event-desc">#: description #</div>
  <div class="event-desc">#: IntestazioneDocumento #</div>
  <div class="event-desc">#: RagioneSociale #</div>
</script>

Please, note that all fields used in the template must be part of the DataSource.schema.model.fields definition:

IntestazioneDocumento: { from: "IntestazioneDocumento" },
RagioneSociale: { from: "RagioneSociale" },

To force each event to occupy greater height, you could set the view.eventHeight configuration option of the Scheduler:

Here is a small Dojo sample implementing the above suggestion:

https://dojo.telerik.com/UQuTAyir/4

You will also notice that the Euro symbol has been properly rendered in the template.

Regards,
Neli
Progress Telerik