Save and cancel buttons on scheduler mobile appointment editor

[Troy]

When I open the appointment editor window on mobile, the save and cancel buttons are small icon buttons in the upper corners of the screen.  My users are having a hard time touching the small buttons so I would like to make them be just normal buttons at the bottom of the screen.  How can I acccomplish this?

[Ruksar Moosa Sait]

Hi Troy,

We have prepared a sample with Save, Delete and Cancel buttons and binding their respective onClick events. Also, we have bind the OnPopupOpen, OnCellClick, OnEventClick and OnEventDoubleClick methods to the scheduler to achieve the save, delete and cancel functionalities like the below code snippet.

<tr>

    <td>

         <div style="float:right; padding: 2px 6px 0px 0px;" class="col-xs-12 col-sm-12 col-lg-6 col-md-6">

              <SfButton @onclick="@OnDelete">Delete</SfButton>

          </div>

    </td>

    <td colspan="6">

          <div style="float: right; padding: 2px;">

               <SfButton IsPrimary="true" @onclick="@OnSave">Save</SfButton>

          </div>

    </td>

    <td colspan="6">

         <div style="float: right; padding: 2px;" class="col-xs-12 col-sm-12 col-lg-6 col-md-6">

               <SfButton @onclick="@OnCancel">Cancel</SfButton>

         </div>

    </td>

</tr>

public void OnPopupOpen(PopupOpenEventArgs<AppointmentData> args)

    {

        if (args.Type == PopupType.Editor)

        {

            EventData = args.Data;

        }

    }

private async Task OnSave()

    {

        ScheduleRef.CloseEditor();

        if (EventData.Id == 0)

        {

            EventData.Id = await ScheduleRef.GetMaxEventIdAsync<int>();

            EventData.Subject = "Add title";

            await ScheduleRef.AddEventAsync(EventData);

        }

        else

        {           

            await ScheduleRef.SaveEventAsync(EventData);           

        }

    }

private async Task OnDelete()

    {

        await ScheduleRef.DeleteEventAsync(EventData, CurrentAction.Delete);

    }

private void OnEventClick(EventClickArgs<AppointmentData> args)

    {

        EventData = args.Event;

    }

private void OnCellClick(CellClickEventArgs args)

    {

        EventData = new AppointmentData();

       EventData.StartTime = args.StartTime;

        EventData.EndTime = args.EndTime;

        EventData.Subject = "Add title";

    }

private void OnCancel()

    {

        ScheduleRef.CloseEditor();

    }

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

Attachment: SavebuttonMobilemode_f990a3ad.zip