booking display section in hotel booking showcase

[LEE]

https://blazor.syncfusion.com/showcase/hotel-booking

Actually, the real world hotel's booking time zone is from the afternoon to the next day's morning.

But above, it covers the full two days. It means not real.

While it's not necessary to display the reservation in direct proportion to the actual check-in and check-out times, the way it is currently interpreted means that this site booking system is for only getting 2-day bookings.

Of course, if I click the Add Booking button, or click on an existing booking to look over, I am free to enter more information, since there is no time zone constraint at this point. 

(this is not of my question, so I'll let it slide for now).

However, I think it would be normal for the scheduler to show at least half of the day (50%), and then half of the next day (50%) according to the real world. 2 days& 1 night system in default.

I've been looking at where to modify the code for this, but I'm at a loss, so I'm posting a question.

 

[Ram Raju Elaiyaperumal]

Hi Lee,

Thank you for your detailed query. I understand that you want to adjust the booking system to reflect a real-world hotel's booking time zone, which typically spans from the afternoon of one day to the morning of the next day.

To achieve this, you need to modify the start and end times in several places in your code. Here's how you can do it:

[Schedule.razor]

@{

  if (UpdateStartTime)

  {

(context as AppointmentData).StartTime = (context as AppointmentData).StartTime.AddHours(14);

(context as AppointmentData).EndTime = (context as AppointmentData).EndTime.AddHours(12);

UpdateStartTime = false;

    }

   }

@{

   if (IsStartTimeUpdated || IsintialLoad)

   {

   if((context as AppointmentData).Id < 1)

    {

  var startTime = (context as AppointmentData).StartTime;

  (context as AppointmentData).EndTime = new DateTime(startTime.Year, start Time.Month, startTime.Day, 11, 0, 0).AddDays(1);

     IsStartTimeUpdated = false;

     IsintialLoad = false;

     }

 }

   }

public void OnActionCompleted(ActionEventArgs<AppointmentData> args)

{

if(args.AddedRecords != null)

{

if (args.AddedRecords.Count > 0 && IsCellDoubleClick)

{

args.AddedRecords[0].StartTime = args.AddedRecords[0].StartTime.AddHours(14);

args.AddedRecords[0].EndTime = args.AddedRecords[0].EndTime.AddDays(-1).AddHours(11);

IsCellDoubleClick = false;

}

}

Service.ShowCalendar = false;

Service.CalendarPageRef?.StateChanged();

Service.ShowCalendar = true;

Service.CalendarPageRef?.StateChanged();

Service.SidebarPageRef?.StateChanged();

}

[AppointmentService.cs]

this.DateTimePickerStartTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month,DateTime.Now.Day, 14,0,0);

this.DateTimePickerEndTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 12, 0, 0).AddDays(1);

This code adjusts the start time to 2 PM and the end time to 11 AM the next day, which should reflect the typical booking period of a real-world hotel.

For your convenience, we have prepared a sample that demonstrates your scenario, kindly check on the attached sample

Please let us know if you have any further questions or if there's anything else we can assist you with.

Regards,

Ram

[LEE]

Really Thank you, Ram.

But this is not what I mean.

Could you kindly take a look the screenshot?

I want all the resevation cells could display like that start from the middle of each day.

[Ram Raju Elaiyaperumal]

Hi Lee,

We have made the necessary changes to the sample in accordance with the specifications you provided. We kindly request that you take a moment to review the revised sample, which we have conveniently attached for your perusal. Please do not hesitate to provide us with any further feedback or adjustments you may deem necessary.

Regards,

Ram.

Attachment: Hotelbookingtimelineday_8d8e1baf.zip

[LEE]

I looked in the example file you provided to see where I should adjust the starting position of each cell on the timeline, but I couldn't find it.

However, in the code you provided

.e-schedule .e-timeline-view .e-appointment {

    height: 50px !important;

    width: 50px !important;

}

- style.css

By adjusting the width slightly, I fixed the right end line of the cell being a little further out than exactly 1/2 of the date, so that it is now almost at the 1/2 point.

Again, could you kindly point me to where I can modify the left starting point of each cell so that the cells are rendered from the middle, halfway through each day, as in the example you showed.

Thank you very much.

Regards,

Mr. LEE.

[Venkateshwaran Saravanakumar]

Hi Lee,

We have validated your shared query at our end and would like to inform you that in the timeline month view, appointments will render for the entire day irrespective of time. In the meantime, we have achieved your requirement by customizing the TimelineDay view of the scheduler using the Interval option and the TimeScale property. For the same, we have prepared the sample and shared it for your reference. We would also like to inform you that this way, the appointment width covers the cell as per your requirement based on its start and end time, so setting width for the appointment was not required. Kindly try the shared sample and let us know if you need any further assistance.

[Schedule.razor]

  

<SfSchedule TValue="AppointmentData" Height="800px">

    <ScheduleTimeScale Enable="true" Interval="1440" SlotCount="1"></ScheduleTimeScale>

<ScheduleViews>

    <ScheduleView Option="View.TimelineDay" Interval="@DaysInMonth"></ScheduleView>

</ScheduleViews>

 

@code {

        private int DaysInMonth => DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month);

}

Regards,

Venkatesh

Attachment: HotelBookingTimelineDay_dd178a0a.zip

[LEE]

Thank you, Venkatesh.

But still, I don't get it.

1. How to make it started from the middle of each day for code : the sfschedule's default cell was started from the start line of each day. So I wanted to make it started from the middle of each day.you guys provided the source example which fixed it, but still, I don't know which source part was modified to do that. So I need to know where I have to see for that.
2. The meaning of you reply

in your reply

We would also like to inform you that this way, the appointment width covers the cell as per your requirement based on its start and end time, so setting width for the appointment was not required.

I don't get it, what it means.

      3. Editor Window not working

And in your source code, it looks the definition of the EventDoubleClick function exists, but it doesn't actually work. When I double-click on a booking information cell, the editor window should open, but it doesn't. All the relevant code exists, so why doesn't it work?

     4. Create a new reservation is not available 

Also, in the code example you gave, when I click the 'ADD reservation' button on the top right, the reservation window opens, but when I fill in the information and click the CREATE button, it says that the room is not bookable, but the dates are bookable.

Could you kindly take a look for this matters?

Regards,

[Ram Raju Elaiyaperumal]

Hi Lee,

In a previous update, we introduced a timescale feature that enables events to be displayed at their actual specified times.

Appointment width: The width of an appointment in the scheduler is calculated based on its start and end time. In the provided sample, the start time is set to 2pm and the end time is set to 11am the next day. Therefore, the width of the appointment is calculated to span from 2pm to 11am the next day, which align in the middle by default. We've also addressed an issue by removing a CSS override that was affecting the width of elements.

We have re-examined the sample for your next two inquiries and confirmed that events can indeed be added both through double-clicking and by clicking a button. It seems you may have attempted to double-click on a past date, which is disabled, or tried to add an event to a time slot that was already occupied, which is not possible.

Additionally, we have recorded a video demonstrating the testing of your scenario. Please find the video attached for your reference.

Regards,

Ram

[LEE]

Hi? Ram,

I looked at the 'timescale' function as you said and found this

            <ScheduleTimeScale Enable="true" Interval="1440" SlotCount="1"></ScheduleTimeScale>

I tried putting this code in the base of the SfSchedule component, but it only applies 100% of the width of the cell to all cells for the dates it contains, 

not automatically adjusting the width based on the values of starttime and endtime set.

I've looked all over the HotelSchedule example code, but I can't find where I can turn it on/off.

Could you please point me to it?

Also, you said you attached a video, but I can't see anyone in your reply, please check.

[Ram Raju Elaiyaperumal]

Hi Lee,

As per your query, the code block <ScheduleTimeScale Enable="true" Interval="1440" SlotCount="1"></ScheduleTimeScale> is indeed responsible for rendering the events in their specific times. If you wish to render the events for the entire cell instead, you can simply remove this line of code.

You can locate this line in the schedule.razor file, within the <SfSchedule> component:

<SfSchedule TValue="AppointmentData" Height="800px" @bind-SelectedDate="@newDate" CssClass="@cssClass" @ref="Service.ScheduleRef" ShowHeaderBar="false" ShowQuickInfo="Service.Mobile ? true : false" EnableAutoRowHeight="true" AllowDragAndDrop="false" AllowResizing="false">

 

            <ScheduleTimeScale Enable="true" Interval="1440" SlotCount="1"></ScheduleTimeScale>

           
</SfSchedule>

 

Regarding the video attachment, please find the attached video for your reference.

Please let us know if you have any further questions or need additional assistance.

Regards,

Ram

Attachment: hotelbookingtest_aa6d56ca.zip

[LEE]

First of all, I would like to thank you for the video material you have created.

However, this is completely unrelated to my question.

My question is about how to set the position of the start and end of each Hotel Booking(Appointment) Cell in relation to the settings in SfSchedule. (Where I have to put or fix or change to make this happened)

I've asked this question over and over again, and maybe I'm not explaining myself well enough, but you keep saying things that have nothing to do with my question.

The cells in the default SfSchedult have their start and end aligned with the start and end lines of the Column as it is ( each day in column - I don't like it.).

(Of course, the default cell which the start line is exactly where it should be, but the end line has a bit of a margin.)

I'm not sure how you got these work to start each hotel booking cell from at the real start time line.

I'd like to know how I can make it the same one on(from) the default SfSchedule. So I can freely use it whenever I need it.

The example which you gave me is still a bit too massive for me, so I don't know where I need to modify to be done like you.

I would very much like to know how I can match the vertical line in the column with the actual time zone of the hotel reservation.

Thanks.

Translated with www.DeepL.com/Translator (free version)

[Ram Raju Elaiyaperumal]

Lee,
Follow the step by step procedure to achieve the solution at your end.

1. Switch to Timeline Day View: Initially, the application was built on a timeline month view where each appointment takes the entire cell. To render the appointments in a specific timeframe, we need to change it to a timeline day view with an interval set to the specific day in the corresponding month. Here's how you can do this in your Schedule.razor file:

[schedule.razor]

<ScheduleViews>

     <ScheduleView Option="View.TimelineDay" Interval="@DaysInMonth"></ScheduleView>

  </ScheduleViews>

    }

</div>

@code {

    private int DaysInMonth => DateTime.DaysInMonth(DateTime.Now.Year, DateTime.Now.Month);

   }

 

2. Add Timescale and Set Date: The next step is to add the Timescale and set the date to the scheduler as the first day of the current month. Here's how you can do this:
   blazor-showcase-hotel-booking/server/Hotel-Booking/Pages/Schedule.razor at development · essential-studio/blazor-showcase-hotel-booking (github.com)
   
   

DateTime newDate = new DateTime(Service.CurrentDate.Year, Service.CurrentDate.Month, 1);

        <SfSchedule TValue="AppointmentData" Height="800px" @bind-SelectedDate="@newDate" CssClass="@cssClass" @ref="Service.ScheduleRef" ShowHeaderBar="false" ShowQuickInfo="Service.Mobile ? true : false" EnableAutoRowHeight="true" AllowDragAndDrop="false" AllowResizing="false">

            <ScheduleTimeScale Enable="true" Interval="1440" SlotCount="1"></ScheduleTimeScale>

 

3. Change Time on Event Editor Window: To display time similar to the real-time scenario (2pm to 11am), you need to modify a few places in your code. Here are the necessary changes:

Modify the below places to achieve the required time.

  <div class="flex-prop">

                            @{

                                if (UpdateStartTime)

                                {

                                    (context as AppointmentData).StartTime = (context as AppointmentData).StartTime.AddHours(14);

                                    (context as AppointmentData).EndTime = (context as AppointmentData).EndTime.AddHours(12);

                                    UpdateStartTime = false;

                                }

                            }

blazor-showcase-hotel-booking/server/Hotel-Booking/Pages/Schedule.razor at development · essential-studio/blazor-showcase-hotel-booking (github.com)

 

if (IsStartTimeUpdated || IsintialLoad)

                                {

                                    if((context as AppointmentData).Id < 1)

                                    {

                                        var startTime = (context as AppointmentData).StartTime;

                                        (context as AppointmentData).EndTime = new DateTime(startTime.Year, startTime.Month, startTime.Day, 11, 0, 0).AddDays(1);

                                        IsStartTimeUpdated = false;

                                        IsintialLoad = false;

                                    }

                                }

blazor-showcase-hotel-booking/server/Hotel-Booking/Pages/Schedule.razor at development · essential-studio/blazor-showcase-hotel-booking (github.com)

 

Also, in the onActionCompleted method,

    public void OnActionCompleted(ActionEventArgs<AppointmentData> args)

    {

        if(args.AddedRecords != null)

        {

            if (args.AddedRecords.Count > 0 && IsCellDoubleClick)

            {

                args.AddedRecords[0].StartTime = args.AddedRecords[0].StartTime;

                args.AddedRecords[0].EndTime = args.AddedRecords[0].EndTime;

                IsCellDoubleClick = false;

            }

        }

        Service.ShowCalendar = false;

        Service.CalendarPageRef?.StateChanged();

        Service.ShowCalendar = true;

        Service.CalendarPageRef?.StateChanged();

        Service.SidebarPageRef?.StateChanged();

    }

blazor-showcase-hotel-booking/server/Hotel-Booking/Pages/Schedule.razor at development · essential-studio/blazor-showcase-hotel-booking (github.com)

 

Then modify the time for the datetime picker in the AppointmentService.cs file.

            this.DateTimePickerStartTime = new DateTime(DateTime.Now.Year, DateTime.Now.Month,DateTime.Now.Day, 14,0,0);

blazor-showcase-hotel-booking/server/Hotel-Booking/Data/AppointmentService.cs at development · essential-studio/blazor-showcase-hotel-booking (github.com)

 

4. Add CSS: Finally, add the following CSS to your style.css file:

[style.css]

 .e-schedule .e-timeline-view .e-date-header-wrap table col,

.e-schedule .e-timeline-view .e-content-wrap table col {

    width: 70px;

}

.e-schedule .e-timeline-view .e-appointment {

    height: 50px !important;

}

.e-schedule .e-timeline-view .e-current-timeline,

.e-schedule .e-timeline-view .e-current-time {

    display: none;

}

.e-schedule .template-wrap .resource-details {

    padding-left: 10px;

}

.e-schedule .e-time-slots {

    display: none;

}

.app-scheduler.e-schedule .e-timeline-month-view.e-ignore-whitespace .e-work-cells,

.app-scheduler.e-schedule .e-timeline-day-view.e-ignore-whitespace .e-work-cells,

.app-scheduler.e-schedule .e-timeline-month-view.e-ignore-whitespace .e-resource-cells,

.app-scheduler.e-schedule .e-timeline-day-view.e-ignore-whitespace .e-resource-cells {

    height: 60px;

}

 

By following these steps, you should be able to render the appointments in the middle of each day as per your requirement. Please let us know if you have any further questions or need additional assistance.

 

Regards,

Ram

[LEE]

Thank you so much, now i think I got the point.

If you allow me to ask one more thing,

this sample project shows the appointment's cell only for one day limitation, even though I make a few days over.

Could you give 

 

[Ram Raju Elaiyaperumal]

Lee,

We understand that you're experiencing an issue where the events in your project are only showing for one day, even if the appointment spans multiple days.

This issue might be due to a static width being applied to the events. If a static width is set, it could prevent the event from expanding to cover multiple days, even if the appointment duration is longer.

To resolve this, you can inspect the event in your browser's developer tools to see if a static width is being applied. If you find a width property set on the cells, you can try removing it to see if that resolves the issue. Check whether any width is applied to the e-appointment class

We have attached a sample, kindly check on the attached sample.

Additionally, we have recorded a video demonstrating the testing of your scenario. Please find the video attached for your reference.

Regards,

Ram

Attachment: hotelbookingtest_60e351ea.zip

[LEE]

Hi, Ram.

This works perfectly.

The example you provided to me, it was written 'width: 87px !important;

When I put a strike line there, it worked like a charm.

Really thank you for your long supportive.

.e-schedule .e-timeline-view .e-appointment {

1. height: 50px !important;
2. /* width: 87px !important;

[Ram Raju Elaiyaperumal]

Hi Lee,

We're glad to hear that the solution worked for you! If you have any more questions in the future, don't hesitate to ask.

Regards,

Ram