AllDay appointments

[Mircea]

Hi,

I tested a new Angular 8 project which includes allday appointments. I attached my project as an archive below.

There are some issues and I do not know how to fix them:

1. The actionBegin event is working but it will be better to implement the alert before the user start to complete the Editor fields.In this way the user will not loose time with an useless action.

2. The AllDay box is working but I think it is better to take it out. The user will just loose time to check the AllDay box because without it the user cannot add another appointment. I removed and/or disabled it and the result is no appointment is showing on the display.

3. After I add an appointment the display will show the sign "<<  >>" and the hour times "00:00 - 00:00" for the appointment (see the screenshot 6 from the archive). Can be eliminated?

4. When you check the AllDay checkbox the time is changed from localized one to a non-localized one (see the screenshots 7 and 8 from the archive). The time should be kept as it is. Maybe removing the AllDay box will solve this issue.

5. In the Month view the coloured box are translated down under the day number (see screenshot 9). It should stay in their time slot and the hour time also should be eliminated.

Thank you very much for your help.

Regards,

Mircea

Attachment: screenshots2_450d381.zip

[Balasubramanian Sattanathan]

Hi Mircea, 

Thanks for contacting Syncfusion Support. 

Q1,Q2,Q3 : 

We have tried to reproduce the reported problem at our end. But we couldn’t reproduce it. So kindly share the latest project(if possible) with issue replication steps for the further assistance. 

 

Q4, Q5 : 

We have validated your reported problem in our previously shared sample and we could able to reproduce it. We suggest you to use below code to overcome the mentioned issues. 

(document.querySelector('#StartTime') as any).ej2_instances[0].format = "d.M.y"; 

(document.querySelector('#EndTime') as any).ej2_instances[0].format = "d.M.y"; 

public onEventRendered(args: EventRenderedArgs): void { 

  if (this.scheduleObj.currentView === 'Month') { 

    const dateHeader: number = (document.querySelector('.e-date-header') as any).offsetHeight + 5; 

    args.element.style.height = '' + ((document.querySelector('.e-work-cells') as any).offsetHeight - dateHeader) + 'px'; 

  } else { 

    args.element.style.height = '' + ((document.querySelector('.e-work-cells') as any).offsetHeight - 5) + 'px'; 

  } 

} 

Regards, 

Balasubramanian S 

[Mircea]

Hi Balasubramanian, 

Thank you for your answers.

I implemented your suggestions just for the Q5 and fix the Month view. The code for the localized time was a little confusing for me and I could not apply it.

So the remaining issues are:

1. The actionBegin event is working but it will be better to replace it with some code  inside the onPopupOpen event. 

The alert will popup before the user will complete the Editor fields and does not lose time with an useless action.

2. The AllDay implementation is a kind of useless because the user will just lose time to check the AllDay checkbox from the Editor to add a new appointment. 

If the user will not check the AllDay checkbox the new appointment will not be displayed.

3. On the mobile the AllDay checkbox in the Editor does not appear as a checkbox, but as a rectangular box. You can see it at https://testare.anada.ro

4. After I add an appointment the display will show the sign "<<  >>" (see the screenshot 6 from the previous archive, the appointment with Reservation subject). 

In my opinion those "<<  >>" signs should not appear.

5. Can we take out the displayed time from the appointments since they are useless (all the appointments will be from 10 am - 8 pm )?

6. When you check the AllDay checkbox in the Editor ,the time is changed from a localized one to a non-localized one (see the screenshots 7 and 8 from the previous archive). The time should be kept as it is. Maybe removing the AllDay box will solve this issue.

7. On the mobile the column cells for the time (Monday, Tuesday and so on) are too narrow when using Week or TimeLine Week view. How can we use the abbreviated names for the days (as for the Month view) just on mobile?

I attached an archive with the project and online at https://testare.anada.ro

Thank you very much for your help.

Regards,

Mircea

Attachment: angular8_6b3df0e6.zip

[Balasubramanian Sattanathan]

Hi Mircea, 

Thanks for the update. 

Q1, Q2:  

We have checked your reported scenario in shared project. We suggest you to use the below code snippet to prevent the editor window from it’s opening if event is exist in the particular slot. 

if (this.scheduleObj.isSlotAvailable(args.data)) { 

  dialogObj.hide(); 

  const currentAction = args.target.classList.contains('e-work-cells') ? 'Add' : 'Save'; 

  this.scheduleObj.openEditor(args.data, currentAction); 

} else { 

  alert('The event is already exist in the same slot'); 

  args.cancel = true; 

} 

Q3 : 

We have checked the reported problem in mobile mode. Since the all-day checkbox is rendered properly at our end. For your reference, we attached a screenshot below. 

Screenshot : 

 

 

Q4 :  

We are validating the reported problem with our development team and will update further details once they validated this issue. Kindly be patience until then. 

 

Q5 : 

We can remove the time stamp of the appointments in the particular time range using eventRendered event like below code snippet. 

 

if ((args.data.StartTime as any).getHours() >= 10 || (args.data.EndTime as any).getHours() <= 20 ) { 

  (args.element.querySelector('.e-time') as any).style.display = 'none'; 

} 

 

Q6 : 

We have validated your reported problem in our previously shared sample and we could able to reproduce it. We suggest you to use below code to overcome the mentioned issues. 

(document.querySelector('#StartTime') as any).ej2_instances[0].format = "d.M.y"; 

(document.querySelector('#EndTime') as any).ej2_instances[0].format = "d.M.y"; 

 

Q7 : 

We can short the week day names in mobile mode using below code snippet. 

getDateHeaderText = (value: Date) => { 

  const date = new Date(value); 

  let dayNames = []; 

  if ((document.querySelector('.e-schedule') as any).ej2_instances[0].isAdaptive) { 

    dayNames = [ 

      'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' 

    ]; 

  } else { 

    dayNames = [ 

      'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' 

    ]; 

  } 

  const dayIndex = date.getDay(); 

  return '' + dayNames[dayIndex] + ', ' + date.getDate(); 

} 

 

Sample : https://www.syncfusion.com/downloads/support/forum/151748/ze/Sample1740479956.zip  

Kindly try the above sample and let us know if you need any further assistance with this. 

Regards, 

Balasubramanian S 

[Mircea]

Hi Balasubramanian, 

As a quick feedback I run your last sample and all the TimeLine views (Day, Week, Month) are not displaying the appointments. 

I can see them in all other views.

Thank you for your help.

Regards,

Mircea

[Mircea]

Hi Balasubramanian, 

I found the problem: replacing 

if (this.scheduleObj.currentView === "Month"

with

if (this.scheduleObj.currentView !== "Agenda"

will not display the appointment in any of the TimeLine views. The appointment is there because

the alert will popup if you want to add another appointment in the same time slot.

And you can see the appointment in the other views (Week, Month, Day).

Regards,

Mircea

[Mircea]

Hi Balasubramanian, 

Thank you for your answers.

Here are the results:

Q1. It is working, the alert will popup before opening the Editor.

Q2. The AllDay checkbox will be auto-checked just if you use 

if (this.scheduleObj.currentView !== "Agenda"

but the appointment will not be displayed in the TimeLine views.

We have to find a solution to take out AllDay checkbox or to be auto-checked.

Q3. You can also see the problem with AllDay checkbox if you take out the code and allow the user to edit an appointment.

You will see like in the attached screenshot: "AllDay true".

Maybe it is related to the mobile OS. I am using Android 9 with Chrome browser.

Q4. I am waiting.

Q5. It is working, the appointment time is not displayed.

Q6. The code:

(document.querySelector('#StartTime') as any).ej2_instances[0].format = "d.M.y"; 

(document.querySelector('#EndTime') as any).ej2_instances[0].format = "d.M.y"; 

it is not working together with:

if (this.scheduleObj.currentView === "Month"

It is working just with : 

if (this.scheduleObj.currentView !== "Agenda"

but in that case we have the problem with the TimeLine views.

Q7. It is working, the days' name will be abbreviated on the mobile.

Thank you very much for your help.

Regards,

Mircea

Attachment: alldaytrue_176ffc94.zip

[Mircea]

Hi Balasubramanian, 

There is one more important issue I found by chance: it depends on the view which hours will be recorded for the appointments .

So if you add an appointment when you are in the Day or Week view, the appointment will be between 10.30 am current day and 10.30 am the next day.

If you are using Month or the TimeLine Day, Week or Month views, the hours for a new appointment will be between 00.00-00.00 the same day.

The problem is in the first case the appointment will be displayed as it lasts 2 days.

In the second case the displayed hours 00:00 -00:00 for the appointment will be confusing for the users.

I attached some screenshots for those cases.

I noticed another strange thing.  As I noticed before  if you add an appointment in the TimeLine view you cannot see it.

But if you add an appointment in the Week view you can see it in the TimeLine view !

I was using your sample for all my tests.

Thank you very much for your help.

Regards,

Mircea

Attachment: screens_13173084.zip

[Mircea]

Hi Balasubramanian, 

I found another issue like the one with the quick popup.

Q10. On the mobile the top part of the Editor is hidden by the toolbar. Previously you solved the problem with the following CSS code:

// To reduce the quick popup size in mobile mode

.e-quick-popup-wrapper.e-device {

  height: 35% !important;

  top: 30% !important;

}

Which is the equivalent code for the Editor?

Thank you very much for your help.

Regards,

Mircea

[Balasubramanian Sattanathan]

Hi Mircea, 

 

We have created a new support incident under your account, please follow the incident(#267571) for further assistance. Kindly log on to our support website to check further updates on it   

  

https://www.syncfusion.com/Account/Logon?ReturnUrl=/support/directtrac  

 

Regards, 

Balasubramanian S