Jobs being hidden behind other jobs

[Christopher kightley]

We're having a massive issue with appointments being hidden currently and overlapping unnecessarily for no apparent reason. This is causing huge issues with our customers and staff not being prepared for jobs.

An example of this can be seen below. 

https://www.canva.com/design/DAGJyyEHGW4/dXTcPj6rOxXHVzIkQ7YxmQ/view?utm_content=DAGJyyEHGW4&utm_campaign=designshare&utm_medium=link&utm_source=editor  

As you can see, the job in green is almost completely hidden even though there is a huge cap to the left of the screen. There have been instances of these completely hidden making the click event to open the editor impossible.

Please can this be looked into ASAP as this is now affecting our customers.

Thank you,

Chris

[Ram Raju Elaiyaperumal]

Hi Christopher kightley,

We understand that you are experiencing an issue with overlapping appointments. This can occur due to a variety of reasons such as setting different heights for events or using an event template to render events with custom styles.

To assist you more effectively, could you please provide additional information:

1. Have you set custom heights for different events?

2. Have you used an event template to render the events?

It would be helpful if you could provide a simple sample that replicates the issue or share a code snippet of your setup. This will enable us to identify the root cause of the problem and provide a more precise solution.

Regards,

Ram

[Christopher kightley]

So as you can see from the 2 screenshots below, i've taken out all the custom cell css applied as well as the entire window height and width customisations.  

After taking out all of these additional customisation, as you can see below, there is still an issue with the appointments overlapping to the far left as well as in the middle of the calendar.

[Swathi Ravi]

Hi Christopher,

We have reviewed your reported issue by preparing a sample based on the code snippets and image you shared. However, we haven't encountered the issue you described. Please check our shared sample and provide more detailed information to help us proceed further with your query.

You can assist us better by:

• Sharing the entire Schedule-related code snippets, including all customizations.
• Sharing the appointment DataSource.
• Replicating the issue in our shared sample.
• Sharing a sample that replicates the issue.

This information will be very helpful in providing a more effective solution.

Sample: hhttps://stackblitz.com/edit/ytxqt7?file=src%2FApp.vue

Regards,

Swathi Ravi

[Christopher kightley]

Based on the code snippet you have provided above, here is the exact same base code with more subjects added which shows appointments being hidden under other appointments and missalignment.

https://stackblitz.com/edit/ytxqt7-k4xq8a?file=src%2FApp.vue

[Swathi Ravi]

Christopher,

You can resolve the reported issue by setting the minimumEventDuration to 60 in the eventSettings, as demonstrated in the following snippets.

[App.vue]

 export default {

        components: {

          'ejs-schedule': ScheduleComponent

        },

        data: function () {

            return {

                eventSettings: { dataSource: data, minimumEventDuration: 60 },

                selectedDate: new Date(2024, 1, 15),

                currentView: 'Day'

            }

        },

    }

Sample: vue-scheduler-appointment-overlap-issue-resolved - StackBlitz

Output:

[Christopher kightley]

We can’t force appointments to show as an hour? That defeats the objective of using the scheduler? We have an absolute minimum set as 20 minutes, however this is still causing the same issue. Can we have another solution to this please?

[Swathi Ravi]

Christopher,

 

The issue has been caused by duplicate IDs in appointments. When unique IDs are provided, the overlapping issue does not occur even without `minimumEventDuration`. Please check our shared sample for your reference.

 

Sample: vue-scheduler-appointment-overlap-issue-resolved (forked) - StackBlitz

[Christopher kightley]

Can i prove a code sample to you for you to look at which shows the error in question within a private email please. Can i please be provided an email address to do so as the data we hold is strictly confidential. 

Thanks

[Swathi Ravi]

Christopher,

 

Please share your sample through our support email address at [email protected] and we assure that it is private and secure to share your data.