Treat Month View Like Week view

[Terry Lease]

Is there a way to show events as partial days in the month view.  Currently a short appointment shows across the entire day in the month view.  Would like it to show as just a partial part of the day's slot.

Thanks!

[Ashokkumar Karuppasamy]

Hi Terry Lease

Showing events as partial days in the schedule month view is not possible, so we suggest using the Schedule Timeline Day view. Set the interval to 31 days and enable the time scale with a 1440-minute interval per day. This will display the schedule similar to the Month view, and with this approach, you can achieve your requirement. The attached code snippet and sample demonstration are provided below. Please try the solution and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/3iqzj7yy-1iu5bv5u?file=index.ts,index.html

    let scheduleObj: Schedule = new Schedule({

        height: '650px',

        selectedDate: new Date(2021, 0, 1),

        views: [

            { option: 'TimelineDay', timeScale: { enable: true, interval: 1440 }, interval: 31 },

        ],

        eventSettings: {

            dataSource: <Object[]>extend([], (dataSource as any).scheduleData.concat((dataSource as any).timelineData), null, true)

        }

    });

    scheduleObj.appendTo('#Schedule');

 

Regards,
Ashok

[Terry Lease]

Hi - actually, I think there's something off with this solution.  Take a look at this screenshot...  you'll see a reservation for Mar 17th at 9:00 AM and another on the 18th at 9AM (weekview).  This is correct.

But, when I switch to the month view, the one on the 18th shows under the 19th.  And, I've seen other anomalies where the reservations are off be several days when switching to the month view.

[Terry Lease]

And here, I start on the 14th and the reservations in the month view are off by multiple days.

I am using the answer from above;

Showing events as partial days in the schedule month view is not possible, so we suggest using the Schedule Timeline Day view. Set the interval to 31 days and enable the time scale with a 1440-minute interval per day. This will display the schedule similar to the Month view, and with this approach, you can achieve your requirement. The attached code snippet and sample demonstration are provided below. Please try the solution and let us know if you need any further assistance.

[Terry Lease]

Work the starthour and endhour cause this

[Vijay Ravi]

Hi Terry Lease,

Based on your requirements, we will validate your scenario at our end by applying the specified startHour and endHour to the schedule.However, we were unable to replicate the problem on our end. To assist us in understanding and addressing the issue more effectively, could you kindly provide the following details? This information will help us provide more thorough support in resolving the problem.

 

• Share the issue replicate sample.
• Share your sample staging link.
• Replicate the issue in our shared sample
• Share the issue replicate video demo.

 

Sample link: https://stackblitz.com/edit/9qz4os72-pshphxqa?file=index.js
 

please get back with requested details to us if you need any further assistance

Regards,

Vijay

[Terry Lease]

Hi Vijay.  It's not practical for me to be able to share my code.

But I did remove the start and end hours and it solved the issue.  The downside is that now users will see hours that they don't care about.

I will try to create a snippet that replicates the issue.

[Terry Lease]

Hi again - is it possible to add generic data to:   https://stackblitz.com/edit/9qz4os72-pshphxqa?file=index.js

i'd like to try to replicate the issue from there.

[Ashokkumar Karuppasamy]

Hi Terry Lease,

We consider your reported query with "Event Misalignment in Timeline Day View with Custom Time Scale and Interval Settings" as a bug and logged the defect report. The fix for this defect will be included in our upcoming SP patch release, which is expected to be rolled out by the January 28, 2025. You can track the status of the fix at the following link:

Feedback link: Event Misalignment in Timeline Day View with Custom Time Scale and Interval Settings in JavaScript | Feedback Portal

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,
Ashok

[Ashokkumar Karuppasamy]

Hi Terry Lease,

We are glad to announce that our weekly release (V28.2.4) has been rolled out successfully. The fix for the issue has been included in our weekly release(28.2.4). Upgrade to the latest version to resolve the issue.

Release notes:  https://ej2.syncfusion.com/react/documentation/release-notes/28.2.4?type=all#schedule

Issue 1: Event Misalignment in Timeline Day View with Custom timeScale and Interval Settings properties.

Sample: https://stackblitz.com/edit/9qz4os72-ysj8hymv?file=index.js,index.html

Issue 2: When navigating to the start date (e.g., March 14th), reservations in the Timeline Day view (with Month-level interval) are displayed incorrectly

Sample: https://stackblitz.com/edit/9qz4os72-9va3tbg1?file=index.js,index.html

Feedback: https://www.syncfusion.com/feedback/64602/event-misalignment-in-timeline-day-view-with-custom-time-scale-and-interval

Root Cause: The schedule timeScale is enabled, with the interval set to 1440, and the startHour set to '09:00' and endHour to '17:00'. The root cause is that the app Left calculation does not properly handle the end hour fields. As a result, both issues the appointment Left is set improperly.

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Ashok