We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<ejs-schedule id="schedule" height="550px" currentView="Agenda" selectedDate="new DateTime(2018, 2, 15)" eventRendered="OnEventRendered" popupOpen="OnPopupOpen">
<e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
<e-schedule-views>
<e-view option="Agenda"></e-view>
</e-schedule-views>
</ejs-schedule>
<style>
.custom-field-row {
margin-bottom: 20px;
}
</style>
<script>
function OnEventRendered(args) {
// The below code examples used to apply the background color to the appointments
var categoryColor;
if (args.data.Category == "Assigned") {
categoryColor = 'green';
} else if (args.data.Category == "UnAssigned") {
categoryColor = 'red';
}
args.element.style.backgroundColor = categoryColor;
}
function OnPopupOpen(args) {
// The below code examples used to display the custom field (Category) value in the event window
if (args.type === 'Editor') {
if (!args.element.querySelector('.custom-field-row')) {
var row = ej.base.createElement('div', { className: 'custom-field-row' });
var formElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
var container = ej.base.createElement('div', { className: 'custom-field-container' });
var inputEle = ej.base.createElement('input', {
className: 'e-field', attrs: { name: 'Category' }
});
container.appendChild(inputEle);
row.appendChild(container);
var drowDownList = new ej.dropdowns.DropDownList({
dataSource: [
{ text: 'Green Category', value: 'Assigned' },
{ text: 'Red Category', value: 'UnAssigned' },
],
fields: { text: 'text', value: 'value' },
value: (args.data).Category,
floatLabelType: 'Always', placeholder: 'Category'
});
drowDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'Category');
}
}
}
</script> |
|
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{
Id = 1,
Subject = "Explosion of Betelgeuse Star",
StartTime = new DateTime(2018, 2, 11, 9, 30, 0),
EndTime = new DateTime(2018, 2, 11, 11, 0, 0),
Category = "Assigned"
});
appData.Add(new AppointmentData
{
Id = 2,
Subject = "Thule Air Crash Report",
StartTime = new DateTime(2018, 2, 12, 12, 0, 0),
EndTime = new DateTime(2018, 2, 12, 14, 0, 0),
Category = "UnAssigned"
});
-----------------------
-----------------------
-----------------------
appData.Add(new AppointmentData
{
Id = 10,
Subject = "Scrum Meeting",
Location = "Office",
StartTime = new DateTime(2018, 2, 12, 9, 30, 0),
EndTime = new DateTime(2018, 2, 12, 10, 30, 0),
RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR;INTERVAL=1",
Category = "Assigned"
}); |
|
<ejs-schedule id="schedule" height="550px" currentView="Agenda" selectedDate="new DateTime(2018, 2, 10)">
</e-schedule-eventsettings>
<e-schedule-resources>
<e-resource dataSource="@Model.ResourceDatasource" field="OwnerId" title="Attendees" name="Conferences" textField="text" idField="id" colorField="color" allowMultiple="true"></e-resource>
</e-schedule-resources>
<e-schedule-views>
<e-view option="Agenda"></e-view>
</e-schedule-views>
</ejs-schedule> |
|
public System.Collections.Generic.List<AppointmentData> Datasource { get; set; }
public System.Collections.Generic.List<ResourceDataSourceModel> ResourceDatasource { get; set; }
public void OnGet()
{
Datasource = new ScheduleData().GetScheduleData().ToList();
List<ResourceDataSourceModel> conferences = new List<ResourceDataSourceModel>();
conferences.Add(new ResourceDataSourceModel { text = "Assigned", id = 1, color = "green" });
conferences.Add(new ResourceDataSourceModel { text = "UnAssigned", id = 2, color = "red" });
ResourceDatasource = conferences.ToList();
} |
