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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply background color to cells (Appointments) in Schedule control in Agenda view in ASP.NET Core 2.x

Thread ID:

Created:

Updated:

Platform:

Replies:

138191 Jun 18,2018 01:26 PM UTC Jul 10,2018 04:23 PM UTC ASP.NET Core - EJ 2 5
loading
Tags: Scheduler
JimN
Asked On June 18, 2018 01:26 PM UTC

I want to use the Schedule control in Agenda view to show assigned and unassigned appointments. I need to be able to differentiate between the two categories of appointments, so I want to have assigned appointments with a green background and unassigned appointments with a red background. Is this possible? If so, how can I determine the category from the list of items in the datasource given the fields available on each event object?

Velmurugan S [Syncfusion]
Replied On June 19, 2018 01:53 PM UTC

Hi Jim,      
     
Thanks for Contacting Syncfusion Support.     
       
We have prepared a sample to meet your requirement applying background color to appointments by adding custom field (ex: category) value with Schedule data source and applying the background color to the appointment element within the EventRendered (Triggers after each of the event gets rendered on the Schedule user interface) event, which can be downloaded from the following location. 
  
  
In the above sample, we have added the custom field Category and used the DropDownList control for its values display. Please refer to the following code example changes done in the above sample to meet your requirement.       
      
Index.cshtml page:     
  
 
<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> 
  
We request you to refer to the following Schedule datasource (ScheduleData.cs) with the Category field value. 
 
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" 
            }); 
 
Also, please refer to the following screenshot of the Agenda view appointments display with two different colors.  
 
 
 
Kindly try with the above sample and let us know if you need any further assistance on this.     
 
Regards,    
Velmurugan

JimN
Replied On June 29, 2018 04:37 PM UTC

The result of your sample looks exactly like what I need. However, like most of the sample code I encounter here, it is almost completely written in JavaScript. There must be a way to accomplish the same result with C# code in the .cs file for the page and in Razor code on the page itself. My (potential) client wants the site written with ASP.NET Core Razor pages with as little JavaScript, if any.

Thanks

Velmurugan S [Syncfusion]
Replied On July 3, 2018 01:26 PM UTC

Hi Jim, 
  
We would like to inform you that our JS2 Schedule control developed based on client side rendering and implemented in TypeScript language. Therefore, your requested customization for applying background color on appointments cannot be achieved in server side. But as an alternative, we can meet your requirement to apply the color to the appointments left side border in agenda view by using our resources features in server side. We are assigning color to each resources in server side and the corresponding color will be displayed in agenda view as shown below. 
 
 
 
Please refer to the code example to display the agenda view appointments with two different color from code behind page. 
 
Index.cshtml: 
 
<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> 
 
Index.cshtml.cs: 
 
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(); 
        } 
 
We have prepared the sample with the above code example, which can be downloaded from the following location. 
 
 
Also, we request you to look into our below UG and sample link to know about our resources feature. 
 
 
Kindly check with the above sample and let us know if you need any further assistance on this.  
 
Regards,
Velmurugan


JimN
Replied On July 4, 2018 07:38 PM UTC

I have been working on getting my Schedule control code to do what you described in your last post, but I'm having some difficulty. I believe that my issues are because I'm not using the List<> as a data source, but rather a UrlAdapter with a crud URL defined. I may be wrong about this.

I'm also a bit confused about the proper way to use the various fields on the <e-resource> tag. I'm assuming that the values for each of the fields are supposed to correspond to my data item, but, again, I'm just not sure.

Perhaps you could give me an example where the schedule is using a UrlAdapter with the url and crudUrl defined. I need to be able to act on changes in the server code when changes are made in the Schedule.

Velmurugan S [Syncfusion]
Replied On July 10, 2018 04:23 PM UTC

Hi Jim, 

Please find the following response for your queries: 

Query #1: Schedule control with the Url and CrudUrl along with Url Adaptor. 

We have modified the previously shared sample for your requirement “Schedule control in ASP.NET Core web app Razor pages using UrlAdaptor”, which can be downloaded from the following location. 

 
Query #2: Schedule Resource Fields. 
 
We would like to inform you that the resources “field” property alone related to the appointments/events data item and all other fields will be used to customize the resources display and set schedule work hours display based on the resource value. 

Kindly try with the above sample and let us know if you need any further assistance on this. 
Regards, 
Velmurugan 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon