Limit the Appointment Count per Cell
This demo shows how to use the maxAppointmentsPerCell property to limit the number of full-sized appointments displayed per cell.
This property accepts one of the following values. To see how they affect the appointments, switch between Scheduler views.
-
"auto"
Appointments are narrowed down to a predefined size value that depends on the view type. Appointments that do not fit into the cell are hidden, and the cell displays an overflow indicator. Users can click the indicator to display the hidden appointments in a tooltip. -
"unlimited"
Appointments are narrowed down without a limit to be fit into a cell. -
Number
The number specifies the maximum number of appointments allowed in a single cell. Appointments that exceed this number are hidden, and the cell displays an overflow indicator. Users can click the indicator to display the hidden appointments in a tooltip.
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.NETCore.Demos.ViewModels.LimitAppointmentCountPerCellModel
@(Html.DevExtreme().Scheduler()
.ID("scheduler")
.DataSource(Model.Appointments)
.TimeZone("America/Los_Angeles")
.Views(views => {
views.Add()
.Name("Auto Mode")
.Type(SchedulerViewType.Month)
.MaxAppointmentsPerCell(MaxAppointmentsPerCell.Auto);
views.Add()
.Name("Unlimited Mode")
.Type(SchedulerViewType.Month)
.MaxAppointmentsPerCell(MaxAppointmentsPerCell.Unlimited);
views.Add()
.Name("Numeric Mode")
.Type(SchedulerViewType.Month)
.MaxAppointmentsPerCell(2);
})
.CurrentView("Auto Mode")
.CurrentDate(new DateTime(2021, 3, 25))
.Resources(res => {
res.Add()
.FieldExpr("RoomId")
.ValueExpr("Id")
.DisplayExpr("Text")
.ColorExpr("Color")
.Label("Room")
.DataSource(Model.Resources);
})
.Height(730)
.TextExpr("Text")
.StartDateExpr("StartDate")
.EndDateExpr("EndDate")
)
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 LimitAppointmentCountPerCell() {
return View(new LimitAppointmentCountPerCellModel {
Appointments = SampleData.LimitAppointmentCountPerCellAppointments,
Resources = SampleData.AdaptiveAppointmentsResources
});
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<AdaptiveAppointmentsResource> AdaptiveAppointmentsResources = new[] {
new AdaptiveAppointmentsResource {
Id = 1,
Text = "Room 401",
Color = "#bbd806"
},
new AdaptiveAppointmentsResource {
Id = 2,
Text = "Room 402",
Color = "#f34c8a"
},
new AdaptiveAppointmentsResource {
Id = 3,
Text = "Room 403",
Color = "#ae7fcc"
},
new AdaptiveAppointmentsResource {
Id = 4,
Text = "Room 407",
Color = "#ff8817"
},
new AdaptiveAppointmentsResource {
Id = 5,
Text = "Room 409",
Color = "#03bb92"
}
};
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<AdaptiveAppointment> LimitAppointmentCountPerCellAppointments = new[] {
new AdaptiveAppointment {
Text = "Google AdWords Strategy",
RoomId = 1,
StartDate = "2021-03-05T16:00:00.000Z",
EndDate = "2021-03-05T17:30:00.000Z"
},
new AdaptiveAppointment {
Text = "New Brochures",
RoomId = 5,
StartDate = "2021-03-05T18:30:00.000Z",
EndDate = "2021-03-05T21:15:00.000Z"
},
new AdaptiveAppointment {
Text = "Brochure Design Review",
RoomId = 5,
StartDate = "2021-03-05T20:15:00.000Z",
EndDate = "2021-03-05T23:15:00.000Z"
},
new AdaptiveAppointment {
Text = "Website Re-Design Plan",
RoomId = 5,
StartDate = "2021-03-05T23:45:00.000Z",
EndDate = "2021-03-05T18:15:00.000Z"
},
new AdaptiveAppointment {
Text = "Rollout of New Website and Marketing Brochures",
RoomId = 2,
StartDate = "2021-03-09T15:15:00.000Z",
EndDate = "2021-03-09T17:45:00.000Z"
},
new AdaptiveAppointment {
Text = "Update Sales Strategy Documents",
RoomId = 3,
StartDate = "2021-03-09T19:00:00.000Z",
EndDate = "2021-03-09T20:45:00.000Z"
},
new AdaptiveAppointment {
Text = "Non-Compete Agreements",
RoomId = 3,
StartDate = "2021-03-09T15:15:00.000Z",
EndDate = "2021-03-09T16:00:00.000Z"
},
new AdaptiveAppointment {
Text = "Update NDA Agreement",
RoomId = 1,
StartDate = "2021-03-10T18:45:00.000Z",
EndDate = "2021-03-10T20:45:00.000Z"
},
new AdaptiveAppointment {
Text = "Update Employee Files with New NDA",
RoomId = 4,
StartDate = "2021-03-18T21:00:00.000Z",
EndDate = "2021-03-18T23:45:00.000Z"
},
new AdaptiveAppointment {
Text = "Submit Questions Regarding New NDA",
RoomId = 4,
StartDate = "2021-03-18T15:00:00.000Z",
EndDate = "2021-03-18T16:30:00.000Z"
},
new AdaptiveAppointment {
Text = "Submit Signed NDA",
RoomId = 4,
StartDate = "2021-03-18T19:45:00.000Z",
EndDate = "2021-03-18T21:00:00.000Z"
},
new AdaptiveAppointment {
Text = "Review Revenue Projections",
RoomId = 4,
StartDate = "2021-03-26T00:15:00.000Z",
EndDate = "2021-03-26T01:00:00.000Z"
},
new AdaptiveAppointment {
Text = "Comment on Revenue Projections",
RoomId = 1,
StartDate = "2021-03-22T16:15:00.000Z",
EndDate = "2021-03-22T18:15:00.000Z"
},
new AdaptiveAppointment {
Text = "Provide New Health Insurance Docs",
RoomId = 4,
StartDate = "2021-03-22T19:45:00.000Z",
EndDate = "2021-03-22T21:15:00.000Z"
},
new AdaptiveAppointment {
Text = "Review Changes to Health Insurance Coverage",
RoomId = 4,
StartDate = "2021-03-25T21:15:00.000Z",
EndDate = "2021-03-25T22:30:00.000Z"
},
new AdaptiveAppointment {
Text = "Review Training Course for any Omissions",
RoomId = 4,
StartDate = "2021-03-22T21:00:00.000Z",
EndDate = "2021-03-22T19:00:00.000Z"
},
new AdaptiveAppointment {
Text = "Recall Rebate Form",
RoomId = 2,
StartDate = "2021-03-23T19:45:00.000Z",
EndDate = "2021-03-23T20:15:00.000Z"
},
new AdaptiveAppointment {
Text = "Create Report on Customer Feedback",
RoomId = 3,
StartDate = "2021-03-23T22:15:00.000Z",
EndDate = "2021-03-24T00:30:00.000Z"
},
new AdaptiveAppointment {
Text = "Review Customer Feedback Report",
RoomId = 3,
StartDate = "2021-03-17T23:15:00.000Z",
EndDate = "2021-03-18T01:30:00.000Z"
},
new AdaptiveAppointment {
Text = "Customer Feedback Report Analysis",
RoomId = 3,
StartDate = "2021-03-17T16:30:00.000Z",
EndDate = "2021-03-17T17:30:00.000Z"
},
new AdaptiveAppointment {
Text = "Prepare Shipping Cost Analysis Report",
RoomId = 3,
StartDate = "2021-03-23T19:30:00.000Z",
EndDate = "2021-03-23T20:30:00.000Z"
},
new AdaptiveAppointment {
Text = "Provide Feedback on Shippers",
RoomId = 3,
StartDate = "2021-03-23T21:15:00.000Z",
EndDate = "2021-03-23T23:00:00.000Z"
},
new AdaptiveAppointment {
Text = "Select Preferred Shipper",
RoomId = 1,
StartDate = "2021-03-27T00:30:00.000Z",
EndDate = "2021-03-27T03:00:00.000Z"
},
new AdaptiveAppointment {
Text = "Complete Shipper Selection Form",
RoomId = 5,
StartDate = "2021-03-25T15:30:00.000Z",
EndDate = "2021-03-25T17:00:00.000Z"
},
new AdaptiveAppointment {
Text = "Upgrade Server Hardware",
RoomId = 5,
StartDate = "2021-03-26T19:00:00.000Z",
EndDate = "2021-03-26T21:15:00.000Z"
},
new AdaptiveAppointment {
Text = "Upgrade Personal Computers",
RoomId = 5,
StartDate = "2021-03-26T21:45:00.000Z",
EndDate = "2021-03-26T23:30:00.000Z"
}
};
}
}