1. Home
  2. Forum
  3. ASP.NET MVC
  4. Change specific .e-agendacolordiv

Change specific .e-agendacolordiv

Hi there, I'm currently changing the color of .e-agendacolordiv based on a calculation, but I can't seem to find the unique one for each record.  So right now all records will have the changed color when the requirement is met one time, I'm hoping to only change the color of the single record when it meets the requirements.  This only involves the agenda view on the schedule.


Thanks

3 Replies
AA Arulraj A Syncfusion Team August 25, 2018 06:09 AM UTC

Hi Anthony, 
 
Thanks for contacting Syncfusion support. 
 
You can achieve the mentioned requirement changing specific record (i.e. appointment) color in agenda view alone by using our EventRendered event. Please refer to the following code example to meet your requirement. 
 
@Html.EJS().Schedule("schedule").Width("100%").CurrentView(Syncfusion.EJ2.Schedule.View.Agenda).SelectedDate(new DateTime(2018,08,20)).Height("550px").EventSettings(es => es.DataSource(dataManger => 
       {           dataManger.Url("/Home/LoadData").CrudUrl("/Home/UpdateData").CrossDomain(true).Adaptor("UrlAdaptor"); 
       })).EventRendered("onEventRendered").Render() 
 
 
<script> 
    function onEventRendered(args) { 
        var scheduleObj = document.getElementById("schedule").ej2_instances[0]; 
        if (scheduleObj.currentView == "Agenda") { // Here checking the view to apply the style only to the agenda view 
            if (args.data.Subject == "Pony Rides") { 
                args.element.firstChild.style.borderLeftColor = "#FFD700"; 
                args.element.style.backgroundColor = "#6495ED"; 
            } 
            if (args.data.Subject == "Birds of Prey") { 
                args.element.firstChild.style.borderLeftColor = "#800000"; 
                args.element.style.backgroundColor = "#008B8B"; 
            } 
            if (args.data.Subject == "Parrot Talk") { 
                args.element.firstChild.style.borderLeftColor = "#B22222"; 
                args.element.style.backgroundColor = "#FF7F50"; 
            } 
            if (args.data.Subject == "Camping with Turtles") { 
                args.element.firstChild.style.borderLeftColor = "#9932CC"; 
                args.element.style.backgroundColor = "#DAA520"; 
            } 
            if (args.data.Subject == "Venomous Snake Hunt") { 
                args.element.firstChild.style.borderLeftColor = "#4B0082"; 
                args.element.style.backgroundColor = "#FF69B4"; 
            } 
        } 
    } 
</script> 
 
We have prepared the sample with the above code example, which can be downloaded from the following location. 
 
 
In the above sample, we applied the specific color to the each record (i.e. appointment) based on the Subject value and displayed the agenda view as shown below. Similarly you can apply any calculation within this EventRendered event and apply the style to the agenda view appointments. 
 
 
 
Kindly try with the above sample and let us know if you need any further assistance on this. 
  
Regards, 
Arulraj A 


AT Anthony Tran - NO LONGER THERE August 27, 2018 03:33 PM UTC

I'm sorry, I labeled this wrong. I'm using Essential JS 1.


Adding onto this, I also would like to know how to do the date navigation for the Agenda View so that it goes forward or backward by a week, rather than by one day.


Thanks

AA Arulraj A Syncfusion Team August 28, 2018 07:04 AM UTC

Hi Anthony, 

You can achieve the mentioned requirement changing specific record (i.e. appointment) color in agenda view alone and date navigation backward or forward by week in JS1 Schedule control by using our QueryCellInfo and Navigation event. Please refer to the following code example to meet your requirement.  
 
  1. Changing specific record (i.e. appointment) color.
 
@{ 
    List<string> view = new List<string>() { "Agenda" }; 
} 
 
@(Html.EJ().Schedule("Schedule1") 
        .Width("750px") 
        .Height("525px") 
        .Views(view) 
        .CurrentView(CurrentView.Agenda) 
        .CurrentDate(new DateTime(2018, 6, 1))   
        .ShowAppointmentNavigator(false)       
        .AgendaViewSettings(agenda => agenda.DaysInAgenda(7)) 
        .AppointmentSettings(fields => fields.Datasource(dataSource => dataSource.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor(AdaptorType.UrlAdaptor)) 
            .ApplyTimeOffset(false) 
            .Id("Id") 
            .Subject("Subject") 
            .StartTime("StartTime") 
            .EndTime("EndTime") 
            .AllDay("AllDay") 
            .Recurrence("Recurrence") 
            .RecurrenceRule("RecurrenceRule")) 
            .ScheduleClientSideEvents(eve => eve.QueryCellInfo("onQueryCellInfo").Navigation("onNavigation")) 
) 
 
<script> 
    function onQueryCellInfo(args) { 
        if (this.model.currentView == "agenda") { 
            if (args.cellType == "agendaeventcell" && args.requestType == "agendacells") { 
                if (args.appointment.Subject == "Pony Rides") { 
                    args.element[0].style.background = "#6495ED"; 
               } 
                if (args.appointment.Subject == "Birds of Prey") { 
                    args.element[0].style.background = "#008B8B"; 
                } 
                if (args.appointment.Subject == "Parrot Talk") { 
                    args.element[0].style.background = "#FF7F50"; 
                } 
                if (args.appointment.Subject == "Camping with Turtles") { 
                    args.element[0].style.background = "#DAA520"; 
                } 
                if (args.appointment.Subject == "Venomous Snake Hunt") { 
                    args.element[0].style.background = "#FF69B4"; 
                } 
            } 
        } 
    } 
</script> 
 
  1. Date navigation backward or forward by week.
 
@{ 
    List<string> view = new List<string>() { "Agenda" }; 
} 
 
@(Html.EJ().Schedule("Schedule1") 
        .Width("750px") 
        .Height("525px") 
        .Views(view) 
        .CurrentView(CurrentView.Agenda) 
        .CurrentDate(new DateTime(2018, 6, 1))   
        .ShowAppointmentNavigator(false)       
        .AgendaViewSettings(agenda => agenda.DaysInAgenda(7)) 
        .AppointmentSettings(fields => fields.Datasource(dataSource => dataSource.URL("/Home/GetData").CrudURL("/Home/Batch").Adaptor(AdaptorType.UrlAdaptor)) 
            .ApplyTimeOffset(false) 
            .Id("Id") 
            .Subject("Subject") 
            .StartTime("StartTime") 
            .EndTime("EndTime") 
            .AllDay("AllDay") 
            .Recurrence("Recurrence") 
            .RecurrenceRule("RecurrenceRule")) 
            .ScheduleClientSideEvents(eve => eve.QueryCellInfo("onQueryCellInfo").Navigation("onNavigation")) 
) 
 
<script> 
   function onNavigation(args) { 
        if (args.currentView == "agenda") { 
            var newCurrentDate; 
            if (!ej.isNullOrUndefined(args.target)) { 
                if ($(args.target.target).hasClass("e-navigatenext")) { // The below code example will execute when navigating forward 
                    newCurrentDate = new Date(args.previousDate.setDate(args.previousDate.getDate() + 7)); 
                } else if ($(args.target.target).hasClass("e-navigateprevious")) {  // The below code example will execute when navigating backward 
                    newCurrentDate = new Date(args.previousDate.setDate(args.previousDate.getDate() - 7)); 
                } 
                args.currentDate = newCurrentDate; 
                this.currentDate(args.currentDate); // Here setting the current date to take effect of the mentioned requirement             
          } 
        } 
    } 
</script> 
 
 
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 links to know more about the QueryCellInfo and Navigation event. 
 
 
Try with the above sample and let us know if you need any further assistance on this. 
 
Arulraj A 


Loader.
Up arrow icon