188 строки
8.2 KiB
Plaintext
188 строки
8.2 KiB
Plaintext
@section MetaTags{
|
|
<meta name="description" content="This example shows how to set different working days for each of the resources in the ASP.NET MVC Scheduler.">
|
|
}
|
|
@section SampleHeading{<span class="sampleName">Schedule-Custom Work Hours-ASP.NET MVC-SYNCFUSION</span>}
|
|
|
|
@section ControlsSection{
|
|
<div>
|
|
@(Html.EJ().Schedule("Schedule1")
|
|
.Width("100%")
|
|
.Height("525px")
|
|
.CurrentDate(new DateTime(2017, 6, 5))
|
|
.CurrentView(CurrentView.Workweek)
|
|
.Resources(res =>
|
|
{
|
|
res.Field("RoomId").Title("Room").Name("Rooms").AllowMultiple(false).ResourceSettings(flds => flds.Datasource((IEnumerable)ViewBag.Rooms).Text("text").Id("id").Color("color").GroupId("groupId")).Add();
|
|
res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(true).ResourceSettings(flds => flds.Datasource((IEnumerable)ViewBag.Owners).Text("text").Id("id").GroupId("groupId").Color("color").Start("on").End("off").WorkWeek("customDays")).Add();
|
|
})
|
|
.Group(gr =>
|
|
{
|
|
gr.Resources(ViewBag.Resources);
|
|
})
|
|
.AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.datasource)
|
|
.Id("Id")
|
|
.Subject("Subject")
|
|
.StartTime("StartTime")
|
|
.EndTime("EndTime")
|
|
.Description("Description")
|
|
.AllDay("AllDay")
|
|
.Recurrence("Recurrence")
|
|
.RecurrenceRule("RecurrenceRule")
|
|
.ResourceFields("RoomId,OwnerId"))
|
|
|
|
)
|
|
</div>
|
|
}
|
|
|
|
<div id="weekdays">
|
|
<ul>
|
|
<li>Sunday</li>
|
|
<li>Monday</li>
|
|
<li>Tuesday</li>
|
|
<li>Wednesday</li>
|
|
<li>Thursday</li>
|
|
<li>Friday</li>
|
|
<li>Saturday</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="weekdays1">
|
|
<ul>
|
|
<li>Sunday</li>
|
|
<li>Monday</li>
|
|
<li>Tuesday</li>
|
|
<li>Wednesday</li>
|
|
<li>Thursday</li>
|
|
<li>Friday</li>
|
|
<li>Saturday</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="weekdays2">
|
|
<ul>
|
|
<li>Sunday</li>
|
|
<li>Monday</li>
|
|
<li>Tuesday</li>
|
|
<li>Wednesday</li>
|
|
<li>Thursday</li>
|
|
<li>Friday</li>
|
|
<li>Saturday</li>
|
|
</ul>
|
|
</div>
|
|
|
|
@section PropertiesSection{
|
|
<div class="row">
|
|
<div style="padding-left:5px;"><strong>Nancy</strong></div>
|
|
<div class="col-md-3">Workweek Days</div>
|
|
<div class="col-md-3">
|
|
@Html.EJ().DropDownList("nancyworkdays").TargetID("weekdays").Width("110px").SelectedItems(new List<int> { 1,3,5 }).ShowCheckbox(true).ClientSideEvents(evt => evt.Change("onChange"))
|
|
</div>
|
|
<div class="col-md-3">WorkHours Start</div>
|
|
<div class="col-md-3">
|
|
@Html.EJ().NumericTextbox("nancyhourstart").Value("10").MinValue(0).MaxValue(24).Width("110px").ShowSpinButton(false).DecimalPlaces(0).ClientSideEvents(evt => evt.Change("onChange"))
|
|
</div>
|
|
<div class="col-md-3">WorkHours End</div>
|
|
<div class="col-md-3">
|
|
@Html.EJ().NumericTextbox("nancyhourend").Value("18").MinValue(0).MaxValue(24).Width("110px").ShowSpinButton(false).DecimalPlaces(0).ClientSideEvents(evt => evt.Change("onChange"))
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<div style="padding-left:5px;"><strong>Michael</strong></div>
|
|
<div class="col-md-3">Workweek Days</div>
|
|
<div class="col-md-3">
|
|
@Html.EJ().DropDownList("michaelworkdays").TargetID("weekdays1").Width("110px").SelectedItems(new List<int> { 0,2,4,6 }).ShowCheckbox(true).ClientSideEvents(evt => evt.Change("onChange"))
|
|
</div>
|
|
<div class="col-md-3">WorkHours Start</div>
|
|
<div class="col-md-3">
|
|
@Html.EJ().NumericTextbox("michaelhourstart").Value("11").MinValue(0).MaxValue(24).Width("110px").ShowSpinButton(false).DecimalPlaces(0).ClientSideEvents(evt => evt.Change("onChange"))
|
|
</div>
|
|
<div class="col-md-3">WorkHours End</div>
|
|
<div class="col-md-3">
|
|
@Html.EJ().NumericTextbox("michaelhourend").Value("15").MinValue(0).MaxValue(24).Width("110px").ShowSpinButton(false).DecimalPlaces(0).ClientSideEvents(evt => evt.Change("onChange"))
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="row">
|
|
<div style="padding-left:5px;"><strong>Steven</strong></div>
|
|
<div class="col-md-3">Workweek Days</div>
|
|
<div class="col-md-3">
|
|
@Html.EJ().DropDownList("stevenworkdays").TargetID("weekdays2").Width("110px").SelectedItems(new List<int> { 2,4 }).ShowCheckbox(true).ClientSideEvents(evt => evt.Change("onChange"))
|
|
</div>
|
|
<div class="col-md-3">WorkHours Start</div>
|
|
<div class="col-md-3">
|
|
@Html.EJ().NumericTextbox("stevenhourstart").Value("6").MinValue(0).MaxValue(24).Width("110px").ShowSpinButton(false).DecimalPlaces(0).ClientSideEvents(evt => evt.Change("onChange"))
|
|
</div>
|
|
<div class="col-md-3">WorkHours End</div>
|
|
<div class="col-md-3">
|
|
@Html.EJ().NumericTextbox("stevenhourend").Value("10").MinValue(0).MaxValue(24).Width("110px").ShowSpinButton(false).DecimalPlaces(0).ClientSideEvents(evt => evt.Change("onChange"))
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@section ScriptSection{
|
|
<script>
|
|
var schObj;
|
|
$(document).ready(function () {
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|
schObj = $("#Schedule1").data("ejSchedule");
|
|
});
|
|
|
|
function onChange() {
|
|
var weekDays = ej.cultureObject.calendar.days.names;
|
|
var nancydays = $("#nancyworkdays").data("ejDropDownList");
|
|
var michaeldays = $("#michaelworkdays").data("ejDropDownList");
|
|
var stevendays = $("#stevenworkdays").data("ejDropDownList");
|
|
|
|
var nancy = nancydays.model.selectedItems.sort();
|
|
var michael = michaeldays.model.selectedItems.sort();
|
|
var steven = stevendays.model.selectedItems.sort();
|
|
|
|
var nancyWorkweek = [], michaelWorkweek = [], stevenWorkweek = [];
|
|
for (i = 0; i < nancy.length; i++) { nancyWorkweek.push(weekDays[nancy[i]].toLowerCase()); }
|
|
for (i = 0; i < michael.length; i++) { michaelWorkweek.push(weekDays[michael[i]].toLowerCase()); }
|
|
for (i = 0; i < steven.length; i++) { stevenWorkweek.push(weekDays[steven[i]].toLowerCase()); }
|
|
|
|
var schObj = $("#Schedule1").data("ejSchedule");
|
|
if (nancyWorkweek.length == 0) nancyWorkweek = schObj.model.workWeek;
|
|
if (michaelWorkweek.length == 0) michaelWorkweek = schObj.model.workWeek;
|
|
if (stevenWorkweek.length == 0) stevenWorkweek = schObj.model.workWeek;
|
|
|
|
var nancyStart = $("#nancyhourstart").val();
|
|
var nancyEnd = $("#nancyhourend").val();
|
|
var michaelStart = $("#michaelhourstart").val();
|
|
var michaelEnd = $("#michaelhourend").val();
|
|
var stevenStart = $("#stevenhourstart").val();
|
|
var stevenEnd = $("#stevenhourend").val();
|
|
|
|
$("#Schedule1").ejSchedule({
|
|
resources: [{
|
|
field: "RoomId",
|
|
title: "Room",
|
|
name: "Rooms", allowMultiple: false,
|
|
resourceSettings: {
|
|
dataSource: [
|
|
{ text: "ROOM 1", id: "1", groupId: "1", color: "#cb6bb2" },
|
|
{ text: "ROOM 2", id: "2", groupId: "1", color: "#56ca85" }
|
|
],
|
|
text: "text", id: "id", groupId: "groupId", color: "color"
|
|
}
|
|
}, {
|
|
field: "OwnerId",
|
|
title: "Owner",
|
|
name: "Owners", allowMultiple: true,
|
|
resourceSettings: {
|
|
dataSource: [
|
|
{ text: "Nancy", id: "1", groupId: "1", color: "#ffaa00", on: nancyStart, off: nancyEnd, customDays: nancyWorkweek },
|
|
{ text: "Steven", id: "3", groupId: "2", color: "#f8a398", on: stevenStart, off: stevenEnd, customDays: stevenWorkweek },
|
|
{ text: "Michael", id: "5", groupId: "1", color: "#7499e1", on: michaelStart, off: michaelEnd, customDays: michaelWorkweek }
|
|
],
|
|
text: "text", id: "id", groupId: "groupId", color: "color", start: "on", end: "off", workWeek: "customDays"
|
|
}
|
|
}]
|
|
});
|
|
}
|
|
</script>
|
|
}
|
|
|