Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model DevExtreme.MVC.Demos.ViewModels.AdaptabilityAppointmentViewModel
@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.DataSource(Model.Appointments)
.TimeZone("America/Los_Angeles")
.Views(new[] { SchedulerViewType.Week, SchedulerViewType.Month })
.CurrentView(SchedulerViewType.Month)
.CurrentDate(new DateTime(2021, 3, 25))
.AdaptivityEnabled(true)
.StartDayHour(9)
.Resources(res => { res.Add()
.FieldExpr("PriorityId")
.ValueExpr("Id")
.ColorExpr("Color")
.Label("Room")
.DataSource(Model.Priorities);
})
.Height(590)
.TextExpr("Text")
.StartDateExpr("StartDate")
.EndDateExpr("EndDate")
.RecurrenceRuleExpr("RecurrenceRule")
.AllDayExpr("AllDay")
)
@(Html.DevExtreme().SpeedDialAction()
.ID("speedDialAction")
.Icon("plus")
.OnClick("onPlusClick")
)
<script>
function onPlusClick(e) {
$("#scheduler").dxScheduler("instance").showAppointmentPopup();
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class SchedulerController : Controller {
public ActionResult Adaptability() {
return View(new AdaptabilityAppointmentViewModel {
Appointments = SampleData.AdaptabilityAppointments,
Priorities = SampleData.PriorityResources
});
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class AdaptabilityAppointment : Appointment {
public int? PriorityId { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<AdaptabilityAppointment> AdaptabilityAppointments = new[] {
new AdaptabilityAppointment {
Text = "Website Re-Design Plan",
StartDate = "2021-03-01T16:30:00.000Z",
EndDate = "2021-03-01T18:30:00.000Z",
RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,FR;WKST=TU;INTERVAL=2;COUNT=32",
},
new AdaptabilityAppointment {
Text = "Book Flights to San Fran for Sales Trip",
StartDate = "2021-03-01T16:30:00.000Z",
EndDate = "2021-03-01T18:30:00.000Z",
RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,FR;INTERVAL=4;COUNT=32",
AllDay = true,
PriorityId = 1
},
new AdaptabilityAppointment {
Text = "Install New Router in Dev Room",
StartDate = "2021-03-01T16:30:00.000Z",
EndDate = "2021-03-01T18:30:00.000Z",
RecurrenceRule = "FREQ=WEEKLY;BYDAY=FR;INTERVAL=2;COUNT=32"
},
new AdaptabilityAppointment {
Text = "Approve Personal Computer Upgrade Plan",
StartDate = "2021-02-10T17:00:00.000Z",
EndDate = "2021-02-10T18:00:00.000Z",
RecurrenceRule = "FREQ=WEEKLY;BYDAY=WE;INTERVAL=2;COUNT=32",
PriorityId = 2
},
new AdaptabilityAppointment {
Text = "Final Budget Review",
StartDate = "2021-04-01T19:00:00.000Z",
EndDate = "2021-04-01T20:35:00.000Z"
},
new AdaptabilityAppointment {
Text = "New Brochures",
StartDate = "2021-04-01T21:30:00.000Z",
EndDate = "2021-04-01T22:45:00.000Z"
},
new AdaptabilityAppointment {
Text = "Install New Database",
StartDate = "2021-04-01T16:45:00.000Z",
EndDate = "2021-04-01T18:15:00.000Z"
},
new AdaptabilityAppointment {
Text = "Approve New Online Marketing Strategy",
StartDate = "2021-04-01T19:00:00.000Z",
EndDate = "2021-04-01T21:00:00.000Z"
},
new AdaptabilityAppointment {
Text = "Upgrade Personal Computers",
StartDate = "2021-04-01T22:15:00.000Z",
EndDate = "2021-04-01T23:30:00.000Z"
},
new AdaptabilityAppointment {
Text = "Upgrade Personal Computers",
StartDate = "2021-04-02T22:15:00.000Z",
EndDate = "2021-04-02T23:30:00.000Z"
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class AdaptabilityAppointmentsResource {
public int Id { get; set; }
public string Text { get; set; }
public string Color { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class PriorityResource {
public int Id { get; set; }
public string Text { get; set; }
public string Color { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<PriorityResource> PriorityResources = new[] {
new PriorityResource {
Id = 1,
Text = "High",
Color = "#cc5c53"
},
new PriorityResource {
Id = 2,
Text = "Low",
Color = "#ff9747"
}
};
}
}
@media only screen and (max-width: 370px) {
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-popup-bottom.dx-toolbar .dx-toolbar-items-container {
height: auto;
}
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center {
display: flex;
flex-direction: column;
}
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button {
padding: 0;
}
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button .dx-button {
width: 200px;
}
.dx-popup:not(.dx-scheduler-appointment-popup) .dx-dialog .dx-toolbar-items-container .dx-toolbar-center .dx-toolbar-button:nth-child(1) {
margin-bottom: 12px;
}
}
In this demo, we also added the floating action button as an alternative way to create a new appointment. The button is implemented with the SpeedDialAction component.