Multiple event templates

[Jon]

Is it possible to have multiple event templates for the Scheduler. I have a scheduler that is used for allocation work. One event type is the assignee's availability and the other events are various other work.

What I would like is to have the availability event as a thin band of colour... there does not have to be any text. The attached file shows an example of what I have achieved. What I'd like is for the green availability blocks to be just a slim green block no text is required (about a quarter of the current width).

[Tyler]

It seems as though you are controlling the styling of section of events that have text (that have the left hand color strip and possible background color) since it is not extending down the entire event. If that is so, I imagine you are doing this in your event custom template. You could do an if statement in that event template to style that colored section as just a thin green strip if the event is of a certain type (availability event), and do normal styling if the event is any other type.

You can do multiple event templates for multiple different views (each view can have their own event template). However, assigning multiple to one view... I am not sure if that is possible. You can change styling for certain things utilizing some JavaScript in your event templates, though. Like utilizing if statements.

[Tyler]

This dojo shows a basic example, where I add a green strip to events that have ownerId value of 1. Something along these lines should be able to be utilized.

[Jon]

Tyler, many thanks for your swift reply.... unfortunately I didn't explain what I needed well enough. I've created another mock image attached which shows what I've been requested to achieve if possible. The thin green event is almost like a placeholder that is created as an event by the user so that their manager know when they are available for work assignments.

 

[Jon]

Tyler... sorry I meant to add that I'm colouring the events using the event template and css classes... my event template is...

<!--Scheduler Event Template-->
<script id="eventTemplate" type="text/x-kendo-template">
    <div class="schedule-template #= diary #_#= refType #">
        <div class="ptb rs#= status # #= diary #_#= refType #">
            <p>#= refNo #</p>
            <p>#= kendo.toString(new Date(start.toUTCString()), 'HH:mm') # - #= kendo.toString(new Date(end.toUTCString()), 'HH:mm') #</p>
            <p>#: resources[0].text #</p>
            <p>#= title #</p>
            <p>ID: #= RID #</p>
        </div>
    </div>
</script>

[Jon]

Tyler, sorry I meant to add that you were right I'm colouring my events using the event template and css classes. My template is...

<!--Scheduler Event Template-->
<script id="eventTemplate" type="text/x-kendo-template">
    <div class="schedule-template #= diary #_#= refType #">
        <div class="ptb rs#= status # #= diary #_#= refType #">
            <p>#= refNo #</p>
            <p>#= kendo.toString(new Date(start.toUTCString()), 'HH:mm') # - #= kendo.toString(new Date(end.toUTCString()), 'HH:mm') #</p>
            <p>#: resources[0].text #</p>
            <p>#= title #</p>
            <p>ID: #= RID #</p>
        </div>
    </div>
</script>

[Tyler]

Ok, I get it now. Here is an updated Dojo that should show you what you are after.

Note the dataBound event that I added. In this event, we are going to go through each event element currently displayed in the scheduler, check it against whatever criteria you are checking it against (I use ownerId in the example), and if it matches, change the width of the element to whatever you like, and the background color to whatever you like (I do 15px width and green background). I also hide the 'x' button to delete an event, and make sure the recurrence icon is hidden if one exists, so all that is there is just a green bar.

If you want these deletable, do not hide the little 'x', or do a custom way to delete one. If you do not want these editable, in the edit event, at the beginning check if criteria matches again, and if it does, do an e.preventDefault() and the editor will not open. (Do this in the moveStart event if you are allowing drag and drop events as well to prevent them from being moved around and edited that way).

 

Then, in the event template, you check your criteria again, and if it does not match, display all the information by wrapping the html in the template in an if statement. 

[Tyler]

Oh, I should note, you may need a 'float':'left' on the events you are turning into a thin green strip to make sure they are always the furthest left event in a date/time column.  

[Ivan Danchev]

Hello,

Tyler has demonstrated the best approach for applying a different template to specific events: the template to be used is determined conditionally through if statements. While each view can have its own eventTemplate configured, setting multiple event templates to a single view is not supported, thus the recommended approach is to use a single template and within it specify the template content to be displayed based on a condition, as in Tyler's example, which shows the "movie-template" div element based on the event's ownerId value.
While you can use conditions to display specific information or style the template content differently if you want to customize the appearance of the whole event, not just its template content, the Scheduler's dataBound event can be used for such customizations, as Tyler's last dojo example demonstrates.

Regards,
Ivan Danchev
Progress Telerik

[Jon]

Tyler, you are a gentleman and a scholar. Thank-you.... your solution gives me something to go with. It produces what I need. The only fly in the ointment at the moment is the thin green event still 'takes up' the width is should take... i.e. if you place an adjacent event for ownerId 2 or 3 they do not butt up to the green stripe. Adding float:left or even float:right seems to have no effect on the order or display. Although the latter should not matter too much as the user would have added their availability before any work is assigned.

[Tyler]

I did notice that too. All I could dig up on fixing that is adjusting the left position by overriding the arrangeColumns method of the MultiDayView view of the scheduler.

This StackOverflow post shows how to do this. Of course, they don't utilize the right left offset, which would need to be calculated... I did see that if there were more than two events in the same time slot, that gap reduced to not really noticeable. Or maybe the width of the green event could be a bit wider to fill some of that in?

Unless the Telerik support has any ideas on how to fix that, or always put the green events on the right (which would remove the gap entirely) of all other events in the same time, which looks like it also requires overriding some method in the MultiDayView view (not sure which). 

Glad I could get you the base of what you are after :), but you may have to have support help you with removing the gap or making them always on the right of all other events at the same time as I couldn't find any real simple ways to achieve this.

[Ivan Danchev]

Hello,

We were not able to come up with a CSS workaround for the default events positioning, that would remove the gap between the customized (green line event) and the regular events. Such positioning customization would require source code modification. 

Regards,
Ivan Danchev
Progress Telerik