Loading...
Loading...
Compare original and translation side by side
<!-- _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; }
}<!-- _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>// 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.
};// 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"
}// 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><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>currentViewselectedDatereadonlyallowDragAndDropallowResizingallowMultiDragallowInlineallowOverlapheightwidthcssClasscurrentViewselectedDatereadonlyallowDragAndDropallowResizingallowMultiDragallowInlineallowOverlapheightwidthcssClassdataSourcetemplateenableTooltiptooltipTemplateenableMaxHeightenableIndicatorspannedEventPlacementsortComparereditFollowingEventsdataSourcetemplateenableTooltiptooltipTemplateenableMaxHeightenableIndicatorspannedEventPlacementsortComparereditFollowingEventsidsubjectstartTimeendTimeisAllDaylocationdescriptionrecurrenceRulerecurrenceIDrecurrenceExceptionfollowingIDstartTimezoneendTimezoneisReadonlyisBlockidsubjectstartTimeendTimeisAllDaylocationdescriptionrecurrenceRulerecurrenceIDrecurrenceExceptionfollowingIDstartTimezoneendTimezoneisReadonlyisBlockactionBeginactionCompleteactionFailureeventRendereddragStartdragStopresizeStartpopupOpentooltipOpendataBoundactionBeginactionCompleteactionFailureeventRendereddragStartdragStopresizeStartpopupOpentooltipOpendataBoundaddEvent(eventData)saveEvent(eventData, action)deleteEvent(eventData, action)getEvents()getCurrentViewEvents()getEventDetails(element)refreshEvents()navigateTo(date)navigatePrevious()navigateNext()isSlotAvailable(date, endDate, resourceId)openOverlapAlert()addEvent(eventData)saveEvent(eventData, action)deleteEvent(eventData, action)getEvents()getCurrentViewEvents()getEventDetails(element)refreshEvents()navigateTo(date)navigatePrevious()navigateNext()isSlotAvailable(date, endDate, resourceId)openOverlapAlert()