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.
Unfortunately, activation email could not send to your email. Please try again.

Change background color of appointment in Agenda view.

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 06:57 AM

 
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 10:10 AM

Thank you.

It works fine!

Claudio

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

 
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.

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.

;