Blazor Scheduler - Custom Footer

Scheduler Chart - Custom Footer

The guide below details how to implement a Custom Footer for Scheduler Chart in Blazor.

To implement a Custom Footer, we need to be able to directly set event listeners, enable/disable radio buttons and perform other DOM operations on non-Blazor elements.

For this reason, we will be using JS interop - a Blazor tool, which can invoke JavaScript (JS) functions from .NET methods and .NET methods from JS functions.

  1. First, create a basic Scheduler with multiple Events: 
    @page "/"
    
<Scheduler DataSource="@dataSource" HourStart="@hourStart" View="SchedulerViewType.Week"></Scheduler>

@code {

    int hourStart = 9;

    List<SchedulerDataSource> dataSource = new List<SchedulerDataSource>()
            {
                new SchedulerDataSource()
                {
                    Label = "Google AdWords Strategy",
                    DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 10, 0, 0),
                    DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 11, 30, 0),
                    BackgroundColor = "#E67C73"
                },
                new SchedulerDataSource()
                {
                    Label = "New Brochures",
                    DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 12, 0, 0),
                    DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 15, 0, 0),
                    BackgroundColor = "#8E24AA"
                },
                new SchedulerDataSource()
                {
                    Label = "Brochure Design Review",
                    DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 15, 30, 0),
                    DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 18, 15, 0),
                },
                new SchedulerDataSource()
                {
                    Label = "Website Re-Design Plan",
                    DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+1, 11, 0, 0),
                    DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+1, 12, 15, 0),
                }
            };

}
    Basic Scheduler
  2. Next, we need to create the HTML of the Custom Footer and set its id to the footerTemplate property of the Scheduler Chart: 
    <Scheduler DataSource="@dataSource" HourStart="@hourStart" FooterTemplate="footerId" View="SchedulerViewType.Week"></Scheduler>

<template id="footerTemplate">
    <div class="custom-footer">
        <label>Select an Event color:</label>
        <smart-radio-button id="green">Green</smart-radio-button><smart-radio-button id="yellow">Yellow</smart-radio-button>
        <smart-radio-button id="purple">Purple</smart-radio-button><smart-radio-button id="brown">Brown</smart-radio-button>
    </div>
</template>

@code{
    string footerId = "footerTemplate";
    ....
}
  3. Finally, we need to add the CSS for the Custom Footer: 
    .custom-footer {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 10px;
}

.color-icon {
    width: 15px;
    color: transparent;
}

#green {
    --smart-background: rgb(51, 182, 121);
}

#yellow {
    --smart-background: rgb(246, 191, 38);
}

#purple {
    --smart-background: rgb(142, 36, 170);
}

#brown {
    --smart-background: rgb(97, 97, 97);
}

.color-green {
    --smart-scheduler-event-background-rgb: 51, 182, 121;
    --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1);
    --smart-scheduler-event-focus: rgba(var(--smart-scheduler-event-background-rgb), .9);
    --smart-scheduler-event-hover: rgba(var(--smart-scheduler-event-background-rgb), .8);
}

.color-yellow {
    --smart-scheduler-event-background-rgb: 246, 191, 38;
    --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1);
    --smart-scheduler-event-focus: rgba(var(--smart-scheduler-event-background-rgb), .9);
    --smart-scheduler-event-hover: rgba(var(--smart-scheduler-event-background-rgb), .8);
}

.color-purple {
    --smart-scheduler-event-background-rgb: 142, 36, 170;
    --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1);
    --smart-scheduler-event-focus: rgba(var(--smart-scheduler-event-background-rgb), .9);
    --smart-scheduler-event-hover: rgba(var(--smart-scheduler-event-background-rgb), .8);
}

.color-brown {
    --smart-scheduler-event-background-rgb: 97, 97, 97;
    --smart-scheduler-event-background: rgba(var(--smart-scheduler-event-background-rgb), 1);
    --smart-scheduler-event-focus: rgba(var(--smart-scheduler-event-background-rgb), .9);
    --smart-scheduler-event-hover: rgba(var(--smart-scheduler-event-background-rgb), .8);
}

    We can see that the Footer was integrated successfully, however the radio buttons have no effect on the Scheduler.
    Custom Footer

  4. To implement the actions of each radio button, we must use JSInterop. First inject the IJSRuntime abstraction.
    Then in the OnReady() callback, call the "setCustomFooter" JS function, which we will later create. 
    @inject IJSRuntime JSInterop;
<Scheduler DataSource="@dataSource" HourStart="@hourStart" FooterTemplate="footerTemplate" View="SchedulerViewType.Week" OnReady="OnReady"></Scheduler>
@code{
  ...
  private void OnReady(Scheduler scheduler)
  {
      JSInterop.InvokeVoidAsync("setCustomFooter");
  }
}
  5. Now, navigate to Pages/_Host.cshtml(Blazor Server) or wwwroot/index.html(Blazor WebAssembly).
    Create a <script></script> tag and paste the code below, which will create the "setCustomFooter" function: 
    <script>
(function (global) {
    global.setCustomFooter = function(){
        let customFooter = document.querySelector('.custom-footer');
        customFooter.addEventListener('change', function (event) {
            const target = event.target;
            if (target instanceof window.Smart.RadioButton) {
                const scheduler = document.querySelector('smart-scheduler'), schedulerClassList = scheduler.classList;
                //Remove previous classes
                Array.from(schedulerClassList).forEach(c => {
                    if (c.indexOf('color-') > -1) {
                        schedulerClassList.remove(c);
                    }
                });
                schedulerClassList.add('color-' + target.id);
            }
        });
    }
})(window);
</script>
  6. Now we can see that the Custom Footer is complete and we can now change the color of the Scheduler events by clicking on the radio buttons.
    : Custom Footer