This is a migrated thread and some comments may be shown as answers.

Remove the Time rows in the Day view

4 Answers 101 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Edward
Top achievements
Rank 1
Edward asked on 06 Nov 2014, 04:27 PM
My tasks are going to be all day tasks only.  The All Day row has several tasks in it but they are bunched up.  I need to remove the time rows in the Day view.

I've tried this as a databound event:

function scheduler_dataBound(e) {
    var scheduler = this;
 
    var ele = scheduler.wrapper.find(".k-scheduler-layout>tbody>tr:nth-child(2)");
    ele.remove();
    if (!isResizedManually) {
        isResizedManually = true;
        scheduler.view().refreshLayout();
        $(window).trigger("resize");
    } else {
        isResizedManually = false;
    }
}

This gets rid of the time rows but the all day row is still the same height.  Another problem with this is that it removes the time rows for all views: Month, Week, Day, etc...  I only want them removed for Day.

How can I get this to work?


4 Answers, 1 is accepted

Sort by
0
Edward
Top achievements
Rank 1
answered on 07 Nov 2014, 11:44 AM
I forgot to say I'm using:

.AllDayEventTemplate(
            "<div class='asset-task' style='color: black; background-color: #= Color #' title='#= title # \nAsset: #= AssetName # \nOwner: #= OwnerName #'>" +
                "<strong>#= title #</strong>" +
                "<p>" +
                    "<strong>Asset: </strong>#= AssetName #" +
                    "<br>" +
                    "<strong>Owner: </strong>#= OwnerName #" +
                "</p>" +
            "</div>"
        )
    .EventTemplate(
            "<div class='asset-task' style='display: inline-block; color: black; background-color: #= Color #' title='#= title # \nAsset: #= AssetName # \nOwner: #= OwnerName #'>" +
            "<strong>#= title #</strong>" +
            "<p>" +
                "<strong>Asset: </strong>#= AssetName #" +
                "<br>" +
                "<strong>Owner: </strong>#= OwnerName #" +
            "</p>" +
        "</div>"
    )

0
Atanas Korchev
Telerik team
answered on 10 Nov 2014, 04:20 PM
Hello Matt,

You can use the view() method of the scheduler to determine the current view and execute the code only when it is day view:

          if (scheduler.view().title == "Day") {

Here is how to set the height of the all day slot:

scheduler.wrapper.find(".k-scheduler-header-all-day tr").height(100);
scheduler.wrapper.find(".k-scheduler-times-all-day").parent().height(100);

Finally here is a live demo which shows both:

http://dojo.telerik.com/@korchev/uDozu

Regards,
Atanas Korchev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Edward
Top achievements
Rank 1
answered on 17 Nov 2014, 08:21 PM
Atanas,

Thanks for your reply.  I got it working using your example.  I did notice that if you add several events while on the day view, the day view does not expand to display all of the events even though there is room.  Please see the example you posted. 

How can you have the day view display all events after adding on to the day view?
0
Edward
Top achievements
Rank 1
answered on 18 Nov 2014, 02:15 PM
I have this working. Please ignore last.

Thank you,
Tags
Scheduler
Asked by
Edward
Top achievements
Rank 1
Answers by
Edward
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or