1. Home
  2. Forum
  3. Blazor
  4. Automatically highlighted

Automatically highlighted

  1. I am using toolbar items on the years above. I want the current year to be automatically highlighted and so on to the next year.
  2. And on months below I am using div id, I also want the current month to be automatically highlighted.
  3. When the current year and current month automatically highlighted it will display the weekly days of the calendar.   Screenshot (498).png

5 Replies
BC Belle Cruz December 27, 2021 06:23 AM UTC

Is there any update a


SK Satheesh Kumar Balasubramanian Syncfusion Team December 27, 2021 11:56 AM UTC

Hi Belle, 
  
Thanks for using Syncfusion Products. 
  
Please check the attached sample to highlight the toolbar item based on requirement which can be downloaded from the following link. 
  
  
Index.razor: 
<style> 
    .e-toolbar .e-tbar-btn.e-btn .e-icons.e-chevron-left { 
        color: red; 
    } 
  
    .e-toolbar .e-tbar-btn.e-btn .e-icons.e-chevron-right { 
        color: red; 
    } 
  
    .e-toolbar .e-toolbar-items .e-toolbar-item.year-active .e-tbar-btn.e-btn, 
    .e-toolbar .e-toolbar-items .e-toolbar-item.month-active .e-tbar-btn.e-btn { 
        color: blue; 
    } 
</style> 
  
@code { 
    public DateTime CurrentDate { get; set; } = DateTime.UtcNow; 
    public void Clicked(Syncfusion.Blazor.Navigations.ClickEventArgs args) 
    { 
        for (int i = 0; i < YearToolbar.Items.Count; i++) 
        { 
            YearToolbar.Items[i].CssClass = ""; 
        } 
        for (int i = 0; i < MonthToolbar.Items.Count; i++) 
        { 
            MonthToolbar.Items[i].CssClass = ""; 
        } 
        if (args.Item.Id == "2019") 
        { 
            CurrentDate = DateTime.UtcNow; 
            CurrentDate = CurrentDate.AddYears(-2); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "2020") 
        { 
            CurrentDate = DateTime.UtcNow; 
            CurrentDate = CurrentDate.AddYears(-1); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "2021") 
        { 
            CurrentDate = DateTime.UtcNow; 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "2022") 
        { 
            CurrentDate = DateTime.UtcNow; 
            CurrentDate = CurrentDate.AddYears(1); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "Previous") 
        { 
            CurrentDate = CurrentDate.AddDays(-7); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "Next") 
        { 
            CurrentDate = CurrentDate.AddDays(7); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
    } 
  
    public void OnCreate() 
    { 
        for (int i = 0; i < YearToolbar.Items.Count; i++) 
        { 
            if (CurrentDate.Year.ToString() == YearToolbar.Items[i].Id) 
            { 
                YearToolbar.Items[i].CssClass = "year-active"; 
            } 
        } 
        for (int i = 0; i < MonthToolbar.Items.Count; i++) 
        { 
            if (CurrentDate.Month.ToString() == MonthToolbar.Items[i].Id) 
            { 
                MonthToolbar.Items[i].CssClass = "month-active"; 
            } 
        } 
    } 
 } 
  
Could you please confirm whether the above solution has fulfilled your requirement? 

Regards, 
Satheesh Kumar B 


BC Belle Cruz December 28, 2021 03:11 AM UTC

Thank you Satheesh,


  1. I also want all the months from year 2018, 2019, 2020, 2021, and 2022 will be displayed.
  2. For example when I clicked the year 2018 it will be highlighted and when I clicked the month January it will also be highlighted.
  3. It will also display the weeks.
  4. The current date or the weekday number should be highlighted when I disable the timescale.

BC Belle Cruz December 29, 2021 02:24 AM UTC

Is there any update about my questions?


SK Satheesh Kumar Balasubramanian Syncfusion Team December 29, 2021 11:55 AM UTC

Hi Belle, 
  
We have created a new ticket under your account to follow up with this query. We suggest you to follow up with the ticket for further updates. Please login using the below link. 
  
Regards, 
Satheesh Kumar B 


Loader.
Up arrow icon