Loading...
Loading...
Implement Syncfusion ASP.NET Core Scheduler component for scheduling appointments, events, and resource management. Use this when creating calendar scheduling solutions with appointment management, resource scheduling, multiple calendar views (day, week, month, timeline), recurring events, and CRUD operations. This skill covers data binding, timezone support, event templates, and timescale configuration.
npx skill4agent add syncfusion/aspnetcore-ui-components-skills syncfusion-aspnetcore-scheduler<!-- _Layout.cshtml -->
<head>
<!-- refer syncfusion theme -->
<!-- refer syncfusion script -->
</head>
<body>
<!-- Scheduler will render here -->
<ejs-scripts></ejs-scripts>
</body>
<!-- Index.cshtml -->
@addTagHelper *, Syncfusion.EJ2
<ejs-schedule id="schedule" width="100%" height="550" selectedDate="new DateTime(2024, 3, 28)" currentView="Week">
<e-schedule-eventsettings dataSource="ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
// Controller
public class HomeController : Controller
{
public IActionResult Index()
{
ViewBag.datasource = new List<AppointmentData>
{
new AppointmentData {
Id = 1,
Subject = "Meeting",
StartTime = new DateTime(2024, 3, 28, 9, 0, 0),
EndTime = new DateTime(2024, 3, 28, 10, 0, 0)
}
};
return View();
}
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}// Use addEvent method to create appointments
<script>
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.addEvent({
Id: 2,
Subject: 'New Meeting',
StartTime: new Date(2024, 2, 28, 10, 0),
EndTime: new Date(2024, 2, 28, 11, 0)
});
</script>// Server-side in DataManager with CrudUrl
var dataManager = new DataManager() {
Url = "Home/GetData",
Adaptor = "UrlAdaptor",
CrudUrl = "Home/UpdateData",
// Configure server-side CORS with explicit allowed origins rather than relying on a client-side CrossDomain flag.
};// RecurrenceRule follows iCalendar (RFC 5545) format
new AppointmentData {
Id = 1,
Subject = "Daily Standup",
StartTime = new DateTime(2024, 3, 28, 9, 0, 0),
EndTime = new DateTime(2024, 3, 28, 9, 30, 0),
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=10"
}<ejs-schedule id="schedule" currentView="Week">
<e-schedule-views>
<e-schedule-view option="Day"></e-schedule-view>
<e-schedule-view option="Week"></e-schedule-view>
<e-schedule-view option="Month"></e-schedule-view>
<e-schedule-view option="TimelineDay"></e-schedule-view>
</e-schedule-views>
</ejs-schedule>currentViewselectedDatereadonlyallowDragAndDropallowResizingallowMultiDragallowInlineallowOverlapheightwidthcssClassdataSourcetemplateenableTooltiptooltipTemplateenableMaxHeightenableIndicatorspannedEventPlacementsortComparereditFollowingEventsidsubjectstartTimeendTimeisAllDaylocationdescriptionrecurrenceRulerecurrenceIDrecurrenceExceptionfollowingIDstartTimezoneendTimezoneisReadonlyisBlockactionBeginactionCompleteactionFailureeventRendereddragStartdragStopresizeStartpopupOpentooltipOpendataBoundaddEvent(eventData)saveEvent(eventData, action)deleteEvent(eventData, action)getEvents()getCurrentViewEvents()getEventDetails(element)refreshEvents()navigateTo(date)navigatePrevious()navigateNext()isSlotAvailable(date, endDate, resourceId)openOverlapAlert()