TimeLine Week view show wrong current time

[Mircea]

Hi,

I have an Angular 8 Schedule project which was working good before a modified the time slot and args.duration from 90 minutes to 600 minutes.

In that moment the current time showed in the TimeLine Week view is exactly with 24 hours (one day) in the future.

I attached an archive with my project.

Thank you for your help.

Regards,

Mircea

Attachment: sampleTimelineWeek_f67ec2b8.zip

[Mircea]

Hi,

I have another question which is related to the same project. 

I have some custom template time fields in the Editor.

I already implemented the localization for the Scheduler, but how can I localize the date and time in the Editor?

Thank you very much for your help.

Regards,

Mircea

[Balasubramanian Sattanathan]

Hi Mircea, 

Greetings from Syncfusion Support. 

Q1 : 

We have checked your reported problem. We could able to reproduce at our end. So, we suggest you use endHour property as “20:00” to overcome the current time indicator issue like below code. 

app.component.html : 

endHour='20:00' 

Q2 : 

We can localize the date and time of the editor window when we using editorTemplate like below code snippet. 

 

 

app.component.ts : 

const startElement: HTMLInputElement = args.element.querySelector('#StartTime') as HTMLInputElement; 

if (!startElement.classList.contains('e-datetimepicker')) { 

  new DateTimePicker({ value: new Date(startElement.value) || new Date(), locale: 'de' }, 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(), locale: 'de' }, endElement); 

} 

 

Sample : https://www.syncfusion.com/downloads/support/forum/151531/ze/modified_sample362446178.zip  

 

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

Regards, 

Balasubramanian S

[Mircea]

Hi Balasubramanian,

Thank you for your answers, these are the results:

Q1. Indeed modifying the endHour did the trick. I can put any hour until 22:55, but starting with 23:00 will move the current time(the red line) to the next day.

It depends on the interval value?

If I want to have a single appointment what should I do? A single appointment which filled up the box and not let another appointment to be made for that day...

Q2. It is working now.

Thank you very much for your help.

Regards,

Mircea

[Mircea]

Hi Balasubramanian,

I have another question about the TimeLine Week view: it is possible to modify it to have horizontally the rooms name (Nancy, Margaret and so on) and vertically the week days (Monday, Tuesday and so on)? And just one box and one appointment possible per room per day (from 10 am to 11 pm for example)?

Thank you very much for your help.

Regards,

Mircea

[Balasubramanian Sattanathan]

Hi Mircea, 

 

Thanks for the update. 

 

Q1 : 

Indeed modifying the endHour did the trick. I can put any hour until 22:55, but starting with 23:00 will move the current time(the red line) to the next day. 

It depends on the interval value? 

 

Yes. It is depends on the TimeScale interval value. We should change the Scheduler endHour based on the timescale interval.  

 

If I want to have a single appointment what should I do? A single appointment which filled up the box and not let another appointment to be made for that day... 

 

Based on your requirement, we prepared sample using actionBegin method and isSlotAvailable method like below code snippet. if a specific time slot already contains an appointment, then no more appointments can be added to that cell. 

public onActionBegin(args: ActionEventArgs): void { 

  const obj: any = args.data instanceof Array ? args.data[0] : args.data; 

  if ((args.requestType === 'eventCreate') || args.requestType === 'eventChange') { 

    if (!this.scheduleObj.isSlotAvailable(obj) || obj.StartTime.getTime() < new Date().getTime()) { 

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

      args.cancel = true; 

    } 

  } 

} 

 

 

UG : https://ej2.syncfusion.com/angular/documentation/schedule/cell-customization/#check-for-cell-availability 

isSlotAvailable : https://ej2.syncfusion.com/angular/documentation/api/schedule/#isslotavailable 

 

Q2 : 

We are happy that our solution has fulfilled your requirement. 

 

Q3 : 

We have analyzed your requirements at our end and we suspect that your requirement is related to Scheduler vertical views with resources. In that, all the resources are rendered vertically and all the week days will be rendered under the resource by default.  We can achieve your requirement using the below highlighted views with resources. Kindly refer to the below UG for more details. 

 

<e-views> 

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

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

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

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

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

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

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

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

</e-views> 

 

UG : https://ej2.syncfusion.com/angular/documentation/schedule/resources/#vertical-resource-view 

 

Kindly try the above code snippets in our previously shared sample and let us know if you need any further assistance on this. 

 

Regards, 

Balasubramanian S

[Mircea]

Hi Balasubramanian,

Thank you for your answers.

I have to explain better.

In my sample if you select TimeLine Week view you will see the following:

- the resource cells in the left aligned vertically (Nancy and so on)

- the time cells in 2 rows aligned horizontally: first row with days (Monday and so on), the second row with hours (just 10.30 am).

Practically we have one appointment per day per room (resource).

My question is like that:

1. Can we eliminate the second time cells row ( the one with hours) since the hour is the same?

2. Can we exchange the remaining time cells row with the resource cells row? So we can have the resource cells row aligned horizontally and the time cells row (the days) aligned vertically.

Thank you very much for your help.

Regards,

Mircea

[Balasubramanian Sattanathan]

Hi Mircea, 

Thanks for the update. 

Q1: 

Yes, we can remove the timeslots in the below ways. 

Solution 1 : 

If we apply the below CSS.  

.e-schedule .e-date-header-wrap .e-header-row:last-child { 

  display: none !important; 

} 

 

The TimelineWeek view will be displayed as below image. 

 

 

Sample : https://stackblitz.com/edit/angular-dttnyp-sada6e?file=app.component.css   

Solution 2 : 

If we add the below code snippet, 

public timeScale: TimeScaleModel = { 

  enable: false 

}; 

The TimelineWeek view will be displayed as below image. 

 

Sample : https://stackblitz.com/edit/angular-dttnyp-adnopo?file=app.component.ts 

 

Q2 : 

We have checked the possibility, but regret to let you know this is not feasible with our scheduler's current architecture. 

Please let us know if you have concerns 

 

Regards, 

Balasubramanian S 

[Mircea]

Hi Balasubramanian, 

I used the second solution to remove the time slots:

public timeScale: TimeScaleModel = { 

  enable: false 

}; 

For me it was a little confusing since my Editor have custom template fields and I do not know how to show the "All day" field as in your stackblitz sample. 

So I have in the Editor two fields "From" and "To" which show the same time: "2/20/2020 12:00 AM", confusing for the users.

And this solution have 2 disadvantages:

1. The appointment does not cover all the box in TimeLine Week view, leaving space to invite the user to add extra appointments.

2. The function 

public onActionBegin(args: ActionEventArgs): void { 

  const obj: any = args.data instanceof Array ? args.data[0] : args.data; 

  if ((args.requestType === 'eventCreate') || args.requestType === 'eventChange') { 

    if (!this.scheduleObj.isSlotAvailable(obj) || obj.StartTime.getTime() < new Date().getTime()) { 

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

      args.cancel = true; 

    } 

  } 

} 

does not block the user to add another appointment.

Thank you very much for your help.

Regards,

Mircea

[Balasubramanian Sattanathan]

Hi Mircea, 

 

Thanks for the update. 

 

We have validated your requirements and modified our previously shared sample. In that, We added allDay field in the editor window using the below code snippet.  

 

app.component.html : 

<tr> 

  <td class="e-textlabel">All day</td> 

  <td colspan="4"> 

    <input id="IsAllDay" class="e-field" type="text" name="IsAlDay" style="width: 100%"/>  

  </td> 

</tr> 

 

app.component.ts : 

const allDayEle: HTMLInputElement = args.element.querySelector('#IsAllDay') as HTMLInputElement; 

if (!allDayEle.classList.contains('e-checkbox')) { 

  if (this.scheduleObj.currentView === "Month" || this.target.classList.contains('e-header-cells') || 

  this.target.classList.contains('e-all-day-cells') || this.target.classList.contains('e-all-day-appointment')) { 

    new CheckBox({ checked: true, change: this.onCheck }, allDayEle); 

  } 

  else { 

    new CheckBox({ checked: false, change: this.onCheck }, allDayEle); 

  } 

} 

 

We can rendered an appointment as full slot using eventRendered event like below code snippet. 

public onEventRendered(args: EventRenderedArgs): void { 

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

} 

 

Sample : https://www.syncfusion.com/downloads/support/forum/151531/ze/sample753633602.zip  

 

All your query has been resolved in the above sample. Kindly try the above sample and let us know if you have any concerns. 

 

Note: Kindly create a new support incident under your account for better clarity.  

 

Regards, 

Balasubramanian S 

[Mircea]

Hi Balasubramanian,

Thank you for your answers.

Unfortunately there are some issues with your sample:

1. The boxes are not covered entirely by the appointments. The empty spaces are bigger to the bottom (screenshot3.jpg).

2. After I added some appointments the vertical and horizontal alignments are mixed (both screenshots).

For the other issue I will open another support incident.

Thank you very much for your help.

Regards,

Mircea

Attachment: screenshots_9b1a5392.zip

[Mircea]

Hi Balasubramanian,

I tested more and I noticed some other issues in your sample, that's why I put them here:

3. The actionBegin 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.

4. 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.

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

6. 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.

7. 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_eb0d8a0c.zip

[Balasubramanian Sattanathan]

Hi Mircea, 

 

Thanks for the update. 

 

We have validated your reported scenario at our end and we could reproduce it. So we suggest you to use below code in eventRendered event to overcome the reported issue. 

public onEventRendered(args: EventRenderedArgs): void { 

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

} 

  

Kindly try the above code in our previously shared sample and let us know if you have any concerns. 

 

Note: Kindly a create new support incident under your account for other queries to serve you better.  

 

Regards, 

Balasubramanian S 

[Mircea]

Hi Balasubramanian,

Your new code fixed the problem for Q1 and Q2. 

Thank you very much.

I will open another support incident for the rest. I already opened a new thread number 151732 for the onBegin action issue.

Thank you for your help.

Regards,

Mircea

[Mircea]

Hi Balasubramanian,

I opened the support incident number 151748 for the rest of the issues.

Thank you very much for your hep.

Regards,

Mircea

[Vengatesh Maniraj]

Hi Mircea, 

You are most welcome. 

Thanks for creating new ticket for new query. 

Please get in touch with us if you would require any further assistance. 

Regards, 

Vengatesh