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
<div class="schedulers">
@for(int i = 1; i <= 2; i++) {
<div class="column-@i">
@(Html.DevExtreme().Scheduler()
.ID(string.Format("{0}{1}", "scheduler", i))
.DataSource(d => d.WebApi()
.Controller("SchedulerSignalR")
.Key("AppointmentId")
.DeleteAction(true)
.UpdateAction(true)
.InsertAction(true)
.Key("AppointmentId")
)
.TimeZone("America/Los_Angeles")
.RemoteFiltering(true)
.Views(new[] {
SchedulerViewType.Day,
SchedulerViewType.WorkWeek
})
.CurrentView(SchedulerViewType.Day)
.CurrentDate(new DateTime(2021, 4, 27))
.StartDayHour(9)
.EndDayHour(19)
.Height(600)
.DateSerializationFormat("yyyy-MM-ddTHH:mm:ssZ")
.TextExpr("Text")
.DescriptionExpr("Description")
.StartDateExpr("StartDate")
.EndDateExpr("EndDate")
.AllDayExpr("AllDay")
)
</div>
}
</div>
<script src="~/Scripts/jquery.signalR-2.2.2.js"></script>
<script src="~/signalr/hubs"></script>
<script>
$(function () {
var store1 = $("#scheduler1").dxScheduler("getDataSource").store();
var store2 = $("#scheduler2").dxScheduler("getDataSource").store();
var hub = $.connection.schedulerSignalRHub;
hub.client.update = function (key, data) {
store1.push([{ type: "update", key: key, data: data }]);
store2.push([{ type: "update", key: key, data: data }]);
};
hub.client.insert = function (data) {
store1.push([{ type: "insert", data: data }]);
store2.push([{ type: "insert", data: data }]);
};
hub.client.remove = function (key) {
store1.push([{ type: "remove", key: key }]);
store2.push([{ type: "remove", key: key }]);
};
$.connection.hub.start({ waitForPageLoad: false });
});
</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 SignalRService() {
return View();
}
}
}
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Hubs;
using DevExtreme.MVC.Demos.Models;
using Microsoft.AspNet.SignalR;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Formatting;
using System.Web;
using System.Web.Http;
namespace DevExtreme.MVC.Demos.Controllers.ApiControllers {
public class SchedulerSignalRController : ApiController {
InMemoryAppointmentsDataContext _data = new InMemoryAppointmentsDataContext();
IHubContext hubContext;
public SchedulerSignalRController() {
hubContext = GlobalHost.ConnectionManager.GetHubContext<SchedulerSignalRHub>();
}
[HttpGet]
public HttpResponseMessage Get(DataSourceLoadOptions loadOptions) {
return Request.CreateResponse(DataSourceLoader.Load(_data.Appointments, loadOptions));
}
[HttpPost]
public HttpResponseMessage Post(FormDataCollection form) {
var values = form.Get("values");
var newAppointment = new Appointment();
JsonConvert.PopulateObject(values, newAppointment);
Validate(newAppointment);
if(!ModelState.IsValid)
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage());
_data.Appointments.Add(newAppointment);
_data.SaveChanges();
var groupName = GetGroupName();
if(groupName != null) {
hubContext.Clients.Group(GetGroupName()).insert(newAppointment);
}
return Request.CreateResponse(HttpStatusCode.Created);
}
[HttpPut]
public HttpResponseMessage Put(FormDataCollection form) {
var key = Convert.ToInt32(form.Get("key"));
var values = form.Get("values");
var appointment = _data.Appointments.First(a => a.AppointmentId == key);
JsonConvert.PopulateObject(values, appointment);
Validate(appointment);
if(!ModelState.IsValid)
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState.GetFullErrorMessage());
_data.SaveChanges();
var groupName = GetGroupName();
if(groupName != null) {
hubContext.Clients.Group(GetGroupName()).update(key, appointment);
}
return Request.CreateResponse(HttpStatusCode.OK);
}
[HttpDelete]
public void Delete(FormDataCollection form) {
var key = Convert.ToInt32(form.Get("key"));
var appointment = _data.Appointments.First(a => a.AppointmentId == key);
_data.Appointments.Remove(appointment);
_data.SaveChanges();
var groupName = GetGroupName();
if(groupName != null) {
hubContext.Clients.Group(GetGroupName()).remove(key);
}
}
string GetGroupName() {
var cookie = Request.Headers.GetCookies(SchedulerSignalRHub.GroupIdKey).FirstOrDefault();
if(cookie != null) {
return cookie[SchedulerSignalRHub.GroupIdKey].Value;
}
return null;
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.Demos.Models {
public class Appointment {
public int AppointmentId { get; set; }
public string Text { get; set; }
public string Description { get; set; }
public string StartDate { get; set; }
public string EndDate { get; set; }
public bool AllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
}
public class DisableDatesAppointment {
public int AppointmentId { get; set; }
public string Text { get; set; }
public string Description { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public bool AllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Appointment> Appointments = new[] {
new Appointment {
AppointmentId = 1,
Text = "Website Re-Design Plan",
StartDate = "2021-04-26T16:30:00.000Z",
EndDate = "2021-04-26T18:30:00.000Z"
},
new Appointment {
AppointmentId = 2,
Text = "Book Flights to San Fran for Sales Trip",
StartDate = "2021-04-26T19:00:00.000Z",
EndDate = "2021-04-26T20:00:00.000Z",
AllDay = true
},
new Appointment {
AppointmentId = 3,
Text = "Install New Router in Dev Room",
StartDate = "2021-04-26T21:30:00.000Z",
EndDate = "2021-04-26T22:30:00.000Z"
},
new Appointment {
AppointmentId = 4,
Text = "Approve Personal Computer Upgrade Plan",
StartDate = "2021-04-27T17:00:00.000Z",
EndDate = "2021-04-27T18:00:00.000Z"
},
new Appointment {
AppointmentId = 5,
Text = "Final Budget Review",
StartDate = "2021-04-27T19:00:00.000Z",
EndDate = "2021-04-27T20:35:00.000Z"
},
new Appointment {
AppointmentId = 6,
Text = "New Brochures",
StartDate = "2021-04-27T21:30:00.000Z",
EndDate = "2021-04-27T22:45:00.000Z"
},
new Appointment {
AppointmentId = 7,
Text = "Install New Database",
StartDate = "2021-04-28T16:45:00.000Z",
EndDate = "2021-04-28T18:15:00.000Z"
},
new Appointment {
AppointmentId = 8,
Text = "Approve New Online Marketing Strategy",
StartDate = "2021-04-28T19:00:00.000Z",
EndDate = "2021-04-28T21:00:00.000Z"
},
new Appointment {
AppointmentId = 9,
Text = "Upgrade Personal Computers",
StartDate = "2021-04-28T22:15:00.000Z",
EndDate = "2021-04-28T23:30:00.000Z"
},
new Appointment {
AppointmentId = 10,
Text = "Customer Workshop",
StartDate = "2021-04-29T18:00:00.000Z",
EndDate = "2021-04-29T19:00:00.000Z",
AllDay = true
},
new Appointment {
AppointmentId = 11,
Text = "Prepare 2021 Marketing Plan",
StartDate = "2021-04-29T18:00:00.000Z",
EndDate = "2021-04-29T20:30:00.000Z"
},
new Appointment {
AppointmentId = 12,
Text = "Brochure Design Review",
StartDate = "2021-04-29T21:00:00.000Z",
EndDate = "2021-04-29T22:30:00.000Z"
},
new Appointment {
AppointmentId = 13,
Text = "Create Icons for Website",
StartDate = "2021-04-30T17:00:00.000Z",
EndDate = "2021-04-30T18:30:00.000Z"
},
new Appointment {
AppointmentId = 14,
Text = "Upgrade Server Hardware",
StartDate = "2021-04-30T21:30:00.000Z",
EndDate = "2021-04-30T23:00:00.000Z"
},
new Appointment {
AppointmentId = 15,
Text = "Submit New Website Design",
StartDate = "2021-04-30T23:30:00.000Z",
EndDate = "2021-05-01T01:00:00.000Z"
},
new Appointment {
AppointmentId = 16,
Text = "Launch New Website",
StartDate = "2021-04-30T19:20:00.000Z",
EndDate = "2021-04-30T21:00:00.000Z"
}
};
}
}
using System;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNet.SignalR;
using DevExpress.Data.Utils;
namespace DevExtreme.MVC.Demos.Hubs {
public class SchedulerSignalRHub : Hub {
public static string GroupIdKey = "dx-SchedulerSignalRHub-groupId";
private static readonly NonCryptographicRandom random = NonCryptographicRandom.System;
public override Task OnConnected() {
Cookie cookie;
Context.RequestCookies.TryGetValue(GroupIdKey, out cookie);
string groupId;
if(cookie != null) {
groupId = cookie.Value;
} else {
groupId = random.Next(0, int.MaxValue).ToString();
var newCookie = new HttpCookie(GroupIdKey, groupId);
Context.Request.GetHttpContext().Response.Cookies.Add(newCookie);
}
Groups.Add(Context.ConnectionId, groupId);
return base.OnConnected();
}
}
}
.schedulers {
display: flex;
}
.column-1 {
padding-right: 5px;
}
.column-2 {
padding-left: 5px;
}
.dx-scheduler-small .dx-scheduler-view-switcher.dx-tabs {
display: table;
}
Follow the steps below to implement this functionality. Note again that this demo repeats all steps twice for the two Schedulers. Your project will have a single control and a single store.
-
Configure a CustomStore. In this demo, we use the createStore method (part of the DevExtreme.AspNet.data extension).
-
Create the Scheduler and use its dataSource property to bind it to the store instance.
-
When a push notification is received, call the store's push(changes) method to update the store's data (see the
connection.onevent handlers).
For server-side configuration, refer to the ASP.NET MVC version of this demo.
For more information about integration with push services, refer to the following help topic: Integration with Push Services.