Scheduler - Remove Header Controls and hide heading

[Ian]

Hi,

 

I have a scheduler controle that I am showing 1 day on but I don;t want it to be a specific day I am using it to assign appointments for Monday, Tuesday, Wednesday, etc reardless of the actual date so I would like to hide the date selector, current date and the heading showing the current date as shown below:

If I could also affect the line height for the times that would be great too as they are a little tall currently.

Any help would be gratefully received.

Thanks,

 

Ian

[Ian]

Just an update:

It is only the header controls I need removing now. If I could remove the entire top row that would be great:

Thanks

[Ian]

OK, sorted it myself.

For anyone else that is interested:

I only allow the DayView within the scheduler and use a DataHeaderTemplate to set the text:

.Views(views =>
{
    views.DayView(d => d.AllDaySlot(false).Footer(false).MajorTick(60).MinorTickCount(4).DateHeaderTemplate("<div class='details-header'>Time Slots for #=getDayName(date.getDay())#</div>"));
})

 

the function called is:

function getDayName() {
    var dayId = $("#WeekDayId").val()  // Control where the weekday is selected. Yours may have a different number for the weekday so adjust accordingly
    const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
    return dayNames[dayId];
}

 

Also need to include the following line on the combo box method that refreshes the scheduler to update the heading:

scheduler.view(scheduler.view().name);

where scheduler is the variable refering to the scheduler control e.g.:

var scheduler = $("#AppointmentScheduler").data("kendoScheduler");

To Hide the toolbar, override the style:

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

 

Hope this may help someone.

Ian

[Ian]

This now gives:

still looking into row heigh for times though but this is not so important for me