1. Home
  2. Forum
  3. Angular - EJ 2
  4. Cannot read property 'classList' of undefined

Cannot read property 'classList' of undefined

Hi,
)
I tried to implement the one-click opening for the Editor in the attached Angular 8 project (see the attached file):

"    if (args.type === 'QuickInfo') {
      const dialogObj = (args.element as any).ej2_instances[0];
      dialogObj.hide();
      const currentAction = args.target.classList.contains('e-work-cells') ? 'Add' : 'Save';
      this.scheduleObj.openEditor(args.data, currentAction);
    }" 
I have got  the following error:
"ERROR TypeError: Cannot read property 'classList' of undefined  at AppComponent.onPopupOpen "

If I disable the following code

" if ((args.target.classList.contains('e-appointment'))) {
          console.log('cannot edit, view details or delete an appointment');
          args.cancel = true;
          this.toastObj.show({
            title: 'Information !',
            content: 'You cannot edit, view details or delete an appointment',
            cssClass: 'e-toast-info'
          });
        }"

and

 " if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) {
      args.cancel = this.onEventCheck(args);
    }"

the error will disappear.
But I need first code for disabling the QuickInfo and Editor for an existing appointment, and second block of code for disabling the appointments for the past dates.
How it is possible to solve these incompatibilities?

Q2. If I also disable the following code:

"   const roomElement: HTMLInputElement = args.element.querySelector('#RoomName');
      if (!roomElement.classList.contains('e-multiselect')) {
        let roomObject: MultiSelect = new MultiSelect({
          placeholder: 'Choose a room',
          fields: { text: 'roomName', value: 'roomName' },
          dataSource: (this.roomsDataSource as any),
          value: <string[]>(((args.data as any).RoomName instanceof Array) ? (args.data as any).RoomName : [(args.data as any).RoomName])
        });
        roomObject.appendTo(roomElement);
      } "

and keep the one-click code, the autofocus for the Name field is not working anymore.

Q3. Even I cannot add appointments for the past dates, I could add appointments for the present day (today) at past times. For example, if the current time is 4 pm, I can add an appointment for the 2 pm. I expect to not be able to add such kind of appointments.

Q4. You can browse my app at  https://testare.anada.ro  and see how the page is displayed on a mobile phone and on a laptop.
It has a time slot of 90 minutes. As you can see the time slots are displayed OK on the laptop but not on the mobile phone ( the time is 1 PM instead of 1:30 PM ).
 I would like to enlarge the cell to display correctly and completely  the time.

Q5. I would like to center the name of the rooms (Nancy, Robert and so on), as well the date (Mon 3), But I do not know how to access it.

Q6. Create an appointment for 1:30 pm and try to move it to 4.30 pm. Unfortunately you can move it just to 4 pm or 5 pm, which is not correct.

Q7. If in your app the Schedule component is not the main component (app. component.ts) but a lazy load component for example, when you try to open an existing appointment, the QuickInfo window will he hidden by the toolbar menu from the main component. So you cannot see the appointments details or open the Editor for that appointment.

Thank you very much for your help.

Regards,

Mircea

Attachment: appmaster_f0c1f093.zip

25 Replies
BS Balasubramanian Sattanathan Syncfusion Team February 4, 2020 06:46 PM UTC

Hi Mircea, 
 
Greetings from Syncfusion Support. 
 
Q1 : 
We can prevent the quick popup for appointments using below code snippet. 
 
if (args.type === 'QuickInfo') { 
      if ((args.target.classList.contains('e-work-cells'))) { 
        const dialogObj = (args.element as any).ej2_instances[0]; 
        dialogObj.hide(); 
        const currentAction = args.target.classList.contains('e-work-cells') ? 'Add' : 'Save'; 
        this.scheduleObj.openEditor(args.data, currentAction); 
      } 
      if ((args.target.classList.contains('e-appointment'))) { 
        console.log('cannot edit, view details or delete an appointment'); 
        args.cancel = true; 
        this.toastObj.show({ 
          title: 'Information !', 
          content: 'You cannot edit, view details or delete an appointment', 
          cssClass: 'e-toast-info' 
        }); 
      } 
} 
 
Q2, Q3 :  
Currently, we are validating your reported scenario at our end and will update further details on February 5, 2020. Kindly be patience until then. 
 
Q4 : 
By default, mobile mode Scheduler timescale will be differ from Desktop mode. We can change it by using majorSlotTemplate and minorSlotTemplate property like below code 
 
<ng-template #timeScaleMajorSlotTemplate let-data> 
  <div class="majorTime">{{getMajorTime(data.date)}}</div> 
</ng-template> 
<ng-template #timeScaleMinorSlotTemplate let-data> 
  <div class="minorTime">{{getMinorTime(data.date)}}</div> 
</ng-template> 
 
public timeScale: TimeScaleModel = { 
  enable: true, 
  interval: 60, 
  slotCount: 2, 
  majorSlotTemplate: '#majorSlotTemplate', 
  minorSlotTemplate: '#minorSlotTemplate' 
}; 
public instance: Internationalization = new Internationalization(); 
getMajorTime(date: Date): string { 
  return this.instance.formatDate(date, { skeleton: 'hm' }); 
} 
getMinorTime(date: Date): string { 
  return this.instance.formatDate(date, { skeleton: 'ms' }).replace(':00', ''); 
} 
 
 
Q5 : 
We can aligned the text as center using below CSS. 
 
.e-resource-text { 
  text-align: center; 
  padding-left: 0px !important; 
} 
 
Q6 : 
We have validated your reported problem. We could reproduce the issue at our end. So we consider this defect as bug and logged the below bug report. The fix for this bug will be included in our patch release which is expected to roll out by February 19, 2020. We will ensure the fix and provide further details on February 20, 2020. Kindly be patience until then. 
 
 
Q7 : 
We suspect that your reported problem is related to mobile mode of quick popup. By default, it will be rendered at full size. So that, Scheduler and it’s toolbar are hidden. If we misunderstood, kindly share the replication steps / video demo for serve you better. 
 
 
Note : Kindly create separate incidents for your queries to serve you better. 
 
Regards, 
Balasubramanian S 


MI Mircea February 5, 2020 01:15 AM UTC

Hi Balasubramanian, 

Thank you for your answers. Here there are my results: 

Q1. First incompatibility is done. It remains the incompatibility with the following code:
 if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) {
          args.cancel = this.onEventCheck(args);
        }
Because this incompatibility is related to Q2 and Q3, I will let them together and I am waiting for your solution for those issues.

Q4. The solution with majorSlotTemplate and minorSlotTemplate is not a convenient one. The user should modify every time the appointment duration from 30 minutes to 90 minutes (not user-friendly + source of errors) and the graphic does not look nice. In my opinion Q4 is related to Q6. Maybe this small modification of the slot time cell width could be included in the same fix from February 19, 2020.

Q5. The CSS is not working for header cells , you can see it at https://testare.anada.ro 

Q7. The QuickPop problem is related just for mobile and just for existing appointments. Because for new appointments the Editor is opening correctly. My 2 cents guess is something related with the z-index property of the QuickPop. Can be this property modified? Or QuickPop could be rendered at half-size? This problem is kind of blocker issue for me.

I will open new tickets for the last Qs.

Thank you very much for your help.

Regards,

Mircea


BS Balasubramanian Sattanathan Syncfusion Team February 5, 2020 12:18 PM UTC

Hi Mircea, 
 
Thanks for the update. 
 
Q1 : 
We let you know that you are using our old solution for the disabling the past dates. Kindly use Scheduler’s minDate property for disabling past dates. 
 
For autofocus related query : 
We have commented the mentioned codes and checked. The focusing for Name field is not working at our end too, due to the below code snippet. 
So kindly remove/comment the below code and check it at your end. 
 
// var dialog = (args.element as any).ej2_instances[0]; 
// dialog.open = function () { 
//   (args.element.querySelector('.e-schedule-dialog #RoomName') as any).ej2_instances[0].refresh(); 
// }; 
 
 
Q4 : 
We have checked your reported problem at our end. By default, mobile mode Scheduler timescale will be differ from Desktop mode. We can change it by using majorSlotTemplate and minorSlotTemplate property like below code. Kindly refer and use the below timescale. It will be same as the mobile and desktop mode. Kindly try the below code snippet and let us know if you need any further assistance on this. 
 
<ng-template #timeScaleMajorSlotTemplate let-data> 
  <div class="majorTime">{{getMajorTime(data.date)}}</div> 
</ng-template> 
<ng-template #timeScaleMinorSlotTemplate let-data> 
  <div class="minorTime">{{getMinorTime(data.date)}}</div> 
</ng-template> 
 
public timeScale: TimeScaleModel = { 
  enable: true, 
  interval: 90, 
  slotCount: 1, 
  majorSlotTemplate: '#majorSlotTemplate', 
  minorSlotTemplate: '#minorSlotTemplate' 
}; 
public instance: Internationalization = new Internationalization(); 
getMajorTime(date: Date): string { 
  return this.instance.formatDate(date, { skeleton: 'hm' }); 
} 
getMinorTime(date: Date): string { 
  return this.instance.formatDate(date, { skeleton: 'ms' }).replace(':00', ''); 
} 
 
 
Q5 : 
We can aligned the text at center in both vertical and timeline view using below CSS. 
 
// To aligned resource name as center in Timeline view 
.e-resource-text { 
  text-align: center; 
  padding-left: 0px !important; 
} 
 
// To aligned resource name as center in Vertical view 
.e-schedule .e-resource-cells .e-text-ellipsis { 
  text-align: center; 
} 
 
 
Q7 : 
We have checked your reported problem at our end. In mobile mode, the quick popup will be rendered at full size. So that, Scheduler and it’s toolbar are hidden. Since, which is the default behavior of the Scheduler. If you want to reduce the size of the quick popup in mobile mode, kindly use the below CSS. We have added this changes in the below sample. 
 
// To reduce the quick popup size in mobile mode 
.e-quick-popup-wrapper.e-device { 
  height: 30% !important; 
  top: 30% !important; 
} 
 
 
Kindly try the above sample and let us know if you need any further assistance on this. 
 
Regards, 
Balasubramanian S 


MI Mircea February 5, 2020 05:10 PM UTC

Hi Balasubramanian, 

Thank you for your answers. Here there are my test results: 

Q1. Yes, you are right. Using minDate will make useless the use of the code containing :
 if ((!args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) {
          args.cancel = this.onEventCheck(args);
        }
Done.

Q2. Yes, if you disable the code 
  var dialog = (args.element as any).ej2_instances[0];
      dialog.open = function () {
        (args.element.querySelector('.e-schedule-dialog #RoomName') as any).ej2_instances[0].refresh();
      };
the autofocus will work again.
But because you modified the code for one-click Editor now there is no "Cannot read property 'classList' of undefined " error, so I will keep both pieces of code since I need the room name to be displayed in the Editor.
Done.

Q3. I am waiting for your solution.

Q5. With the new CSS code now it is possible to format the cells which contain the room names.
What about the cells which contain the date ( Wed 5 )?
And how is possible to display the entire name of the day, Wednesday for today?

Q7.  Your CSS code is working. Well done !
This is just a workaround, the issue is still there.
Because the Editor window is also rendered at full size with the same toolbar and is not hidden by it. As the quick popup window is....
Both of them should have consistent behaviour.
Please ask developers to fix it.

Thank you very much for your help.

Regards,

Mircea


BS Balasubramanian Sattanathan Syncfusion Team February 6, 2020 11:56 AM UTC

Hi Mircea, 

Thanks for the update. 

Q1, Q7 : 
We are happy that our solution has fulfilled your requirement and we would forward this(Q7) to our development team to proceed further. 
 
Q2 : 
The resourceId(RoomName) field is mandatory for creating the appointment in resource. So we need to add that field(resourceId) in the editorTemplate as below sample.  
 

Kindly refer the above link for more details. 
 
Q3 : 
We can prevent the event creation for the current day of past time using actionBegin event like below code snippet. 

public onActionBegin(args: ActionEventArgs): void { 
  const obj: any = args.data instanceof Array ? args.data[0] : args.data; 
  if ((args.requestType === 'eventCreate') || args.requestType === 'eventChange') { 
    args.cancel = obj.StartTime.getTime() < new Date().getTime(); 
  } 
} 

Q5 : 
We can give full day text using dateHeaderTemplate like below code and alignment has been done with below CSS. 

app.component.html : 
<ng-template #dateHeaderTemplate let-data> 
  <div class="date-text">{{getDateHeaderText(data.date)}}</div> 
</ng-template> 

app.component.ts : 
getDateHeaderText = (value: Date) => { 
    const date = new Date(value); 
    const dayNames = [ 
      'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' 
    ]; 
    const dayIndex = date.getDay(); 
    return '' + dayNames[dayIndex] + ', ' + date.getDate(); 
  } 

app.component.css : 
// To display date header text in center alignment 
.date-text { 
  text-align: center; 
} 
 
 
 
Kindly try the above sample and let us know if you need any further assistance on this. 

Regards, 
Balasubramanian S

MI Mircea February 6, 2020 02:25 PM UTC

Hi Balasubramanian ,

Thank you very much for your efforts. The conclusions are:

Q3. It is working with actionBegin event but would be better to use onPopupOpen event instead?

Because the user have no idea his action to add an appointment will be blocked at the end
and will be frustrated to find that just after he/she was loosing time completing all the fields.

Q5. Done

Thank you very much for your help.

Regards,

Mircea


MI Mircea February 6, 2020 10:59 PM UTC

Hi Balasubramanian ,

To my big surprise I found the code for Q1 is not working on mobile. That is I can open quick popup for an existing appointment.
On desktop it is working properly.
What I've done is I added some data a your last sample sample-2023949618.zip. See the archive I attached tot this message.

Thank you very much for your help.

Regards,

Mircea

Attachment: ang8master_1f68dc84.zip

MI Mircea February 6, 2020 11:24 PM UTC

Hi Balasubramanian ,

I have another question related to Q3. Implementing "minDate" should not block you to see the previous appointments?
Because even you are block to browse the previous days, if you select Week view you can see all the appointments for the present week, including the appointments from yesterday, the day before yesterday and so on.

Thank you very much for your help.

Regards,

Mircea

BS Balasubramanian Sattanathan Syncfusion Team February 7, 2020 01:00 PM UTC

Hi Mircea, 
 
Thanks for the update. 
 
Q1 : 
We have tried to reproduce your reported problem in below sample but we couldn’t. Kindly share the replication steps in below sample / share the video demo for serve you better. 
 
Q3 : 
Yes, We can prevent the popupOpen for past time like below code snippet.  
 
if ((args.target && !args.target.classList.contains('e-appointment') && (args.type === 'QuickInfo')) || (args.type === 'Editor')) { 
  const obj: any = args.data instanceof Array ? args.data[0] : args.data; 
  args.cancel = obj.StartTime.getTime() < new Date().getTime(); 
} 
 
public onDragStop(args: DragEventArgs): void { 
    const obj: any = args.data instanceof Array ? args.data[0] : args.data; 
    args.cancel = obj.StartTime.getTime() < new Date().getTime(); 
} 
public onResizeStop(args: ResizeEventArgs): void { 
    const obj: any = args.data instanceof Array ? args.data[0] : args.data; 
    args.cancel = obj.StartTime.getTime() < new Date().getTime(); 
} 
 
 
Q5 : 
We are happy that our solution has fulfilled your requirement. 
 
 
Kindly try the above sample and let us know if you have concerns. 
 
Regards, 
Balasubramanian S 


MI Mircea February 7, 2020 02:09 PM UTC

Hi Balasubramanian ,

You can access https://testare.anada.ro from desktop and mobile and you will see for existing appointments you can open the quick popup.
Please use the attached archive to reproduce on your local computer.

Regards,

Mircea

Attachment: ang8master_6965fcbf.zip

MI Mircea February 8, 2020 09:48 AM UTC

Hi Balasubramanian, 

I modified a bit your code for Q3 like this:

 if ((args.target && !args.target.classList.contains('e-appointment') &&
          (args.type === 'QuickInfo')) || (args.type === 'Editor')) {
          const obj: any = args.data instanceof Array ? args.data[0] : args.data;
           if (obj.StartTime.getTime() < new Date().getTime()) {
           
            args.cancel = true;
            this.toastObj.show({
              title: 'Information !',
              content: 'You cannot add an appointment in the past',
              cssClass: 'e-toast-info'
            })
          } 
 }

to let the users know they cannot add appointments in the past.
On the mobile the notification is working properly but on the desktop I can see twice the notification.
You can test that as usual at the updated https://testare.anada.ro/.

Thank you very much for your help.

Regards,

Mircea


VM Vengatesh Maniraj Syncfusion Team February 10, 2020 12:14 PM UTC

Hi Mircea, 

Thanks for the update. 

We have validated your reported query, in that you need to display the message using Toast component instead of opening the editor window for the past (i.e., completed) events. And we have modified our previously updated sample based on your reported scenario using popupOpen event and it can be downloaded from the following link. 


And for further reference kindly refer the below code snippets, 

  public onPopupOpen(args: PopupOpenEventArgs): void { 
    // Q6 - open the Editor with one click 
    if (args.type === 'QuickInfo' && (args.target.classList.contains('e-work-cells'))) { 
      const dialogObj = (args.element as any).ej2_instances[0]; 
      dialogObj.hide(); 
      const currentAction = args.target.classList.contains('e-work-cells') ? 'Add' : 'Save'; 
      this.scheduleObj.openEditor(args.data, currentAction); 
    } 
    if (args.type === 'Editor') { 
      args.duration = 90; 
      const obj: any = args.data instanceof Array ? args.data[0] : args.data; 
      var dialog = (args.element as any).ej2_instances[0]; 
      dialog.open = function () { 
        (args.element.querySelector('.e-schedule-dialog #RoomName') as any).ej2_instances[0].refresh(); 
      }; 
      const subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement; 
      subjectElement.value = (args.data as any).Subject = 'Reservation'; 
      const roomElement: HTMLInputElement = args.element.querySelector('#RoomName'); 
      if (!roomElement.classList.contains('e-multiselect')) { 
        let roomObject: MultiSelect = new MultiSelect({ 
          placeholder: 'Choose a room', 
          fields: { text: 'roomName', value: 'roomName' }, 
          dataSource: (this.roomsDataSource as any), 
          value: <string[]>(((args.data as any).RoomName instanceof Array) ? (args.data as any).RoomName : [(args.data as any).RoomName]) 
        }); 
        roomObject.appendTo(roomElement); 
      } 
      const startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement; 
      if (!startElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); 
      } 
      const endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement; 
      if (!endElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); 
      } 
      // validations 
      const formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form'); 
      const validator: FormValidator = ((formElement as EJ2Instance).ej2_instances[0] as FormValidator); 
      validator.dataBind(); 
     validator.addRules('Name', { required: true }); 
      validator.addRules('Email', { required: true, email: [true] }); 
      args.cancel = obj.StartTime.getTime() < new Date().getTime(); 
      if (args.target && (args.target.classList.contains('e-appointment'))) { 
        console.log('cannot edit, view details or delete an appointment'); 
        if (obj.StartTime.getTime() < new Date().getTime()) { 
          this.toastObj.show({ 
            title: 'Information !', 
            content: 'You cannot edit, view details or delete an appointment', 
            cssClass: 'e-toast-info' 
          }); 
        } 
      } 
    } 
  } 

Kindly try the above sample, if you have any other concerns please revert us back for better serve. 

Regards, 
Vengatesh 


MI Mircea February 10, 2020 02:32 PM UTC

Hi Vengatesh,

The last sample it is good but has some problems:

1. A future appointment can be edited or deleted (which is not good). Before that option was not working.

2. It is true now you cannot add an appointment in the past, but there is no information (notification) about this limitation for the user when he/she tries to tap or click on the screen.

3. If you select the Week view you can see the appointments from the past, especially on the touch screens where you can swipe to the right (in the past) even it is block on the normal screen.

Thank you very much for your help.

Regards,
Mircea


HB Hareesh Balasubramanian Syncfusion Team February 11, 2020 01:52 PM UTC

Hi Mircea, 
  
Thanks for the update. 
 
Based on your requirement, we have modified our previously updated sample and it can be downloaded from the following link, 
 
 
Q1: We suspect that you need to prevent the editor window for all the events (i.e., past, current and future events). 
 
Q2: we suspect that you need that some message to be displayed while clicking on the cells (i.e., for past time period cells only). 
 
Response for Q1 and Q2 queries, 
 
We have achieved you requirement using popupOpen event and for further reference kindly refer the below highlighted code snippet for both (Q1 and Q2) queries and the same can be viewed in the above sample, 
 
Code snippet: 
 
  public onPopupOpen(args: PopupOpenEventArgs): void { 
    // Q6 - open the Editor with one click 
    if (args.type === 'QuickInfo' && (args.target.classList.contains('e-work-cells'))) { 
      const dialogObj = (args.element as any).ej2_instances[0]; 
      dialogObj.hide(); 
      const currentAction = args.target.classList.contains('e-work-cells') ? 'Add' : 'Save'; 
      this.scheduleObj.openEditor(args.data, currentAction); 
    } 
    if (args.type === 'Editor') { 
      args.duration = 90; 
      const obj: any = args.data instanceof Array ? args.data[0] : args.data; 
      var dialog = (args.element as any).ej2_instances[0]; 
      dialog.open = function () { 
        (args.element.querySelector('.e-schedule-dialog #RoomName') as any).ej2_instances[0].refresh(); 
      }; 
      const subjectElement: HTMLInputElement = args.element.querySelector('#Subject') as HTMLInputElement; 
      subjectElement.value = (args.data as any).Subject = 'Reservation'; 
      const roomElement: HTMLInputElement = args.element.querySelector('#RoomName'); 
      if (!roomElement.classList.contains('e-multiselect')) { 
        let roomObject: MultiSelect = new MultiSelect({ 
          placeholder: 'Choose a room', 
          fields: { text: 'roomName', value: 'roomName' }, 
          dataSource: (this.roomsDataSource as any), 
          value: <string[]>(((args.data as any).RoomName instanceof Array) ? (args.data as any).RoomName : [(args.data as any).RoomName]) 
        }); 
        roomObject.appendTo(roomElement); 
      } 
      const startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement; 
      if (!startElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement); 
      } 
      const endElement: HTMLInputElement = args.element.querySelector('#EndTime') as HTMLInputElement; 
      if (!endElement.classList.contains('e-datetimepicker')) { 
        new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement); 
      } 
      // validations 
      const formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form'); 
      const validator: FormValidator = ((formElement as EJ2Instance).ej2_instances[0] as FormValidator); 
      validator.dataBind(); 
      validator.addRules('Name', { required: true }); 
      validator.addRules('Email', { required: true, email: [true] }); 
      if (args.target && (args.target.classList.contains('e-appointment'))) { 
        args.cancel = true; 
        console.log('cannot edit, view details or delete an appointment'); 
        this.toastObj.show({ 
          title: 'Information !', 
          content: 'You cannot edit, view details or delete an appointment', 
          cssClass: 'e-toast-info' 
        }); 
      } else if (obj.StartTime.getTime() < new Date().getTime()) { 
        args.cancel = true; 
        this.toastObj.show({ 
          title: 'Information !', 
          content: 'You cannot add an appointment in the past times', 
          cssClass: 'e-toast-info' 
        }); 
      } 
    } 
  } 
 
Q3: We can be able to replicate your reported issue at our side and we will updated further details in a short time. 
 
Kindly try the above sample, if you have any other concerns kindly revert us back for the better serve. 
 
Regards, 
Haeesh 


MI Mircea February 11, 2020 06:45 PM UTC

Hi Haeesh,

The requirements were  all the time:
1. You can add appointments as long as they are not for the past times.
2. The users cannot edit or delete an existing appointments (from the past or from the future).
3. The users can open the Editor with one-click.
4. The users cannot see the appointments from the past.

First two actions should have a feedback(notification) for the users.

Your sample fulfil all the requirements with one exception, two if we consider number 4, but that condition was not addressed by your sample:
- the users are able to open the quick popup for the existing appointments( one-click is not disable) and because of that the users can delete the appointments. Yes, they cannot edit them, but they have access to the delete button from the quick popup.

You can add some code to block the quick popup on the desktop:

if (args.type === 'QuickInfo') {
      if ((args.target.classList.contains('e-work-cells')))
    
      {
        const dialogObj = (args.element as any).ej2_instances[0];
        dialogObj.hide();
        const currentAction = args.target.classList.contains('e-work-cells') ? 'Add' : 'Save';
        this.scheduleObj.openEditor(args.data, currentAction);
      }
     
      if ((args.target.classList.contains('e-appointment'))) {
        console.log('cannot edit, view details or delete an appointment');
        args.cancel = true;
        this.toastObj.show({
          title: 'Information !',
          content: 'You cannot edit, view details or delete an appointment',
          cssClass: 'e-toast-info'
        });
      }
      
    }

but it is not working on the mobile as I noticed from the 6th of February.

And the "onActionBegin" function I think it is useless for the requirements (I took it out with no differences).

Thank you very much for your help.

Regards,

Mircea

BS Balasubramanian Sattanathan Syncfusion Team February 12, 2020 02:27 PM UTC

Hi Mircea, 
 
Thanks for the update. 
 
We have analyzed your requirement and added code for disabling delete icon in event quick popup in our previously provide sample. Kindly refer the below CSS. 
 
// To disabling the delete icon 
.e-quick-popup-wrapper .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete { 
  display: none; 
} 
 
Kindly apply the above CSS in our previously shared sample and let us know if you have concerns 
 
For Q3 :  
We have logged the below bug report. The fix for this bug will be included in our patch release which is expected to roll out by February 26, 2020. We would appreciate your valuable patience until then. 
  
 
Regards, 
Balasubramanian S

MI Mircea February 12, 2020 09:22 PM UTC

Hi Balasubramanian,

Everything is working now with one exception: the users can see the appointments from the pasts. Well done !

It is very good you open the bug but it will solve just half of the problem: you will be able to swipe on the mobile to see the past 

appointments, but the user will be able to select Week or Month view and see the past appointments.

I expect to not be able to see any appointments older than the minDate.

Thank you very much for your help.

Regards,

Mircea

MI Mircea February 13, 2020 05:56 AM UTC

Hi Balasubramanian,

I noticed right now there is still a problem:

Your CSS code will disable the delete icon from the quick popup on the mobile just when you are using the short tap. If you are using the long tap the quick popup will have the delete icon.

Normally should not open the quick popup at all because the application behaviour should be consistent on the desktop and on the mobile for all the events.

Thank you very much for your help.

Regards,

Mircea

BS Balasubramanian Sattanathan Syncfusion Team February 13, 2020 10:51 AM UTC

Hi Mircea, 
 
Thanks for the update. 
 
We can prevent the past days in Week view by setting the current day to the firstDayOfWeek API. But in month view, the past days will be rendered according to the Scheduler source. And we have removed the delete icon for quick popup in the mobile mode window using the below code snippet. 
 
// To disabling the delete icon for long tap window 
.e-quick-popup-wrapper.e-device .e-popup-header .e-delete { 
  display: none;   
} 
 
// To prevent the past days in week view 
public firstDayOfWeek: Number = new Date().getDay(); 
 
 
Kindly try the above sample and let us know if you need any further assistance on this. 
 
Regards, 
Balasubramanian S

MI Mircea February 13, 2020 01:16 PM UTC

Hi Balasubramanian,

Now both the issues were solved, the remaining is the swipe problem.

Thank you very much for your help.

I noticed a small bug related to TimeLine Week, I will open a new issue.

Regards,

Mircea

VM Vengatesh Maniraj Syncfusion Team February 14, 2020 05:08 AM UTC

Hi Mircea, 

Thanks for the update.  

We are happy that your problem has resolved and we would let you know once the reported defect has resolved. 

We would update the details for this issue in the respective forum. 

Please contact us if you need any further assistance.  

Regards, 
Vengatesh 


MI Mircea February 25, 2020 10:08 PM UTC

Hi Balasubramanian, 

The issue with drag and drop


 is working now.

Thank you for your help.

Regards,

Mircea



VM Vengatesh Maniraj Syncfusion Team February 26, 2020 08:44 AM UTC

Hi Mircea, 

You are most welcome. 

We are happy that the issue has resolved. 

Regards, 
Vengatesh 


MI Mircea March 11, 2020 09:12 PM UTC

Hi Balasubramanian,

The issue with swipe on the mobile phone


was fixed on the latest v17.4.55 of the Angular Schedule.

Thank you for your help.

Regards,

Mircea

VM Vengatesh Maniraj Syncfusion Team March 12, 2020 04:24 AM UTC

Hi Mircea, 

You are most welcome. 

Please get back to us if you would require any further assistance. 

Regards, 
Vengatesh 


Loader.
Up arrow icon