We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Transparent not editable appointment

Thread ID:

Created:

Updated:

Platform:

Replies:

150442 Jan 7,2020 02:16 PM UTC Apr 3,2020 01:01 PM UTC Vue 13
loading
Tags: Schedule
Arwin
Asked On January 7, 2020 02:16 PM UTC

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 [Syncfusion]
Replied On January 8, 2020 11:33 AM UTC

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 
} 
 



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

Regards, 
Vengatesh 


Arwin
Replied On January 8, 2020 04:24 PM UTC

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 [Syncfusion]
Replied On January 9, 2020 10:16 AM UTC

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
Replied On January 9, 2020 04:18 PM UTC

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 [Syncfusion]
Replied On January 10, 2020 01:12 PM UTC

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
Replied On January 10, 2020 02:57 PM UTC

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 [Syncfusion]
Replied On January 13, 2020 10:12 AM UTC

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.  
  
  
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
Replied On January 13, 2020 10:36 AM UTC

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 [Syncfusion]
Replied On January 14, 2020 11:56 AM UTC

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
Replied On January 15, 2020 03:34 PM UTC

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 [Syncfusion]
Replied On January 17, 2020 04:42 PM UTC

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, 

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

Regards, 
Hareesh 


Arwin
Replied On April 2, 2020 02:44 PM UTC

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 [Syncfusion]
Replied On April 3, 2020 01:01 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon