Change background color of appointment in Agenda view.

[CLAUDIO RICCARDI]

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]

Hi Claudio, 

 

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. 

http://www.syncfusion.com/downloads/support/forum/128687/ze/Sample1176146545 

 

<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]

Thank you.

It works fine!

Claudio

[Karthigeyan Krishnamurthi]

Hi Claudio, 

 

We are happy to hear that your issue has been resolved.  

 

Please let us know if you need further assistance. 

 

Regards, 

Karthigeyan