Click calendar Date on Mobil dont open the modal

[Arturo Martinez]

My shceduler is behaving different on mobil than on Desktop

When i click a empty date on the calendar my popup shows as my code implies on Desktop, but when i do the same on mobil a little purple rectangle appears saying 'Add New Event' and no popup ever displays

Mobil Functionality o click on Date

Scheduler:

AND TS:

onPopupOpen = (args: any) => {

// Check if the 'Folio' property exists

args.cancel = true;

const today = new Date(); // Get today's date

const startTime = new Date(args.data.StartTime); // Convert StartTime to a Date object

if (startTime.toDateString() <= today.toDateString()) {

if (args.data.hasOwnProperty("Folio")) {

if (args.type === 'Editor' || args.type === 'QuickInfo') {

args.cancel = true;

this.honEditRsv.emit({ row: args, folio: args.data.Folio });

}

} else if (args.type === 'QuickInfo') {

args.cancel = true;

const groupIndex = args.data.groupIndex;

const resourceCollection = this.scheduleObj.getResourceCollections();

const activeCellsData = this.scheduleObj.activeCellsData;

const cellDetails = this.scheduleObj.getCellDetails(activeCellsData.element!);

const rowData = this.scheduleObj.getResourcesByIndex(cellDetails.groupIndex!)

// Get current date and filter events

const now = new Date();

const events = this.scheduleObj.getEvents();

let filteredEvents

if(events && events.length !== 0){

filteredEvents = events.filter(event => new Date(event.EndTime) >= now);

// Helper function to get only the date part of a Date object (ignore time)

const getDateOnly = (date: string | Date): string => {

return new Date(date).toISOString().split('T')[0]; // Format as YYYY-MM-DD

};

// Check for overlapping events (same day only, ignoring time)

const hasOverlap = filteredEvents.some(event => {

if (event.ProjectId === args.data.ProjectId && event.TaskId === args.data.TaskId) {

const eventStartDate = getDateOnly(event.StartTime);

const eventEndDate = getDateOnly(event.EndTime);

const argsStartDate = getDateOnly(args.data.startTime);

const argsEndDate = getDateOnly(args.data.endTime);

// Check for date overlap (ignoring time)

return (argsStartDate <= eventEndDate && argsEndDate >= eventStartDate);

}

return false;

});

if(hasOverlap){

return

}else{

const numeroCuarto = rowData.resourceData.text

const codigoCuarto = this.roomCodesComplete.find(item => item.Numero === numeroCuarto)?.Codigo;

this.honNvaRsvDateRange.emit({ data: args.data, numeroCuarto, codigoCuarto });

}

}else {

const numeroCuarto = rowData.resourceData.text

const codigoCuarto = this.roomCodesComplete.find(item => item.Numero === numeroCuarto)?.Codigo;

this.honNvaRsvDateRange.emit({ data: args.data, numeroCuarto, codigoCuarto });

}

}

}

}

<ejs-schedule

#scheduleObj

width='100%'

cssClass='timeline-resource-grouping'

height='auto'

allowSwiping="false"

[selectedDate]="selectedDate"

[group]="group"

[workDays]="workDays"

[eventSettings]="eventSettings"

[timeScale]="timeScale"

[currentView]="currentView"

(actionComplete)="onActionComplete($event)"

(renderCell)="onRenderCell($event)"

(dataBound)="onDataBound()"

(popupOpen)="onPopupOpen($event)"

(dragStart)="onDragStart($event)"

(dragStop)="onDragStop($event)"

(eventRendered)="onEventRendered($event)"

(resizeStart)="onResizeStart($event)"

(resizeStop)="onResizeStop($event)"

[quickInfoOnSelectionEnd] = "true"

>

<ng-template #dateHeaderTemplate let-data>

<div class="date-text"></div>

<div [innerHTML]="getDateHeaderText(data.date)"></div>

</ng-template>

<ng-template #resourceHeaderTemplate let-data let-index>

<div style="height: 100%; display: flex; align-items: center; justify-content: start;">

<div [matMenuTriggerFor]="menu" class="btn btn-icon btn-custom btn-icon-muted">

<img class="thumbnail" *ngIf="isChildNode(data)" [src]="getIconClass(data.resourceData.text)" alt="{{data.resourceData.ImageName}}" style="height: 57px; width: 30px;" />

</div>

<mat-menu #menu="matMenu">

<ng-container *ngFor="let estatus of estatusArray">

<button (click)="onStatusChange(data.resourceData.text, estatus.Descripcion)" mat-menu-item>

<span>{{estatus.Descripcion}}</span>

</button>

</ng-container>

</mat-menu>

{{data.resourceData.text}}

</div>

</ng-template>

<e-resources>

<e-resource

field='ProjectId'

title='Choose Project'

[dataSource]='tipoHabGroupDataSource'

[allowMultiple]='allowMultiple'

name='Type'

textField='text'

idField='id'

colorField='color'

>

</e-resource>

<e-resource

field='TaskId'

title='Category'

[dataSource]='habitacionPorTipoDataSource'

[allowMultiple]='allowMultiple'

name='Rooms'

textField='text'

idField='id'

groupIDField='groupId'

colorField='color'

>

</e-resource>

</e-resources>

<e-views>

<e-view option="TimelineDay" [interval]="dayInterval"></e-view>

<e-view option="TimelineWeek"></e-view>

<e-view option="TimelineWorkWeek"></e-view>

<e-view option="TimelineMonth"></e-view>

</e-views>

</ejs-schedule>

[Vijay Ravi]

Hi Arturo,
 

When using Syncfusion's Scheduler on mobile mode, the following user interactions are enabled by default for creating, editing, and deleting events:

1. Create Event:

On tapping an empty cell, the Scheduler displays a Quick Info popup that offers options like "Add Event" or "New Event."
 

The user can then tap "Add Event," which opens a detailed event editor form where they can fill in the event details such as title, start time, end time, and description.

2. Edit Event:
 

When the user taps an existing event on the Scheduler, a Quick Info popup appears, showing the event title and basic details.
 

The popup provides options like Edit or Delete.
 

Tapping Edit opens the detailed event editor form, where users can update the event details.

2. Delete Event:
 

On mobile devices, a long press on an event may trigger the Quick Info popup, where the user can select Delete to remove the event.
 

Alternatively, the user can tap the event and choose the Delete option from the popup menu.

Furthermore, you can explore the Syncfusion documentation for detailed guidance on mobile mode gestures.

UG link: https://ej2.syncfusion.com/angular/documentation/schedule/scheduler-interactions
 

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Arturo Martinez]

how can i change this mobile mode? i ant the scheduler to behave the same on the mobile as on desktop, or at least the new avent on tapping on a day to behave the same

[Vijay Ravi]

Hi Arturo,
 

we have logged your requirement as a feature request , and it will be considered for inclusion in one of our upcoming releases. You can track the progress of this request using the feedback link below:
 

Feedback: Provide support to control quick popup display in mobile view for Schedule Component in Angular | Feedback Portal
 

We prioritize feature implementations based on factors such as customer demand, feature ranking, and our roadmap. Please feel free to vote for this feature using the link above to help us gauge interest.
 

In the meantime, you can display a small quick popup in the mobile view similar to the desktop view by utilizing the actionBegin event and disabling the isAdaptive property. Here is an example of how you can achieve this:

[app.component.html]
 

  <ejs-schedule #scheduleObj (actionBegin)="onActionBegin($event)">

  </ejs-schedule>

[app.component.ts]
 

public onActionBegin(args: ActionEventArgs): void {

   if (args.requestType === 'toolbarItemRendering') {

     this.scheduleObj.element.classList.remove('e-device');

     this.scheduleObj.isAdaptive = false;

   }

Sample link: 3fx6tv (forked) - StackBlitz

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Arturo Martinez]

i dont understand, so on mobile when creating a new event via the calendar i wont be able to access the 

this cant be triggered on mobile?

Because now on my mobile scheduler the little purple box with the add event appears but it dont do anything i cant add a event, 

i have a large logic for opening a new event window when clicking on any day on the scheduler and want to do the amendment but in the mobile version

if i cant make it behave like the desktop, how can i disable the add event function click function on. the calendar when on mobile view?

[Vijay Ravi]

Hi Arturo,

 

We have reviewed and validated your popupOpen code logic, and it works as expected in the sample we shared. The popupOpen event is triggered correctly while creating an event in mobile mode. We were unable to replicate the mentioned issue on our end. We suspect that the issue may be specific to your application. To assist us in understanding and addressing the issue more effectively, could you kindly provide the following details? This information will help us provide more thorough support in resolving the problem.

 

• Could you share the issue replicate sample.
• Could you share your sample staging link.
• Could you replicate the issue in our shared sample

 

Sample link: https://stackblitz.com/edit/angular-ry2v9k-8senk4?file=src%2Fapp.component.html,src%2Fapp.component.ts

 

Regards,

Vijay