How to change attribute in SfScheduler when using SfContextMenu?

Question

I want to change the background of an element in a SfScheduler using the SfContextMenu, but it didn't change.

(https://i.sstatic.net/reYlS.png)Can you help me, please?

Here my code :

<MenuItems>

    <MenuItem Text="New Event" Id="Add" Hidden="@isCell"></MenuItem>

    <MenuItem Text="New Recurring Event" Hidden="@isCell" Id="AddRecurrence"></MenuItem>

    <MenuItem Text="Duplicate" Id="Duplicate"></MenuItem>

    <MenuItem Text="Today" Id="Today" Hidden="@isCell"></MenuItem>

    <MenuItem Text="Edit Event" Id="Save" Hidden="@isEvent"></MenuItem>

    <MenuItem Text="Edit Event" Id="EditRecurrenceEvent" Hidden="@isRecurrence">

        <MenuItems>

            <MenuItem Text="Edit Occurrence" Id="EditOccurrence" Hidden="@isRecurrence"></MenuItem>

            <MenuItem Text="Edit Series" Id="EditSeries" Hidden="@isRecurrence"></MenuItem>

        </MenuItems>

    </MenuItem>

    <MenuItem Text="Delete Event" Id="Delete" Hidden="@isEvent"></MenuItem>

    <MenuItem Text="Delete Event" Id="DeleteRecurrenceEvent" Hidden="@isRecurrence">

        <MenuItems>

            <MenuItem Text="Delete Occurrence" Id="DeleteOccurrence" Hidden="@isRecurrence"></MenuItem>

            <MenuItem Text="Delete Series" Id="DeleteSeries" Hidden="@isRecurrence"></MenuItem>

        </MenuItems>

    </MenuItem>

    <MenuItem Text="Rename" Id="Rename" Hidden="@isResource"></MenuItem>

     <MenuItem Text="Change Status">

        <MenuItems>

            <MenuItem Text="Added" Id="StatusAdded"></MenuItem>

            <MenuItem Text="Confirmed" Id="StatusConfirmed"></MenuItem>

            <MenuItem Text="Canceled" Id="StatusCanceled"></MenuItem>

        </MenuItems>

     </MenuItem>

</MenuItems>

<MenuEvents TValue="MenuItem" OnOpen="OnOpen" ItemSelected="OnItemSelected"></MenuEvents>

public async Task OnItemSelected(MenuEventArgs args)

{

    var SelectedMenuItem = args.Item.Id;

    var ActiveCellsData = await ScheduleRef.GetSelectedCellsAsync();

    if (ActiveCellsData == null)

    {

        ActiveCellsData = CellData;

    }

    switch (SelectedMenuItem)

    {

      [...] // I took the code from the documentation for this part.

        case "StatusAdded":

            await ChangeColor(EventData, "green");

            break;

        case"StatusConfirmed":

            await ChangeColor(EventData, "blue");

            break;

        case "StatusCanceled":

            await ChangeColor(EventData, "red");

            break;

    }

}

private async Task ChangeColor(ScheduleData.BlockData data, string color)

{

    var ev = (await ScheduleRef.GetEventsAsync()).FirstOrDefault(q => q.Id == data.Id);

    if (ev != null)

    {

        ev.CategoryColor = color;

    }

   data.CategoryColor = color; //not working

    ScheduleData.ApplyCategoryColor(data.CategoryColor, null, CurrentView); // Come from documentation, not working

    // Enregistrez la couleur mise à jour dans les événements du composant SfScheduler

    await ScheduleRef.RefreshEventsAsync();

    // Forcez le composant SfScheduler à se rafraîchir

    await ScheduleRef.RefreshAsync();

}

public void OnEventRendered(EventRenderedArgs<ScheduleData.BlockData> args)

{

    args.Attributes = ScheduleData.ApplyCategoryColor(args.Data.CategoryColor, args.Attributes, CurrentView); //Here,  args.Data.CategoryColor is always null

Can you help me, please?

Here my code :

<MenuItems>

    <MenuItem Text="New Event" Id="Add" Hidden="@isCell"></MenuItem>

    <MenuItem Text="New Recurring Event" Hidden="@isCell" Id="AddRecurrence"></MenuItem>

    <MenuItem Text="Duplicate" Id="Duplicate"></MenuItem>

    <MenuItem Text="Today" Id="Today" Hidden="@isCell"></MenuItem>

    <MenuItem Text="Edit Event" Id="Save" Hidden="@isEvent"></MenuItem>

    <MenuItem Text="Edit Event" Id="EditRecurrenceEvent" Hidden="@isRecurrence">

        <MenuItems>

            <MenuItem Text="Edit Occurrence" Id="EditOccurrence" Hidden="@isRecurrence"></MenuItem>

            <MenuItem Text="Edit Series" Id="EditSeries" Hidden="@isRecurrence"></MenuItem>

        </MenuItems>

    </MenuItem>

    <MenuItem Text="Delete Event" Id="Delete" Hidden="@isEvent"></MenuItem>

    <MenuItem Text="Delete Event" Id="DeleteRecurrenceEvent" Hidden="@isRecurrence">

        <MenuItems>

            <MenuItem Text="Delete Occurrence" Id="DeleteOccurrence" Hidden="@isRecurrence"></MenuItem>

            <MenuItem Text="Delete Series" Id="DeleteSeries" Hidden="@isRecurrence"></MenuItem>

        </MenuItems>

    </MenuItem>

    <MenuItem Text="Rename" Id="Rename" Hidden="@isResource"></MenuItem>

     <MenuItem Text="Change Status">

        <MenuItems>

            <MenuItem Text="Added" Id="StatusAdded"></MenuItem>

            <MenuItem Text="Confirmed" Id="StatusConfirmed"></MenuItem>

            <MenuItem Text="Canceled" Id="StatusCanceled"></MenuItem>

        </MenuItems>

     </MenuItem>

</MenuItems>

<MenuEvents TValue="MenuItem" OnOpen="OnOpen" ItemSelected="OnItemSelected"></MenuEvents>

public async Task OnItemSelected(MenuEventArgs args)

{

    var SelectedMenuItem = args.Item.Id;

    var ActiveCellsData = await ScheduleRef.GetSelectedCellsAsync();

    if (ActiveCellsData == null)

    {

        ActiveCellsData = CellData;

    }

    switch (SelectedMenuItem)

    {

      [...] // I took the code from the documentation for this part.

        case "StatusAdded":

            await ChangeColor(EventData, "green");

            break;

        case"StatusConfirmed":

            await ChangeColor(EventData, "blue");

            break;

        case "StatusCanceled":

            await ChangeColor(EventData, "red");

            break;

    }

}

private async Task ChangeColor(ScheduleData.BlockData data, string color)

{

    var ev = (await ScheduleRef.GetEventsAsync()).FirstOrDefault(q => q.Id == data.Id);

    if (ev != null)

    {

        ev.CategoryColor = color;

    }

   data.CategoryColor = color; //not working

    ScheduleData.ApplyCategoryColor(data.CategoryColor, null, CurrentView); // Come from documentation, not working

    // Enregistrez la couleur mise à jour dans les événements du composant SfScheduler

    await ScheduleRef.RefreshEventsAsync();

    // Forcez le composant SfScheduler à se rafraîchir

    await ScheduleRef.RefreshAsync();

}

public void OnEventRendered(EventRenderedArgs<ScheduleData.BlockData> args)

{

    args.Attributes = ScheduleData.ApplyCategoryColor(args.Data.CategoryColor, args.Attributes, CurrentView); //Here,  args.Data.CategoryColor is always null

} }

I've already try everything from documentation but nothing is working.

I want to use context context menu to change an attribut of an appointements

Answer 1

You can change the background of an element in a Scheduler using the SfContextMenu, with the help of EventRendered event, like the below shared snippet.

[index.razor]

<MenuItems>

        <MenuItems>

            <MenuItem Text="Added" Id="StatusAdded"></MenuItem>

            <MenuItem Text="Confirmed" Id="StatusConfirmed"></MenuItem>

            <MenuItem Text="Canceled" Id="StatusCanceled"></MenuItem>

        </MenuItems>

    </MenuItem>

</MenuItems>

<MenuEvents TValue="MenuItem" OnOpen="OnOpen" ItemSelected="OnItemSelected"></MenuEvents>

@code {

private bool isCell;

private bool isEvent;

public bool isInitialRendering = true;

SfSchedule<AppointmentData> ScheduleRef;

private AppointmentData EventData { get; set; }

private CellClickEventArgs CellData { get; set; }

private ElementInfo<AppointmentData> ElementData { get; set; }

public List<AppointmentData> DataSource = new List<AppointmentData>

{

    new AppointmentData { Id = 2, Subject = "Requirement planning", StartTime = new DateTime(2023, 2, 8, 9, 30, 0) , EndTime = new DateTime(2023, 2, 8, 12, 30, 0), CategoryColor="purple"},

};



public async Task OnOpen(BeforeOpenCloseMenuEventArgs<MenuItem> args)

{

    if (args.ParentItem == null)

    {

        isResource = true;

        ElementData = await ScheduleRef.GetElementInfoAsync((int)args.Left, (int)args.Top);

        if (ElementData.ElementType == ElementType.Event)

        {

            EventData = ElementData.EventData;

            if (EventData.Id == 0)

            {

                args.Cancel = true;

            }

            if (EventData.RecurrenceRule != null)

            {

                isCell = isEvent = true;

                isRecurrence = false;

            }

            else

            {

                isCell = isRecurrence = true;

                isEvent = false;

            }

        }

        else

        {

            isCell = false;

            isEvent = isRecurrence = true;

        }

    }

}

public async Task OnItemSelected(MenuEventArgs<MenuItem> args)

{

    var SelectedMenuItem = args.Item.Id;

    var ActiveCellsData = await ScheduleRef.GetSelectedCellsAsync();

    if (ActiveCellsData == null)

    {

        ActiveCellsData = CellData;

    }

    switch (SelectedMenuItem)

    {

        case "StatusAdded":

            await ChangeColor(EventData, "green");

            break;

        case "StatusConfirmed":

            await ChangeColor(EventData, "blue");

            break;

        case "StatusCanceled":

            await ChangeColor(EventData, "red");

            break;

    }

}

private async Task ChangeColor(AppointmentData data, string color)

{

    isInitialRendering = false;

    data.CategoryColor = color;

    await ScheduleRef.RefreshEventsAsync();

}



public void OnEventRendered(EventRenderedArgs<AppointmentData> args)

{

    Dictionary<string, object> attributes = new Dictionary<string, object>();

    if (isInitialRendering)

    {

        attributes.Add("style", "background: " + args.Data.CategoryColor);

        args.Attributes = attributes;

    }

    else if (EventData != null && EventData.Id == args.Data.Id)

    {

        attributes.Add("style", "background: " + EventData.CategoryColor);

        args.Attributes = attributes;

    }}