Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
146543 | Aug 7,2019 04:05 PM UTC | Feb 12,2020 09:16 AM UTC | Blazor | 6 |
![]() |
Tags: Scheduler |
<EjsSchedule TValue="AppointmentData" Height="650px" SelectedDate="new DateTime(2019, 1, 31)">
<ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered"></ScheduleEvents>
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
</EjsSchedule>
@code{
public string[] CustomClass = { "custom-class" };
public string BackgroundColor;
public void OnEventRendered(EventRenderedArgs<AppointmentData> args)
{
if (args.Data.RecurrenceRule != null)
{
args.Element.AddClass(CustomClass);
bgcolor = args.Data.CategoryColor;
}
}
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData { Id = 1, Subject = "Sprint Meeting", StartTime = new DateTime(2019, 2, 1, 9, 30, 0) , EndTime = new DateTime(2019, 2, 1, 11, 0, 0) },
new AppointmentData { Id = 2, Subject = "Scrum Meeting", StartTime = new DateTime(2019, 1, 27, 9, 30, 0) , EndTime = new DateTime(2019, 1, 27, 11, 0, 0),
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5", CategoryColor= "#1aaa55" }
};
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }
public string CategoryColor { get; set; }
}
}
<style>
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.custom-class,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.custom-class,
.e-schedule .e-month-view .e-appointment.custom-class {
background: @BackgroundColor;
}
</style> |
if (args.Data.RecurrenceRule != null)
{
args.Element.AddClass(CustomClass);
bgcolor = args.Data.CategoryColor;
}
else if (args.Data.Subject == "Sprint Meeting")
{
bgcolor = args.Data.CategoryColor; // color provided for Sprint Meeting
}
else
{
bgcolor = args.Data.CategoryColor; // color provided for this special event
}
and so on .....
I tried to figure it out but was not successful. Thank you again for your fast and competent support.
regardsUwe
<style>
.e-schedule .e-timeline-view .e-appointment.custom-class,
.e-schedule .e-timeline-month-view .e-appointment.custom-class {
background: @BgColor;
}
.e-schedule .e-timeline-view .e-appointment.custom-class1,
.e-schedule .e-timeline-month-view .e-appointment.custom-class1 {
background: @BgColor1;
}
.e-schedule .e-timeline-view .e-appointment.custom-class2,
.e-schedule .e-timeline-month-view .e-appointment.custom-class2 {
background: @BgColor2;
}
</style> |
public string[] CustomClass = { "custom-class" };
public string[] CustomClass1 = { "custom-class1" };
public string[] CustomClass2 = { "custom-class2" };
public string BgColor, BgColor1, BgColor2;
public void OnEventRendered(EventRenderedArgs<AppointmentData> args)
{
if (args.Data.RecurrenceRule != null)
{
args.Element.AddClass(CustomClass);
BgColor = args.Data.CategoryColor;
}
else if (args.Data.Subject == "Sprint Meeting")
{
args.Element.AddClass(CustomClass1);
BgColor1 = args.Data.CategoryColor; // color provided for Sprint Meeting
}
else
{
args.Element.AddClass(CustomClass2);
BgColor2 = args.Data.CategoryColor; // color provided for this special event
}
}
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData { Id = 3, Subject = "Special event", StartTime = new DateTime(2019, 1, 17, 9, 30, 0) , EndTime = new DateTime(2019, 1, 17, 11, 0, 0), CategoryColor= "#df5286" },
new AppointmentData { Id = 1, Subject = "Sprint Meeting", StartTime = new DateTime(2019, 1, 15, 9, 30, 0) , EndTime = new DateTime(2019, 1, 15, 11, 0, 0), CategoryColor= "#7fa900" },
new AppointmentData { Id = 2, Subject = "Scrum Meeting", StartTime = new DateTime(2019, 1, 27, 9, 30, 0) , EndTime = new DateTime(2019, 1, 27, 11, 0, 0),
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5", CategoryColor= "#1aaa55" }
}; |
@using Syncfusion.EJ2.Blazor.Schedule
<EjsSchedule TValue="AppointmentData" Height="650px" SelectedDate="new DateTime(2019, 1, 17)">
<ScheduleEvents TValue="AppointmentData" EventRendered="OnEventRendered"></ScheduleEvents>
<ScheduleViews>
<ScheduleView Option="View.Day"></ScheduleView>
<ScheduleView Option="View.Week"></ScheduleView>
<ScheduleView Option="View.Month"></ScheduleView>
<ScheduleView Option="View.WorkWeek"></ScheduleView>
</ScheduleViews>
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
</EjsSchedule>
@code{
public async Task OnEventRendered(EventRenderedArgs<AppointmentData> args)
{
string style = (await args.Element.GetAttribute("style")).ToString(); // Get style attribute of the element
style += "background:" + args.Data.CategoryColor; // concatenate the background color
args.Element.SetAttribute("style", style); // Reset the values of style attribute
}
List<AppointmentData> DataSource = new List<AppointmentData>
{
new AppointmentData { Id = 3, Subject = "South Park", StartTime = new DateTime(2019, 1, 17, 9, 30, 0) , EndTime = new DateTime(2019, 1, 17, 11, 0, 0), CategoryColor= "#df5286" },
new AppointmentData { Id = 1, Subject = "Vikings", StartTime = new DateTime(2019, 1, 15, 9, 30, 0) , EndTime = new DateTime(2019, 1, 15, 11, 0, 0), CategoryColor= "#7fa900" },
new AppointmentData { Id = 2, Subject = "Rick and Morty", StartTime = new DateTime(2019, 1, 27, 9, 30, 0) , EndTime = new DateTime(2019, 1, 27, 11, 0, 0),
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=5", CategoryColor= "#1aaa55" }
};
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }
public string CategoryColor { get; set; }
}
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.