Week view without times

[Jesse]

We have a need to display a weekly schedule in which each day of the week usually has one to a max of 3 short events. So we don't want to display rows for hours (or any interval) of the day. Can we configure the week view to display a week the way the month view does? Or can we configure the month view to show only a single week at a time? Displaying the whole month makes a given week too cramped.

[Petar]

Hi Jesse,

The Scheduler's hours column could be hidden by using the following CSS code: 

.k-scheduler-times {
    display: none;
}

Here is a Dojo project demonstrating how the Scheduler will look like if we use the above CSS style. I can see you are using UI for ASP.NET MVC but Scheduler's behavior will be the same after applying the display:none property to a k-scheduler-times class. 

In ASP.Net MVC context the demonstrated in the Dojo "packaging" of the events could be implemented by defining the following Views configuration of the Scheduler: 

.Views(views =>
{
    views.DayView();
    views.WeekView(weekView =>
    {
        weekView.Selected(true);
        weekView.MajorTick(1440);
        weekView.MinorTickCount(1);
    });
    views.MonthView();
    views.AgendaView();
    views.TimelineView();
})

Note also the following CSS rule:

.k-scheduler-content tr{
  height:300px !important;
}

Please, try the above, check the Dojo and let me know if the proposed approach resolves your issue. 

Looking forward to your reply. 

Regards,
Petar
Progress Telerik

[Jesse]

Hi Petar,

That's exactly what I was described, thank you. I had tried that but was missing the last css rule for the tr height. Ideally, there wouldn't be any of the extra white space around events either. I think it's still kind of lining them up relative to their times? In this case, we'd want the events to be butted up against each other using the minimal amount of vertical space. E.G. There would be 0 space between "take the dog to the vet" and "Dance practice" on Monday. Is that possible? I also notice everything disappears if you click the Show Business Hours button (which we wouldn't need, just wondering if that is expected.)

[Petar]

Hi Jesse,

The desired “butted up” functionality could not be achieved out of the box. As we are a little bit tricking the default Scheduler functionality and it is one of our most complex components, I can guide you how the desired functionality could be achieved, but cannot provide a solution, because I cannot guarantee it will work in all scenarios, browsers, etc.  

There is a possible approach which could be used to implement a similar to the described scenario. What I mean is using all-day events in the Scheduler and write the start-end hours of a given event in its title. Here is a demo of this approach. In ASP.Net MVC context what should be added to the configuration of the Scheduler is: 

• Set Footer configuration to false. The reason for the disappearing data in the previous example is that the workDayStart and workDayEnd configurations weren't set.  As you've mentioned that the button triggering the unexpected behavior is not a needed one, with this configuration we are just hiding the footer. 
• Set these CSS styles

.k-nonwork-hour{
 display: none;
}

.k-event{
  padding-top:6px;
  padding-bottom: 6px;
}

The above approach is the easiest to be achieved one, although there are some additional rules that should be followed

The positioning of the regular events in the Scheduler (these used in my previous example), as you assumed is related to the starting hour of each event. Rewriting this events' positioning, even is seems like a simple task is not that easy to be achieved and is beyond the regular support service.

I hope that the proposed approach would help you achieve the functionality you aim to have in the application. 

If you have any other questions, please let me know.

Regards,
Petar
Progress Telerik

[Jesse]

Ahh, using the All Day events sounds like a good idea and like it could work, but I'm not sure your Dojo example is working as intended. The calendar looks blank with maybe a small event underneath? See my screenshot. I'm in Chrome.

[Petar]

Hi Jesse,

The reason for the reported behavior is that the example I've sent you is using our Scheduler's public services. I didn't consider that the data in these services is being reset to its default value regularly. What has happened is that you've opened the example after the data reset has passed and the changes I've made were wiped out. 

The "small events" presented on your screenshot are the regular events which could be seen by default when opening a Scheduler demo project on our site. They are appearing like in the screenshot because of the CSS modifications applied. 

This is a modified version of the provided Dojo in which I've added the following CSS:

.k-scheduler-content{
  display:none;
}

The above will hide the mentioned "small events" no matter the data reset has passed or not. I am also attaching a screenshot of how I currently see the Scheduler. If it happens that you open the project after the data reset, please add a few events of your choice by clicking on the blank space under each date in the Scheduler. 

I hope the explanations above are clear enough. If you have other questions, please let me know. 

Regards,
Petar
Progress Telerik