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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change background color of appointment in Agenda view.

Thread ID:

Created:

Updated:

Platform:

Replies:

128687 Feb 6,2017 09:34 AM UTC Feb 8,2017 06:13 AM UTC ASP.NET MVC 3
loading
Tags: Schedule
CLAUDIO RICCARDI
Asked On February 6, 2017 09:34 AM UTC

Hi,

I have used a custom template for the schedule appointment.
The appointment has got a different background color based on the appointment categorization.

Why the Agenda view does not change the background color while other views work fine?

@(Html.EJ().Schedule("WorkActivitySchedule")
                  .Locale("it-IT")
                  .Width("100%")
                  .Height("800px")
                  .Views(view)
                  .Orientation(Orientation.Horizontal)
                  .ShowCurrentTimeIndicator(true)
                  .CategorizeSettings(fields => fields.Datasource(ViewBag.categorize).Enable(true).AllowMultiple(false).Id("id").Text("text").Color("color").FontColor("fontColor"))
                  .DateFormat("dd/MM/yyyy")
                  .AllowDragDrop(true)
                  .EnableAppointmentResize(true)
                  .CurrentDate(System.DateTime.Now)
                  .TimeMode(Syncfusion.JavaScript.TimeMode.Hour24)
                  .TimeScale(t => t.majorSlot(60).minorSlotCount(3))
                  .Resources(res =>
                  {
                      res.Field("OperatorId").Title("Operator").Name("Operators").AllowMultiple(true)
                          .ResourceSettings(flds => flds.Datasource((IEnumerable) ViewBag.Operators).Text("text").Id("id").GroupId("groupId").Color("color")).Add();
                  })
                  .Group(gr =>
                  {
                      gr.Resources(ViewBag.Resources);
                  })
                  .AppointmentSettings(fields => fields.Datasource(
                      ds => ds.URL("../WorkActivity/GetPlannedActivities")
                          .BatchURL("../WorkActivity/Batch")
                          .CrudURL("../WorkActivity/Batch")
                          .UpdateURL("../WorkActivity/UpdatePlannedActivity")
                          .RemoveURL("../WorkActivity/RemovePlannedActivity")
                          .InsertURL("../WorkActivity/AddPlannedActivity")
                          .Adaptor(AdaptorType.UrlAdaptor))
                      .Id("Id")
                      .Subject("Subject")
                      .StartTime("StartTime")
                      .EndTime("EndTime")
                      .Description("Description")
                      .AllDay("False")
                      .Recurrence("")
                      .RecurrenceRule("")
                      .Categorize("Categorize")
                      .ResourceFields("OperatorId")
                  )
                  .AppointmentTemplateId("#WorkActivityTemplate")
                  .ScheduleClientSideEvents(evt =>
                      evt.Create("onCreate")
                          .CellClick("onCellClick")
                          .AppointmentClick("onAppointmentClick")
                          .AppointmentWindowOpen("onAppointmentWindowOpen")
                          .AppointmentCreated("onAppointmentCreated")
                          .AppointmentRemoved("onAppointmentRemoved")
                          .AppointmentChanged("onAppointmentChanged")
                          .ResizeStop("onResizeStop")
                          .ActionComplete("onActionComplete")
                          .DragStop("onDragStop")
                  ))


<script id="WorkActivityTemplate" type="text/x-jsrender">
    <div class="contactGroup">
        <div>{{:Address}} {{:City}} ({{:Province}})</div>
        <div>{{:CustomerName}}</div>
        <div>{{:Subject}}</div>
    </div>
</script>

<<CONTROLLER>>

                var services = db.Services.ToList();

                List<Categorize> CategorizeValue = new List<Categorize>();

                foreach (var s in services)
                {
                    CategorizeValue.Add(new Categorize { text = s.ServiceCode + " Category", id = s.ServiceCode, color = s.RGBColor, fontColor = s.FontColor });
                }
                ViewBag.categorize = CategorizeValue;



Attachment: syncfusion_screen_3fa496e7.zip

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 7, 2017 11:57 AM UTC

 
Thank you for contacting Syncfusion support. 
 
When an appointment template option is used, default template will be overridden and therefore only categorize color is not shown in Agenda view. We have prepared the sample to show category color in Agenda view which can be download from the below location and kindly refer the following code example used in the sample. 
 
<Code> 
<script id="MyTemplate" type="text/x-jsrender"> 
    {{if View == "agenda"}} 
    <div class="cusClass" style="background-color:{{:~format(CategoryId)}}"></div>{{:Subject}} 
    {{else}} 
    <div>{{:Subject}}</div> 
    {{/if}} 
</script> 
<script type="text/javascript"> 
    function _getColor(color) { 
        switch (color) { 
            case "1": 
                return "#43b496"; 
            case "2": 
                return "#7f993e"; 
            default: 
                return null; 
        } 
    } 
    $.views.helpers({ format: _getColor }); 
</script> 
</Code> 
 
Regards, 
Karthigeyan 
 
 


CLAUDIO RICCARDI
Replied On February 7, 2017 03:10 PM UTC

Thank you.

It works fine!

Claudio

Karthigeyan Krishnamurthi [Syncfusion]
Replied On February 8, 2017 06:13 AM UTC

 
We are happy to hear that your issue has been resolved.  
 
Please let us know if you need further assistance. 
 
Regards, 
Karthigeyan 


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.

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

;