This is a migrated thread and some comments may be shown as answers.
Month View use of both dayTemplate and eventTemplate
8 Answers 54 Views
This is a migrated thread and some comments may be shown as answers.
xalvatore
Top achievements
Rank 1
xalvatore asked on 22 Jan 2014, 02:42 PM
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

8 Answers, 1 is accepted

Sort by
0
xalvatore
Top achievements
Rank 1
answered on 22 Jan 2014, 02:54 PM
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
0
xalvatore
Top achievements
Rank 1
answered on 22 Jan 2014, 04:27 PM
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
0
Atanas Korchev
Telerik team
answered on 24 Jan 2014, 02:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
xalvatore
Top achievements
Rank 1
answered on 24 Jan 2014, 03:12 PM
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
0
Atanas Korchev
Telerik team
answered on 24 Jan 2014, 03:28 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kyle
Top achievements
Rank 1
answered on 07 Mar 2014, 10:33 AM
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
0
Rosen
Telerik team
answered on 07 Mar 2014, 01:58 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kyle
Top achievements
Rank 1
answered on 07 Mar 2014, 04:57 PM
Thank you very much Rosen!

Looking forward for the updates :D
Asked by
xalvatore
Top achievements
Rank 1
Answers by
xalvatore
Top achievements
Rank 1
Atanas Korchev
Telerik team
Kyle
Top achievements
Rank 1
Rosen
Telerik team
Share this question
or