Month View use of both dayTemplate and eventTemplate

[xalvatore]

Hello,

    I would like to use a dayTemplate  and an eventTemplate in the Month view.

    If I use the dayTemplate then the events aren't showed. I only want to change the background.

    How could I do it?

Thank you

[xalvatore]

I have seen that the events are showed all crammed at the end of the Month view.

How could I show in its correcponding days?

Thank you

[xalvatore]

The difference is the top attribute in the div element, but I have not idea how to solve it.

This is the element without dayTemplate:

<div role="gridcell" aria-selected="false" data-uid="fbaabe7f-77cd-4de4-b0a6-18354ee53f7d" style="background-color: rgb(66, 151, 215); border-color: rgb(66, 151, 215); top: 16px; width: 387px; left: 2px; height: 30px;"
class="k-event"><span class="k-event-actions"></span>
    <div class="divMonthTemplate" title="(24/11 07:00 – 27/11 19:00): 21072 - Call Out ">
            <label style="text-align: right; display: block">84:00</label>       
    </div>
<span class="k-event-actions"></span></div>

This is the element with dayTemplate:

<div role="gridcell" aria-selected="false" data-uid="53b5d533-88fd-4f81-94c3-ac1fad9b8935" style="background-color: rgb(66, 151, 215); border-color: rgb(66, 151, 215); width: 387px; left: 2px; height: 30px;"
class="k-event"><span class="k-event-actions"></span>
    <div class="divMonthTemplate" title="(24/11 07:00 – 27/11 19:00): 21072 - Call Out ">
            <label style="text-align: right; display: block">84:00</label>
    </div>
<span class="k-event-actions"></span></div>

Thank you

[Atanas Korchev]

Hi,

I created a live demo which uses both dayTemplate and eventTemplate. You can check it out here: http://jsbin.com/EdijIyEG/1/edit

Regards,
Atanas Korchev
Telerik

[xalvatore]

Thank you for your answer Atanas. But I have the same problem if I used x-kendo-template in the dayTemplate property.

    {
      type: "month",
      eventTemplate: $("#event-template").html(),
      dayTemplate: $("#day-template").html()
    }

http://jsbin.com/EdijIyEG/3/edit

thank you

[Atanas Korchev]

Hi,

It seems that for some reason the whitespace in the script is breaking the layout. Using $.trim seems to fix the problem:

dayTemplate: $.trim($("#day-template").html())

Here is the updated version of your demo: http://jsbin.com/EdijIyEG/4/edit
Regards,
Atanas Korchev
Telerik

[Kyle]

Thanks Atanas.

I have another issue, see here: http://jsbin.com/EdijIyEG/11/edit?html,js,output

where my dayTemplate have included some javascript code,

and now the event block will get dropped to the bottom of the calendar (even I have trimmed the dayTemplate) .... :(

Thank you

[Rosen]

Hello Kyle,

Thanks for the report. We managed to address the issue you have described and the fix should be included in the next internal build.

Regards,
Rosen
Telerik

[Kyle]

Thank you very much Rosen!

Looking forward for the updates :D