By default top level resource color will be applied for the events. If user wants to apply specific resource color to events irrespective of its parent resource color, it can be achieved by resourceColorField
field within eventSettings
property as shown below.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@section ControlsSection{
<div class="control-section">
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").CurrentView(View.WorkWeek).SelectedDate(new DateTime(2018, 6, 5)).Group(group => group.ByGroupID(false).Resources(ViewBag.Resources)).Resources(res =>
{
res.DataSource(ViewBag.Projects).Field("ProjectId").Title("Project").Name("Projects").TextField("text").IdField("id").ColorField("color").Add();
res.DataSource(ViewBag.Categories).Field("CategoryId").Title("Category").Name("Categories").TextField("text").IdField("id").ColorField("color").AllowMultiple(true).Add();
}).EventSettings(e => e.DataSource(ViewBag.datasource)).Render()
</div>
</div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult resource-color()
{
ViewBag.datasource = new ScheduleData().GetResourceTeamData();
List<ProjectResource> projects = new List<ProjectResource>();
projects.Add(new ProjectResource { text = "PROJECT 1", id = 1, color = "#cb6bb2" });
projects.Add(new ProjectResource { text = "PROJECT 2", id = 2, color = "#56ca85" });
ViewBag.Projects = projects;
List<CategoryResource> categories = new List<CategoryResource>();
categories.Add(new CategoryResource { text = "Development", id = 1, color = "#1aaa55" });
categories.Add(new CategoryResource { text = "Testing", id = 2, color = "#7fa900" });
ViewBag.Categories = categories;
ViewBag.Resources = new string[] { "Projects", "Categories" };
return View();
}
}
public class ProjectResource
{
public string text { set; get; }
public int id { set; get; }
public string color { set; get; }
}
public class CategoryResource
{
public string text { set; get; }
public int id { set; get; }
public string color { set; get; }
}
}
The
resourceColorField
field value should be as same as thename
field value given with inresources
property.
Schedule allows user to manually open the event editor on specific time or on certain events using openEditor
method as shown below.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@using Syncfusion.EJ2.Buttons
@section ControlsSection{
<div class="control-section">
<div>
@Html.EJS().Button("btn1").Content("Click to open Editor").Render()
@Html.EJS().Button("btn2").Content("Click to open Event Editor").Render()
</div>
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").Views(ViewBag.view).EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
<script type="text/javascript">
document.getElementById('btn1').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var cellData = {
startTime: new Date(2018, 1, 15, 10, 0),
endTime: new Date(2018, 1, 15, 11, 0),
};
scheduleObj.openEditor(cellData, 'Add');
};
document.getElementById('btn2').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var eventData = {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30)
};
scheduleObj.openEditor(eventData, 'Save');
};
</script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult event-editor()
{
ViewBag.datasource = new ScheduleData().GetScheduleData();
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
}
}
By default, the work hours of the Scheduler is highlighted based on the start and end values provided within the workHours
property which remains same for all days. To highlight different work hours range for different days,setWorkHours
method can be used as follows.
[src/app/app.ts]
Now, run the application in the browser using the following command.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@using Syncfusion.EJ2.Buttons
@section ControlsSection{
<div class="control-section">
<div>
@Html.EJS().Button("btn1").Content("Change the work hours").Render()
</div>
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").WorkHours(wh => wh.Highlight(true).Start("09:00").End("11:00")).Views(ViewBag.view).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
<script type="text/javascript">
document.getElementById('btn1').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var dates = [new Date(2018, 1, 15), new Date(2018, 1, 17)];
scheduleObj.setWorkHours(dates, '11:00', '20:00');
};
</script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult different-workhours()
{
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
}
}
The eventRendered
event will be triggered before rendering the appointments on Schedule where it can be customized. In the below demo, custom field CategoryColor is added to the appointment collection and based on certain condition, appointment background color is changed with CategoryColor field value.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@using Syncfusion.EJ2.Buttons
@section ControlsSection{
<div class="control-section">
<div>
@Html.EJS().Button("btn1").Content("ADD").Render()
@Html.EJS().Button("btn2").Content("EDIT").Render()
@Html.EJS().Button("btn3").Content("DELETE").Render()
</div>
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").EventSettings(e => e.DataSource(ViewBag.datasource)).Views(ViewBag.view).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
<script type="text/javascript">
document.getElementById('btn1').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var Data = [{
Id: 1,
Subject: 'Conference',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 10, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 11, 30),
IsAllDay: false
}];
scheduleObj.addEvent(Data);
};
document.getElementById('btn2').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var Data = {
Id: 3,
Subject: 'Testing-edited',
StartTime: new Date(2018, 1, 11, 10, 0),
EndTime: new Date(2018, 1, 11, 11, 0),
IsAllDay: false
};
scheduleObj.saveEvent(Data);
};
document.getElementById('btn3').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.deleteEvent(4);
};
</script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult dynamic-appointments()
{
ViewBag.datasource = GetScheduleData();
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{
Id = 3,
Subject = "Testing",
StartTime = new DateTime(2018, 2, 11, 9, 0, 0),
EndTime = new DateTime(2018, 2, 11, 10, 0, 0),
IsAllDay = false,
});
appData.Add(new AppointmentData
{
Id = 4,
Subject = "Vacation",
StartTime = new DateTime(2018, 2, 13, 9, 0, 0),
EndTime = new DateTime(2018, 2, 13, 10, 0, 0),
IsAllDay = false,
});
return appData;
}
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public bool IsAllDay { get; set; }
}
}
While navigating the views in Schedule, navigating
event will be triggered where navigating to certain views can be prevented. In the below demo, navigating to other views is prevented when the current view is ‘Week’.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@section ControlsSection{
<div class="control-section">
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").CurrentView(View.WorkWeek).Navigating("onNavigating").Views(ViewBag.view).EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource }).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
<script type="text/javascript">
function onNavigating(args) {
if (args.previousView === 'Week') {
args.cancel = true;
}
}
</script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult navigating()
{
ViewBag.datasource = new ScheduleData().GetScheduleData();
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
}
}
Event window default fields name like Title, Location, etc.. can be customized and default value can be set to Subject field using default
property which will be added if an appointment is created with empty subject.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@section ControlsSection{
<div class="control-section">
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").EventSettings(e => e.Fields(f => f.Subject(sub => sub.Title("Event Name").Name("Subject").Default("Add Name")).Location(loc => loc.Title("Event Location").Name("Location")).Description(des => des.Title("Summary").Name("Description")).StartTime(st => st.Title("From").Name("StartTime")).EndTime(et => et.Title("To").Name("EndTime"))).DataSource(ViewBag.datasource)).Views(ViewBag.view).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult default-subject()
{
ViewBag.datasource = new ScheduleData().GetScheduleData();
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
}
}
In event window, start/end time duration will be processed based on the interval
value within the timeScale
property. By default, interval
value is 30, therefore in event window start/end time duration will be in 30 mins duration. You can set custom interval range to the start/end time in event window using popupOpen
event as shown below.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@section ControlsSection{
<div class="control-section">
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").PopupOpen("onPopupOpen").EventSettings(e => e.DataSource(ViewBag.datasource)).Views(ViewBag.view).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
<script type="text/javascript">
function onPopupOpen(args) {
args.duration = 40;
}
</script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult event-duration()
{
ViewBag.datasource = new ScheduleData().GetScheduleData();
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
}
}
CRUD actions can be manually performed on appointments using addEvent
, saveEvent
and deleteEvent
methods as shown below.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@using Syncfusion.EJ2.Buttons
@section ControlsSection{
<div class="control-section">
<div>
@Html.EJS().Button("btn1").Content("ADD").Render()
@Html.EJS().Button("btn2").Content("EDIT").Render()
@Html.EJS().Button("btn3").Content("DELETE").Render()
</div>
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").EventSettings(e => e.DataSource(ViewBag.datasource)).Views(ViewBag.view).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
<script type="text/javascript">
document.getElementById('btn1').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var Data = [{
Id: 1,
Subject: 'Conference',
StartTime: new Date(2018, 1, 12, 9, 0),
EndTime: new Date(2018, 1, 12, 10, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 11, 30),
IsAllDay: false
}];
scheduleObj.addEvent(Data);
};
document.getElementById('btn2').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var Data = {
Id: 3,
Subject: 'Testing-edited',
StartTime: new Date(2018, 1, 11, 10, 0),
EndTime: new Date(2018, 1, 11, 11, 0),
IsAllDay: false
};
scheduleObj.saveEvent(Data);
};
document.getElementById('btn3').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.deleteEvent(4);
};
</script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult dynamic-appointments()
{
ViewBag.datasource = GetScheduleData();
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{
Id = 3,
Subject = "Testing",
StartTime = new DateTime(2018, 2, 11, 9, 0, 0),
EndTime = new DateTime(2018, 2, 11, 10, 0, 0),
IsAllDay = false,
});
appData.Add(new AppointmentData
{
Id = 4,
Subject = "Vacation",
StartTime = new DateTime(2018, 2, 13, 9, 0, 0),
EndTime = new DateTime(2018, 2, 13, 10, 0, 0),
IsAllDay = false,
});
return appData;
}
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public bool IsAllDay { get; set; }
}
}
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Schedule
@using Syncfusion.EJ2.Buttons
@section ControlsSection{
<div class="control-section">
<div>
@Html.EJS().Button("btn1").Content("ADD").Render()
@Html.EJS().Button("btn2").Content("EDIT").Render()
@Html.EJS().Button("btn3").Content("DELETE").Render()
<div class="content-wrapper">
@Html.EJS().Schedule("schedule").Width("100%").Height("550px").EventSettings(e => e.DataSource(ViewBag.datasource)).Views(ViewBag.view).SelectedDate(new DateTime(2018, 2, 15)).Render()
</div>
</div>
<script type="text/javascript">
document.getElementById('btn1').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var Data = [{
Id: 1,
Subject: 'Conference',
StartTime: new Date(2018, 1, 15, 9, 0),
EndTime: new Date(2018, 1, 15, 10, 0),
IsAllDay: false,
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=2'
}];
scheduleObj.addEvent(Data);
};
document.getElementById('btn2').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var Data = {
Id: 3,
Subject: 'Testing-edited',
RecurrenceID: 3,
StartTime: new Date(2018, 1, 11, 10, 0),
EndTime: new Date(2018, 1, 11, 11, 0),
IsAllDay: false,
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=3'
};
scheduleObj.saveEvent(Data, 'EditOccurrence');
};
document.getElementById('btn3').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var Data = {
Id: 4,
Subject: 'Vacation',
RecurrenceID: 4,
StartTime: new Date(2018, 1, 12, 11, 0),
EndTime: new Date(2018, 1, 12, 12, 0),
IsAllDay: false,
RecurrenceRule: 'FREQ=DAILY;INTERVAL=1;COUNT=3'
};
scheduleObj.deleteEvent(Data, 'DeleteSeries');
};
</script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public partial class ScheduleController : Controller
{
public ActionResult DateHeader()
{
ViewBag.datasource = GetScheduleData();
List<ScheduleViewsModel> viewOption = new List<ScheduleViewsModel>()
{
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Day },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Week },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.WorkWeek },
new ScheduleViewsModel {Option = Syncfusion.EJ2.Schedule.View.Month }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{
Id = 3,
Subject = "Testing",
StartTime = new DateTime(2018, 2, 11, 9, 0, 0),
EndTime = new DateTime(2018, 2, 11, 10, 0, 0),
IsAllDay = false,
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=3",
});
appData.Add(new AppointmentData
{
Id = 4,
Subject = "Vacation",
StartTime = new DateTime(2018, 2, 12, 11, 0, 0),
EndTime = new DateTime(2018, 2, 12, 12, 0, 0),
IsAllDay = false,
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=2"
});
return appData;
}
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
}
}
When a single occurrence of the recurrence appointment is edited,
recurrenceID
field will be added which holds theid
value of its parent recurrence appointment. It is applicable only for the edited occurrence appointments. Therefore the collection passing to thesaveEvent
with action as EditOccurrence should haveRecurrenceID
field as shown above.