Transparent not editable appointment

[Arwin]

Hi,

Is it possible to create a "appointment" that is displayed as background, so you can also schedule other appointments on the same time and thay wil overlap the transparent appointment?

For example:

See the red background on February 13. The red 'appointment' must not be editable, and if you click for example that day on 1:00pm, you must be able to create a appointment (so not blocked).

I thought that it will maybe work with WorkHours, but I think you cannot set 2 ranges workhours on the same day.

Then I thought mayby with cellTemplate, but then if the "appointment" is not as big as a full cell (for example, till 4:15pm but the cell is till 4:30pm) it wil not work.

Any ideas?

[Vengatesh Maniraj]

Hi Arwin, 

Greetings from Syncfusion Support. 

We have validated your requirement and prepared sample based on that. We can create the appointment as background of existing appointment using below CSS. 

.e-week-view .e-appointment { 

  left: 0% !important; 

  width: 100% !important; 

} 

 

We can create an appointment with not editable by set as  below code. 

{ 

  Id: 2, 

  Subject: "Testing", 

  StartTime: new Date(2018, 1, 14, 10), 

  EndTime: new Date(2018, 1, 14, 14), 

  IsReadonly: true 

} 

 

Sample : https://codesandbox.io/s/vue-template-9mj8m  

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

Regards, 

Vengatesh 

[Arwin]

Hi Syncfusion,

Thanks for the example. But it is not really what we are looking for. I changed the example: https://codesandbox.io/s/vue-template-27sbg

I created this because the 2 appointments are overlapping, you must see the whole appointment. But they are now 30% of the width instead of 50%. Is there a way to automatically set the right with?

And if I click on 3PM, i cannot create a new appointment for that time, the calendar selects the Testing appointment. Is it possible to open the new appointment model on the selected time?

[Vengatesh Maniraj]

Hi Arwin, 

Thanks for your update. 

Q1 : I created this because the 2 appointments are overlapping, you must see the whole appointment. But they are now 30% of the width instead of 50%. Is there a way to automatically set the right with? 

 

We have validated your reported scenario. Since you are applying CSS only for .transparent class applied appointments. So that width is not applying for all the appointments. Kindly remove the .transparent class/add the cssClass field for all appointments/follow our previously shared sample.  

Q2 : if I click on 3PM, i cannot create a new appointment for that time, the calendar selects the Testing appointment. Is it possible to open the new appointment model on the selected time? 

We have checked the possibility of achieving a shared layout, but regret to let you know this is not feasible with our scheduler's current architecture. Because there is an appointment is rendered already. If we click the 3PM, it should consider as appointment click and the corresponding popup will be opened by default.  

Regards, 

Vengatesh 

[Arwin]

Hi,

Thanks for the reply.

Q1: We have validated your reported scenario. Since you are applying CSS only for .transparent class applied appointments. So that width is not applying for all the appointments. Kindly remove the .transparent class/add the cssClass field for all appointments/follow our previously shared sample. 

If I set the width to 100%, you cannot see that the Lunch appointment is overlapping with de Dentist appointment. So is it possible to automaticcaly set the right width and left properties? As example, events displayed like this: https://codesandbox.io/s/vue-template-d1z8l but if you drag and drop that there is no blocked message...

Q2: We have checked the possibility of achieving a shared layout, but regret to let you know this is not feasible with our scheduler's current architecture. Because there is an appointment is rendered already. If we click the 3PM, it should consider as appointment click and the corresponding popup will be opened by default. 

I found a solution for this: https://codesandbox.io/s/vue-template-27sbg. I have set the "pointer-events: none;" of the background appointment.

Hopefully you have an solution for Q1.

[Balasubramanian Sattanathan]

Hi Arwin, 

 

Q1 : If I set the width to 100%, you cannot see that the Lunch appointment is overlapping with de Dentist appointment. So is it possible to automaticcaly set the right width and left properties? As example, events displayed like this: https://codesandbox.io/s/vue-template-d1z8l but if you drag and drop that there is no blocked message... 

 

Yes. If when we set the width to 100%, all the appointments should rendered with 100% and it will be shown as overlapped. Because the lunch appointment’s endTime lesser than the Dentist appointment’s endTime. If you want to show the transparent event behind the normal events, the transparent appointment’s startTime should be lesser than the normal appointment’s startTime and the endTime should be greater than the normal appointment’s endTime. 

 

Q2 : I found a solution for this: https://codesandbox.io/s/vue-template-27sbg. I have set the "pointer-events: none;" of the background appointment. 

 

We're happy you've found the solution to avoid the event creation inside the transparent event.  

 

Please let us know if you any concerns.   

 

Regards, 

Balasubramanian S 

[Arwin]

Hi,

Thanks for the response. For Q1: So it is not possible to diable the blocked message on drag/drop in this example https://codesandbox.io/s/vue-template-d1z8l? I would think that there is a workaround?

[Vengatesh Maniraj]

Hi Arwin, 

Thanks for the update. 

We have checked the shared sample in which you used IsBlock: true for transparent event. So, it will be considered as blocked events in Source level and will prevent the event creation for that range. So that we suggest you to remove the IsBlock field from the transparent event to prevent the message from being alerted while dragging and dropping event on transparent event. We modified your previously shared sample for your reference.  

  

Sample: https://codesandbox.io/s/vue-template-8drw3 

  

Kindly check the above sample and revert us with further details, if we have misunderstood your requirement or else if you need any further assistance on this. 

  

Regards, 

Vengatesh 

[Arwin]

Thank you for the response.

But now there is an unwanted empty space (marked with red):

That is the reason why I set it to blocked (as workaround). So how can we fix this (please read also my previous posts)?

Is is possible to disable the blocked message on drag/drop. Or is it possible to align the appointments the right way as above.

[Vinitha Devi Murugan]

Hi Arwin, 

 

Thanks for your update. 

 

We have checked the possibility of achieving a shared requirements of disable blocked message on drag/drop or align the appointment the right way as above, but regret to let you know this is not feasible with our scheduler's current architecture. Because if we override any of the above actions, the CRUD behavior of the event will be affected. 

 

Regards,  

M.Vinitha devi 

[Arwin]

Hi Syncfusion,

Hmm that is unfortunate. Then i was trying to make it work with workhours, but there is a bug: https://codesandbox.io/s/vue-template-i5o8c

I have set the workhours like this: start: "09:15", end: "11:40"

But the scheduler shows not 9:15 but 9:30 as available and it show 12:00 as available and not 11:40. Hopefully you can fix this.

[Hareesh Balasubramanian]

Hi Arwin, 

Thanks for your update. 

We have modified your shared sample based on your requirement using timeScale property and the sample can be viewed from the following link, 

https://codesandbox.io/s/vue-template-42xjl 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

Regards, 

Hareesh 

[Arwin]

Hmm the example you created is not that clear... You have to scroll a lot to see the whole day. Hopefully you can make it work in the future.

[Hareesh Balasubramanian]

Hi Arwin, 

Thanks for the update. 

We have validated your reported scenario at our end and the work cells are highlighted is that it should based on the given time and it should highlight the entire element. For example, a slot rendered with 30 min interval and the work hour is started as 15 min means it will not highlight the time as partially and it should render entire element which means 30 mins. So we suggest you keep the timescale intervals based on the work hours. 

Regards, 

Hareesh