@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.TimeZone("America/Los_Angeles")
.Views(views => {
views.Add()
.Name("4 Days")
.Type(SchedulerViewType.Day)
.IntervalCount(4);
views.Add()
.Type(SchedulerViewType.Week);
})
.CurrentView(SchedulerViewType.Week)
.CurrentDate(new DateTime(2021, 3, 28))
.AllDayPanelMode(AllDayPanelMode.AllDay)
.StartDayHour(9)
.Height(600)
)
<div class="options">
<div class="option">
<div class="label">All day panel mode</div>
<div class="value">
@(Html.DevExtreme().RadioGroup()
.Items(new [] { "all", "allDay", "hidden" })
.Value("allDay")
.Layout(Orientation.Horizontal)
.OnValueChanged("onChangeAllDayPanelMode")
)
</div>
</div>
</div>
<script>
function getScheduler() {
return $("#scheduler").dxScheduler("instance");
}
function onChangeAllDayPanelMode(e) {
getScheduler().option('allDayPanelMode', e.value);
}
$(function () {
const scheduler = getScheduler();
scheduler.option("dataSource", [{
text: 'Book Flights to San Fran for Sales Trip',
startDate: new Date('2021-03-28T17:00:00.000Z'),
endDate: new Date('2021-03-28T18:00:00.000Z'),
allDay: true,
}, {
text: 'Customer Workshop',
startDate: new Date('2021-03-29T17:30:00.000Z'),
endDate: new Date('2021-04-03T19:00:00.000Z'),
}]);
})
</script>
using DevExtreme.NETCore.Demos.Models.SampleData;
using DevExtreme.NETCore.Demos.ViewModels;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Controllers {
public class SchedulerController : Controller {
public ActionResult AllDayPanelMode() {
return View();
}
}
}
.options {
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
display: flex;
align-items: flex-start;
height: 100%;
}
.option {
padding: 25px 15px;
display: flex;
align-items: center;
}
.label,
.value {
display: inline-block;
vertical-align: middle;
}
.label {
width: 180px;
}